UX/UI Designer | Research to hi-fi responsive screen designs
Project spanned over three weeks, part-time, as an independent case study
E-commerce product design across web, tablet and mobile for purchase of artisanal groceries.
Online grocery shopping is predicted to increase over the next decade, thus creating a large market potential. More customers are becoming comfortable with buying online, and digital tools are impacting the food shopping experience.
How to create a product that improves online grocery shopping for users and solves a new industry problem.
I designed a conceptual Instashop from the initial research to the final hi-def clickable prototype. This included initial research, wireframing, user testing, branding, and responsive designs.
Improved checkout flow, filtering, and menu designs from the initial prototype per user interviews. Refined branding to meet niche market for artisanal items.
My goal was to discover what drives buyers to grocery shop online and how to better meet a user’s needs in an online space.
Where are current online grocery stores lacking and how can that problem be solved?
Something that was missing across all companies was a one-stop shop for artisanal grocery brands. The largest and closet competitors that touted organic offerings were Whole Foods and Good Eggs. However, Whole Foods included commercial items in their inventory, lacked an extensive online selection for artisanal foods and offered no home delivery (at the time). Good Eggs only served the Bay Area. Other websites specifically offered local products (for example: NYC area) or specialty items from abroad.
Inclusion of commercial items
Lacking an extensive online selection for artisanal foods
No home delivery offering
Only specialty items from abroad
Only local products (such as exclusively NYC area)
I ultimately decided to move the product design in this direction to fill the market gap for artisanal and organic offerings while optimizing the online user experience.
MVP and Task Flow
Designs were based on pre-existing best practices for online grocery shopping as well as incorporating elements from initial user interviews on what they look for in an online shopping experience.
The initial low-fi prototype was tested across three user interviews (two in-person and one digitally) with additional tests for navigation and task flow for selecting/purchasing items on Verify and UsabilityHub.
Success was measured across three task criteria:
Low error rate when clicking to navigate app
High speed of navigation and task completion
High user satisfaction
Overall, users had a moderate usability satisfaction. This appeared to be due to confusion when locating items and navigating app. All users agreed that a filtering option would be helpful, however did not utilize the icon without prompting. All three did not like the idea of on-boarding and stated that they typically ignore it. 2/3 had difficulty finding initial task item. Users felt that more indication for clickable headers or larger/prominent icons might help. All users felt that an easier way to navigate categories would be helpful.
80% task completion rate
53% error-free rate
5/10 satisfaction rating
Redesign + Brand Identity
The following modifications were made following user testing:
Filtering and menu re-designs
Differentiate clickable/non-clickable headers (categories, numbers during checkout)
Make important features more prominent (such as search)
Click logo feature to navigate back to homepage (such as during check out)
Option to edit items right before checkout confirmation
Fresh, young, farm, rustic, organic, clean, minimal, personable, happy, simple, produce, light, wellness, reliable, trustworthy, delicious, healthy