bananas shopping.jpg

Project: Grocery App UX Design

Location: Select U.S. Metropolitan Markets
 

My Role: Interaction Designer as part of Designlab Course 

Duration: 4 weeks 

Scope: ​

  • User/Company Goals

  • Competitive Assessment

  • Product Requirements

  • Card Sorting Exercise

  • Sitemap/Information Architecture

  • Wireframes

  • User flow


 

The Challenge

  • An urban grocer, faced with decreasing sales and a shrinking market share sought a web- and mobile-based application to meet the evolving shopping needs of their target users.

The Research

.

  • I reviewed existing user personas and company challenge areas to chart goals—separate and shared.

Good Market Goals.png
  • I performed a competitor assessment, thoroughly exploring 3 competing mobile apps in the grocery delivery space, noting onboarding requirements, user flow, overall aesthetics, key features and the experience challenges I faced as a user.

Screen Shot 2020-08-09 at 6.43.17 PM.png
  • Before creating a sitemap, I performed a card sorting exercise with 3 people in the target user base based on demographics [urban dwellers, under 40], and psychographics [frequent restaurant diners, time-pressed, less value-conscious and more convenience-driven, seeking to multi-task and order groceries for delivery while on the go]. This exercise showed me how consumers categorized/grouped site inventory items.

Screen Shot 2020-08-09 at 10.21.05 PM.pn

The Design

  • Pairing insights from the card sorting exercise and competitor analysis, I created a sitemap to articulate the relationship of all content.

Screen Shot 2020-08-09 at 10.21.18 PM.pn
  • With our user persona in mind, I answered detailed questions around the context of use to clarify how, when, where and why the app may be used so that our design could reflect all associated needs. I then drafted a user flow outlining the paths associated with task completion. 

Screen Shot 2020-08-09 at 10.39.31 PM.pn
Screen Shot 2020-08-09 at 10.31.40 PM.pn
  • Based on the user flow, I first created sketches, followed by wire frames for required pages. I then integrated the wireframes into a user flow based on the simple task of selecting, purchasing and paying for grocery items.

Flow Overview.png
  • Last, I highlighted design patterns relating to navigation and form usage to further explain interaction and UI approaches in the Good Market app.

good market design patterns.png

The Outcomes

 

  • As a design exercise, this allowed me to apply my strategy and research background to product development. It also inspired me to take a User Interface design class so that I can create higher-fidelity prototypes and articulate design vision with ease.