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.
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 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.
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 ⏤
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.
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.
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.
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 ⏤
With the wireframes for the mobile Instashop website created, a low fidelity prototype was created with Invision in order to execute the 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.
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.
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 ⏤
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.
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.