loader-logo
  • Client

    YourLocal
  • Client URL

    www.yourlocal.org
  • Role

    research, information architecture, interaction design, UI design, testing, and analysis
  • Product

    Native mobile app
  • Deliverables

    Domain Research, Visual Competitive Analysis, Design Principles, Style Explorations, High Fidelity, Mobile Design Mockups, UI Kit, Style Guide
  • Duration

    October – November 2019
  • Tools

    Sketch, InDesign, InVision, Principle, Map Box Studio, Google Drive, Usability Hub, Maze (User Testing)

Growing a Design System​

and a streamlined home to purchase flow for YourLocal native mobile app

Overview

  • Project Kickoff (Nov. 11)
  • Sprint 1 Research & Design Directions + Preference Testing(Nov. 18)
  • Sprint 2 Hi-Fi Design V1 + Usability Testing R1 (Nov. 26)
  • Sprint 3 Hi-Fi iterations + Usability Testing R2 (Dec. 3)
  • Final Handoff (Dec. 6)

a little history

Food waste is a problem in the United States.

 

 

In Europe, technology has been working towards the concept of a zero-waste lifestyle through innovative food recovery solutions that connects consumers to restaurants/retailers such that unsold surplus perishable food can be purchased at a discounted cost.

 

 

YourLocal (YoLo) promotes sustainable living in order to reduce food waste in retail stores.

 

Originally founded in Copenhagen in 2015, the YoLo app went live in 2016. By November of 2018, they shifted their sights to New York City. The following year, they were associated with over 70 retail partners in Manhattan and Brooklyn.

A persona, in user-centered design and marketing is a fictional character created to represent a user type that might use a site, brand, or product in a similar way.

Who is the User?

Meet Rebecca

persona

Demographics

31-year-old Communications manager in Brooklyn, NY.

Habits

Career-focused, but aspires to be a more active, green, difference maker.

Concerns

Sees climate change as a big issue and worries how a change in habits would appear to her peers.

Challenge

overcoming problems

After reviewing the app’s current flow from the home screen throughout the purchase process, YoLo needed new brand design guidelines in order to create a more consistent, intuitive, and delightful platform.

 

Three screens (Offer, Store, and Map) competed for landing the user’s attention in the preliminary step in order to lead to the decision of choosing an offer. Furthermore, inconsistent labeling between The shops’ screen (header) and store (bottom tab navigation label) presented potential confusion due to the two competing descriptions.

 

Previous research done by the UX team validated the usability issues observed above and recommended the merging of the key screens. Further UX testing with users also revealed that distance is the main factor considered when choosing an offer because food is often arranged for pick-up around the time of a known commute. Thus, the map screen appeared to dominate as the preferred method of finding an offer, yet it was not the landing screen.

A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface design. 

Competing screens and inconsistent labeling
YoLo Current State Map Screen
Proposed Wireframe
Map Screen with new design system

Approach

  • Project Kickoff (Nov. 11)
  • Sprint 1 Research & Design Directions + Preference Testing(Nov. 18)
  • Sprint 2 Hi-Fi Design V1 + Usability Testing R1 (Nov. 26)
  • Sprint 3 Hi-Fi iterations + Usability Testing R2 (Dec. 3)
  • Final Handoff (Dec. 6)

what we did

01

Visual Competitive Analysis

We gathered visual inspirations, industry best practices, and competitors’ UI patterns from both direct and indirect markets ranging from food sustainability to discounts and deals. This design research method allowed us to consider other patterns as solutions to YoLo’s problems. 

 

 

Likewise, this type of style exploration sprung from the idea of using familiar patterns (i.e. not reinventing the wheel) and then expanding into a more customized look and feel through the successful combination of these different elements.

 

 

Our findings indicated that many competitors had a primarily green palette with red being one of the most used accent colors. Many were also using high-quality macro photography. Micro-interactions were often used to alleviate commonplaces of tedium and/or frustration, such as onboarding as well as in rewards systems in order to further encourage purchasing behavior.

 

 

