Designing a Mobile Grocery App
Project Synopsis
Identify user needs based on provided research; design and prototype a mobile-first grocery shopping app.
Timeline
6-weeks
(May—June 2019)
Roles
User Interface (UI), Information Architecture, Prototyping, Usability Testing, Copywriting
Tools
Sketch
Invision
Deliverables
User Persona, Competitive Analysis,
Mood Board & Style Tiles, Wireframes, Prototypes
Challenge
Background
Winkel is a fictional start-up that wants to improve the way people shop for groceries online. They want to create a mobile-first experience that allows for people to buy what they need on the go.
Tasked with determining users' needs and goals, I applied a user-centered design approach to make the best experience possible based on research and findings. This was the first project in my Designation UX/UI Coursework.
Research & Synthesis
Competitive Analysis
Knowing there were already several grocery apps in existence, I surveyed the landscape. I did marketplace research conducting a competitive analysis with in- and out-of category competitors:
In category - focused specifically on grocery apps
Out of category - focused on food delivery and food prep
User Stories
To help clarify what problems I was solving for, and get more clear on the key user’s desires, wants and needs. I created three User Stories. Each one took a different angle and had a clear user type and key goal.
As a busy young professional, I want to save time in my food shopping so that I can spend more time doing things that I love, like spending time with my friends and family.
As a socially conscious individual, I want to have all the information I need at a glance so I can make sure my priorities are represented in my food choices.
As an adventurous cook, I want meal and ingredient inspiration so that I can express my creativity in the kitchen and try new things.
User Persona
User Interview transcripts were provided in this project brief. After reading and synthesizing user data, I built a User Persona representing the key demographic user of Winkel, Danielle:
Image: User Persona deliverable
Ideation
Having a good idea of competition and knowing who I was solving for, next I needed to go through a process of rapid ideation to begin giving shape to the solution. After doing several rounds of 6-8-5 sketching, each time focusing on a flow, a more clear picture of what to incorporate began to emerge.
Images: Three different 6-8-5 sketches illustrating various concepts and flows.
Information Architecture
Before diving into specific design elements, I needed to first establish the Information Architecture as well as the overarching flow. I created an App Map along with a User Flow to help give shape to things.
Key Screens
With the overarching structure in place, I next needed to decide which key screens to focus on for moving forward with my prototype. I asked myself “what screens would be essential to include to give testers a sense of how they could interact with this app without going overboard?”
Off the bat I knew the process of adding items to the cart and the checkout process was an essential flow to be included. Additionally, I decided to focus on the onboarding process as it highlighted key ways of shopping within the app, as well as an overview of most bottom nav categories so testers could get a taste of each area.
User Flows:
To stay nimble I stayed on paper for my initial prototype. I sketched things out and used Invision to add interaction to these sketches. Using this paper prototype I was able to test flows as well as other key elements of the app.
Initial Testing
In my usability testing, I asked users to perform the following tasks:
Create a new account & go through the onboarding process.
Purchase produce items completing the checkout process.
Search for an item using search navigation
Purchase a produce item utilizing the farm feature
Purchase ingredients for a recipe
Clickable Wireframes
Interaction
With the Site Map and User Flows decided, next I created wireframes. I built out 16 key screens using Sketch, focusing on the processes of onboarding, shopping for and purchasing produce. Prototyping these key screens in invision (RIP) allowed for refinement on the most important elements of the app.
Note: Please refresh browser if prototype fails to initially load.
Usability Testing
I made sure to use both quantitative and qualitative methods of gathering data in my testing. In addition to recording how long it took a user to complete a task, after completing all tasks I asked them to rank ease of completion using a Likert Scale. Based on usability testing of the prototype, the following trends emerged with constructive feedback:
Certain screens and flows could be consolidated (i.e. specific item screen)
In general, streamline various UI patterns used
Utilize confirmations and alerts to signal and assure user
After synthesizing the testing feedback, I had a more clear idea of where to focus — expanding on the things that were working while improving the things that were clunky or confusing.
Before I moved forward with a full build out of these changes though, I set to work on building out visual directions for look and feel with defined UI elements in anticipation for graduating up to a high-fidelity prototype.
Visual Design
Moodboards
As the structure of the app was taking shape, I also gave attention to UI elements. I wanted to establish different moods and vibes to test. Using the research and data gathered, I designed two divergent moodboards based on qualities that would resonate with the demographic user.
Design A: Earthy, friendly, natural, grounded
Image: Design A, “Earthy” Moodboard
This moodboard conveys a natural and organic atmosphere. Deep earthy hues paired with subdued tones from wood and sky along with nature-based imagery serve to remind users where their food comes from. The idea of “digging in” to the soil and digging into your food, along with feeling connected to its source inspired much of the imagery for this board.
Design B: Fun, playful, vibrant, bright
Image: Design B, “Vibrant” Moodboard
Spinning off the idea of “playing with your food,” this board takes a fun, contemporary approach. Pops of bright colors paired with a playful spin on styled food-based imagery breathe life into the (at times) mundane task of grocery shopping. Saturated colors and geometric shapes paired with contour lines make grocery shopping a party you don’t want to miss.
Style Tiles
Accompanying the moodboards, I created Style Tiles to start giving things more shape. They served to provide more definition by presenting components, typography and convey what styling could generally start to look like.
Design A: Earthy Style Tile
Image: Design A, “Earthy” Style Tile
This style tile hones in on the color palette in the moodboard, incorporating deeper, earth and root vegetable-based colors accompanied by a neutral tone to keep things from veering too dark. Close-ups of swatches of different food categories welcome the user into categories, while a serifed and slightly rounded Header and Sub-header font are traditional and grounding, yet welcoming. Food-based imagery is filtered for a subdued and inviting look. A primarily plum-colored circular logo implies a piece of fruit. Color, tone and simple iconography help guide the user with the rounded bottom nav icons.
Design B: Playful Style Tile
Image: Design B, “Vibrant” Style Tile
Pulling from the bright moodboard color palette, this style tile incorporates bold, fully saturated colors and food imagery. Winkel’s logo is simple yet vibrant, referencing confetti and modernism it incorporates geometry via two overlapping triangles. Bottom nav icons are playful featuring contour-based iconography and a highlighted menu indicator. Typography relies on sans serifed fonts; the Header font incorporates sleek lines, exaggerated curves and invokes a contemporary feel with a nod towards 70’s modernism.
Definitive Direction
Based on looking back to the key goals and needs of Danielle as well as feedback from my Creative Director, I ultimately moved forward with the “Earthy” theme. Additional feedback received from fellow design colleagues also helped guide the visual design direction, providing ideas to run with moving forward. In honesty I was slightly disappointed as I was excited by the potential to further develop and play with the novelty of Design B. That said, I was reminded that drawing from certain elements of the Vibrant theme where appropriate could make for a strong visual product. This was a lesson in listening and a great example of letting go of personal preference (or ego) in the service of creating a strong user-centered product.
Prototype
High Fidelity
Next up it was time to take my decided visual direction, “skin” and build out the initial prototype. I incorporated improvements from testing findings while expanding upon certain flows and paths to create a more robust prototype. As before, I utilized Sketch to build out my designs and Invision to bring them to life. Based on feedback received during initial testing, I made some tweaks to the layout, flow and design in building out the hi-fi prototype.
Image: Three stills from clickable hi-fi prototype. From left to right – Product landing, Fruits product details, Basket page (showing delete interaction).
Improvements
The prototype included adjustments based off of data gathered from testing and instructor feedback:
Onboarding
Built out food allergies portion
Created consistency with selection indicators (i.e buttons vs. scroll)
Shopping
Changed layout of food items to be more intuitive & informative
Changed formatting of items in basket to make more user friendly
Added “Keep Shopping” button to basket
Overall
Added confirmation screens when adding items to cart
Built out all bottom nav categories, adding multiple ways to shop
Created longer screens with scroll
Upon presenting this prototype I received positive feedback and ideas to work into future iterations.
Future Recs
While this particular project culminated in a high-fidelity prototype, I compiled a list of future recommendations and notes for improvement if this project were to be picked up again:
Product Roadmap: Create a clear plan aiding in prioritization of build outs and features.
Value Proposition: Cement Winkel’s value proposition & differentiation the marketplace with more SME and User interviews and testing.
Robust Interactions: Prior to deployment, create more realistic user flows and moments of delight (microinteractions, hover states, etc.)
Search: Build out search field capabilities; create ability to shop via search and refine filters.
Needless to say, if this project were carried forward, these recommendations would vary and depend on stakeholders and constraints (e.g. scope, requirements, timeline, technical constraints, etc).
Reflections
Refocusing
With this being my first UX/UI project enrolled in Designation, I learned a lot through trail and error. One thing I caught myself doing was “going down the rabbit hole” of feeling like I needed to design for every possible path ever. Luckily I was able to catch myself and pull back, but it was a process of recalibrating and learning to always refer back to my findings, user persona and research to make sure I wasn’t getting off path.
K.I.S.S.
Related to the above, it was easy to get carried away with excitement and possibilities, specifically when designing the prototypes. In retrospect, I put too much information into my paper prototype which affected the outcome of my initial testing (tilting it towards usability testing as opposed to true concept testing). It was a great way to learn that sometimes less is more.