Background

Instashop is a fictitious grocery franchise based in the United States. Although their customer satisfaction ratings have remained relatively constant over the last 4 years, their market shares have been decreasing by 8% each year.

The Challenge

To develop an online grocery shopping platfom that will allow their customers to shop and buy products online, and as a result expanding the customer base and market
share of Instashop.

 

⏤ DISCOVER

 

Research

Research into the online grocery shopping market was performed to gain an understanding
of the current features available and competitors in the market. Then, with a better understanding of the current market trends, I developed surveys & interview questions to gain information from both online & in-store shopper. 

 
 
 

Research Findings
 

The data from the research was analyzed and common findings were grouped to determine our target users and the features required to meet their needs.

 

⏤ DEFINE ⏤

 

Developing Empathy

From the research phase, a user persona was created in order to better understand the key group we would be developing this platform for. An empathy map was then made to gain insight into the users needs, wants, etc.

 
 
EmpathyMap.png
 
 

Business & Customer Goals
 

With a deeper understanding of the target user, the goals of the business were then analyzed, compared, and contrasted with the goals of the users to pinpoint key focus areas.

 
 
 

Sitemap & User Flow
 

With a clear understanding of both the user and business needs, focus was placed on determining the features of the site, and developing user flows to show the process of how the users would navigate through them.

 
 
 

Card Sorting

With the development of the Sitemap and User Flow, a Card Sort was performed by participants to determine the arrangement and categorization of products & pages.

 
 
 

 ⏤ WIREFRAMING ⏤

 

Digital Wireframes - Mobile

Because the target users are busy, on-the-go individuals, I developed wireframes with a focus on the mobile Instashop website to cater to the users lifestyle.

MenuOut.png
MyCart.png
CheckoutDates.png
 

Responsive Wireframes

Responsive versions of the mobile wireframes were developed for the key screens to show the potential variations of layouts and elements for both desktop & tablet versions of the website.

 
 
 

⏤ TESTING & ITERATION ⏤

 

Low-Fidelity Prototype

With the wireframes for the mobile Instashop website created, a low fidelity prototype was created with Invision in order to execute the usability testing.

 
 
 

Usability Testing

Both in-person & online task performance testing was executed in order to expose any faults or issues that users were having with the Instashop mobile website.

 
 
 

Usability Testing Results
 

The feedback and results of the usability testing revealed some issues and provided me with feedback and observations that gave me further insight that allowed for iterations to be made so that the experience could be improved for all users.

 
 
 

 VISUAL DESIGN ⏤

 

Brand Moodboard & UI Kit

After iterating the low fidelity wireframes based on the usability testing results, I made a Brand Moodboard & UI Kit to prepare for the addition of UI elements to the key screens.

 
 
UIKit.png
 

Logo Redesign

To align the logo with the moodboard and Instashop brand, a variety of logos were explored before reaching the final version of the logo. A a fresh, vintage/modern look was the goal. 

 
LogoSketches.png
Logo.png
 
 

Key Screens with UI Elements

With the visual design elements determined, the UI features were added to the key wireframe screens for the mobile, tablet & desktop versions of the Instashop website.

 
 
 

⏤ CONCLUSIONS ⏤

 

Final Thoughts

The final product was reached after multiple iterations, ensuring that the mobile site allowed users to accomplish their task of online grocery shopping in a convenient manner. Providing the users with multiple outlets to find products proved important as different shopping styles required different search methods.

 

Next Steps

If given more time/resources, further research & development into the search results filters would have been performed to allow the user to find their specific products more efficiently.

 

See More of My Work

 
SMALL BUSINESS WEB REDESIGN

SMALL BUSINESS WEB REDESIGN

SOCIAL MUSIC SHARING

SOCIAL MUSIC SHARING

BUY & SELL FLIGHT PROGRAM

BUY & SELL FLIGHT PROGRAM