A notable observation was that in similar mobile products where distance was the main concern to users, strong map filtering and sorting functionalities were a prevalent design direction that deserved deeper consideration in regards to the relationship with the overall design system.

Visual Competitive Analysis inspirations
client-image
client-image
client-image
client-image
client-image
client-image
client-image
client-image
client-image
client-image
client-image
client-image

DESIGN PRINCIPlES

As a team, we created a set of four separate design principles that related to the brand and could work as a reference guide throughout our design process:

02

Brand Adjectives

Empowering

(inspiring, motivational)

Grassroots

(Community-driven, Local, Social, Connective, Inclusive)

Responsible

(Reducing Waste Of Resources, Doing Good, Saving Food, Socially Conscious, Caring, Creating Accessibility To Food, Helping The Environment, Loyal, Helping People And Businesses)

Design Principles

 

Motion Sparks Emotion

(Motion design should spark emotion for the user in a meaningful and appropriate way. It should never take away from the experience but add to it. Users should feel joy.)

Enduring Quality

(Focus on how users live and work to create deeply human, enduring sustainable design encompassing integrity, creativity, and quality. )

Miscellaneous 83 expandlines

Effortless

(The design needs to be consistent to ease the cognitive load, predictable to help the user navigate quickly, and smart to direct the user to success)

Personal

(Celebrate a personal impact on the environment. The design should feel uniquely Yours.)

03

Concepting

The moodboards and style tiles created for preference testing initially focused on illustration style that would be more relevant for later testing, Diverging themes ranged from a whimsical watercolor boho-chic to a more upscale elegant that alluded to a more “boutique” or “Artisanal” feel. Somewhere in the middle, was the more “Casually Hip” inspired by a combination of Starbucks and Urban Outfitters brands. It retained a hand-drawn aesthetic, but maintained a more smooth and defined elegance.

 

 

During the concept design phase, the client changed direction. While we had initially been focusing on the onboarding flow, the aforementioned research indicated that it may be of more importance to focus on the home-to-purchase flow in order to locate the bottlenecks leading to customer drop-off rates. Thus, instead of focusing on more illustrative graphic user interface, I turned my immediate attention towards icon/interaction design and filtering features.

04

Atomic Design

Working from the smallest atomic element and building structures outward, I created the basic foundation by loosely defining typography, color, iconography and defining some standard components.

 

 

With information gleaned from the UX research, patterns provided by the Visual Competitive Analysis, design principles in place, and a modular system of components, I was able to rebuild the landing screen with a concerted effort towards problem-solving.

While most of my design efforts in the time allotted for that sprint focused on the map landing page and its related filters, I used the Starbucks model for the layout for the following screens in the flow for several reasons. 

 

 

One: The Starbucks app and particularly its reward system have been noted for its success in customer usage and loyalty based on its ability to focus the flow and create value. 

 

 

Two: Starbucks is a large, world-renowned company that has devoted a lot of time and effort to user research, and I figured we could learn much from their existing model and then try to build upon it. 

 

 

Three: I had discovered that Starbucks, Like YoLo, used React to build their framework, so there was already a reference to a working library of components from which to build upon. 

 

 

Finally, we planned on user testing a complete flow so we needed the additional screens to complete the home-to-purchase flow.

TYPOGRAPHY​

Montserrat

Aa

PALATTE

#f1604b​

#d2a049​

#0f6c40​

#f4f4f4​

0

Days

0

Users

0

Minutes

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users.

  • Project Kickoff (Nov. 11)
  • Sprint 1 Research & Design Directions + Preference Testing(Nov. 18)​
  • Sprint 2 Hi-Fi Design V1 + Usability Testing R1 (Nov. 26)
  • Sprint 3 Hi-Fi iterations + Usability Testing R2 (Dec. 3)
  • Final Handoff (Dec. 6)

user testing methodology

