Daniela Rivas | GoodMarket: Mobile Grocery
Daniela Rivas: Portfolio
Daniela Rivas, portfolio, design, digital design, graphic designer, ux design, ux designer, ux/ui, seattle, seattle ux designer, washington, creative, artist, designer, seattle designer
751
portfolio_page-template-default,single,single-portfolio_page,postid-751,ajax_leftright,page_not_loaded,,qode-content-sidebar-responsive,transparent_content,qode-theme-ver-17.2,qode-theme-bridge,wpb-js-composer js-comp-ver-5.6,vc_responsive

GoodMarket: Mobile Grocery

Background

The Client

Good Market, a (fictitious) grocery franchise.

The Problem

An increase in online shopping in the grocery market was causing Good Market to lose 8% of its market share annually.

The Target Customer

Good Market's key customer base of busy, tech-savvy young professionals who would value the speed and convenience of online ordering.

My Goal

My job was to design GoodMarket: an intuitive, convenient grocery shopping product that fulfilled both customer and business goals.

Identifying Goals

 

I started by outlining Good Market’s business goals and the goals of their target users. Then, I identified possible pain points for each in the grocery shopping process.

Understanding the Competition

 

I then researched a variety of competitors in the online grocery market to understand their competitive advantages, what features they offered, and how they were meeting their customer’s needs.

View Competitive Analysis

Usability Analysis

I then conducted an in-depth study of the Thrive Market mobile app in terms of its usability: How easy is it to learn, understand, and use the product, and which features help/hinder the user experience?

Information Architecture

 

Next, I used card sorting research to examine the existing mental models of three potential users who met the description of our target group: young, tech-savvy, busy professionals.

 

The results of the three card sorts generally mirrored the typical organization of aisles in a grocery store. However, this activity revealed the possibility of other categorizations, such as ingredients for a specific dish or cuisine. I also noted that many items fit into multiple categories and that each category could contain narrowing levels of specificity.

 

Using this information, I structured the products and important views to create a sitemap for GoodMarket.

Building a User Flow

 

I envisioned the path a user would take to complete the key tasks in the app, from joining to browsing to purchasing and delivery.

Designing Wireframes

 

Before designing the wireframes, I listed Product Requirements for each view in the app.

I aggregated all of the information I had gathered thus far to sketch wireframes for the app, and then built the wireframes in Sketch using atomic design methodology.

Interact with the prototype here!

UI Design

 

I designed a bright, image-focused UI to highlight the fresh food provided by GoodMarket. Item photos were chosen and edited to be consistent and free of any backgrounds.

 

Because Good Market didn’t have any existing branding that I should work with, I had some liberty in the visual design choices for the GoodMarket app. The primary color used in the design is a dark but vibrant green, meant to represent and emphasize the high-quality fresh food products offered. A lemon yellow-green is used as an accent, and is primarily reserved to highlight any sales or special deals. The font used throughout is Sofia Pro, with variations in size, weight, color, and capitalization used to create hierarchy between different pieces of text.