Our next step was to test that these interface changes would be understood by users before having the clients adopt the new system. Our goals were to find out:

 

  • Do users understand how the interface functions? 
  • Can users complete the home-to-purchase task?
  • How easy is it for users to complete the task?
  • How does the look make the users feel?

To test the intuitiveness of the interface, we performed a moderated first-click test of the new screen designs, using the current design as our benchmark, and a click-through prototype that showed each screen in the new flow for comparison. 

 

It became apparent as soon as we tried to test navigability, that navigation flow was not linear, and the majority of users, especially when presented with a new interface, wanted to explore the personalization features such as filters, maps, and reviews prior to finding an offer. However, once they found the offer as instructed in the given task, placing the order was intuitive.

 

A navigation test depends on users completing the desired action, which is initially clicking on a target, called a hit-zone, in order to proceed to the next screen, but our participants wanted to first personalize the experience. This didn’t indicate drop-off so much as it showed a propensity towards personalizations towards parts of the prototype that had yet to be designed. Instead, we tested ease-of-use by following up on the click-tests by asking the participants to score how easy it was to complete the task. 50% of participants thought the current state was “fairly easy” to navigate compared to 60% who found the new design “extremely easy.”

 

In order to test the participants’ reactions, we also conducted a controlled vocabulary test, whereby users chose from a list of 24 words that best described how they felt about the design. Words initially associated with the current brand such as “easy”, “modern”, and “clean” also translated to the new design.

05

“It’s personalizable because you can do the search and have your favorites pop up and be filtered. It’s a more intimate experience.” User Testing Participant, YoLo User Interviews

Results

  • Project Kickoff (Nov. 11)
  • Sprint 1 Research & Design Directions + Preference Testing(Nov. 18)​
  • Sprint 2 Hi-Fi Design V1 + Usability Testing R1 (Nov. 26)
  • Sprint 3 Hi-Fi iterations + Usability Testing R2 (Dec. 3)
  • Final Handoff (Dec. 6)

solution

Because proximity and personalization were the two main user concerns revealed through testing, I based the landing page design on a toggle function that could alternate between a list and map view. Doing so allowed me to combine the 3 former screens/tabs (store, offers, and map) that competed for attention in one search option. An addition switch could show all offers or filter only those currently available. Not only could the map iconography show availability, but they could also indicate noted favorites and proximity to users’ current locations at a glance. Additional sorting and filtering could be then adjusted through the filter chips and search bar, inspired by popular sites such as Google Maps and Facebook Events/Local.

 

Finally, some animation was added to show the way all elements interact with each other in a prototype. It was a good example of the usage of the design principle, Motion Sparks Emotion. The map filter, parallax bottom imagery and top sheet all create a sense of spatial awareness in the interface design.

load microinteractioN

filter microinteractioN

like microinteractioN

While the library was growing, I started organizing individual components into art boards containing similar items. These art boards were then organized by the interface’s general category such as iconography, typography, imagery, and components. In this way, any screen can be created by using a cohesive system and can be utilized by devs and designers to reduce friction in their workflow.

 

Within a month I had aggregated the most common styles into a small style guide. defining a set of primary colors and accent colors that designers could use in order to further develop the system.

 

UI kits typically include the user interface components that convey meaning and provide functionality to users – think buttons, widgets, checkboxes, progress bars, and navigation buttons.

  • Project Kickoff (Nov. 11)
  • Sprint 1 Research & Design Directions + Preference Testing(Nov. 18)​
  • Sprint 2 Hi-Fi Design V1 + Usability Testing R1 (Nov. 26)
  • Sprint 3 Hi-Fi iterations + Usability Testing R2 (Dec. 3)
  • Final Handoff (Dec. 6)
UI Kit created in Sketch

Conclusion

what I learned

While working on this design system, I learned to start small and build out. By focusing on a primary screen and its related functions first, bottlenecks and other confusions that may result in user drop-offs can be easily identified through testing. Such issues can then be addressed through further iterations.

View the style guide:​

Work With Me.

Have a project in mind? 


Previous

Share On