How might we create a better food discovery experience?
A conceptual, end-to-end, mobile design challenge.
Crisp is designed to cut through the noise and marketing with a singular focus on finding fresh locally sourced food. No checking in with your friends, competing with space for a tire shop, or worrying that the reviews are fake and purchased.
Just good, fresh, local food.
What's the issue?
Discovering and exploring locally sourced food is difficult for the average urban eater.
A better way...
A platform that helps consumers find, review, and enjoy fresh new dining and shopping options.
.png)
U.S. diners spent $651 Billion dollars eating out in 2020
The Problem
Food trucks, farmer markets, and seasonal vendors constantly on the move, consumers need an approachable, readable, and regularly updated local food discovery platform to keep them in the know. America's appetite for food is changing, and a new way of eating fresh, healthy, and local is needed - a mobile solution for this mobile world.
My Role
I led and oversaw design and research; including the creation of all visual design, stretching solutions, building wireframes, creating high fidelity mockups, and running user testing sessions with my newly created high fidelity prototype. I was able to create the logo, style guide, and moldboard for Crisp allowing me to explore branding and create a company image. From analyzing product research and testing designs to presenting findings and updates I ran and orchestrated all major creative and productive aspects of this project.
Secondary Research
Compiling research on food and local resource access, how people conducted culinary explorations, and what options were available to the average consumer such as search engines, reviews, recommendations, information, formats / style ect. I took an in-depth look at B2C food apps that were top ranked in the industry, the evolution of the food app industry, current market leaders, their direction, and what the industry was.
Screener Survey
A screener survey was created and distributed to identify appropriate users within my target market. I was seeking individuals who generally dine out 2-3 times a week, live in metropolitan areas, and utilize digital recommendations and outside resources to try new places. The survey was distributed via LinkedIn and Facebook to appropriately assess and screen out candidates who fit the target market with hopes of bringing them in for an interview.
Survey outline.
User Interviews
Testing Preformed = User Interviews
Participants = 5 total ( 3 male, 2 female )
Interview Duration = 20-30 minutes
Task = Answering scripted questions
Location = Zoom ( communications platform )
Goal = Gain insight into target markets meal time routine, dining habits, food discovery process, how they connect with their favorite food brands.
Affinity Mapping
Brainstorming and affinity mapped helped to identify recurring themes, quotes, and categories that surfaced during user interviews. Themes I began seeing include user motivations, conducting personal research, as well as user frustrations and concerns.
Who Needs This?
Target Market
Health nuts, foodies, locavores, healthy organic eaters, those looking to support local agriculture. The average user persona would be a technology savvy professional, socially conscious and plugged in, who eats out 3-5 times a week.
Empathy Mapping
Empathy maps were created to examine how the ideal user thinks, feels, and behaves - providing a window into their mind to help guide design.
Persona
Once I created empathy maps, I explored deep to get a feel for the user - their pain points, frustrations, needs and wants. With the user in mind (as always) I laid out a number of different personas to help get a clear understanding of the Crisp user.
User Story
While identifying user stories it was determined that users had three primary motivations, a need for information, satisfying a craving or desire, and convenience - finding something location specific (either in the moment or planning ahead.
Brand Platform
Name Rationale
The term Crisp is synonymous with fresh when thinking of produce and fresh vegetables. Crisp is intended to resonate with consumers as a go-to search guide for delicious local food, eateries, and distributors.
Mission
Connect consumers with locally cultivated and distributed agricultural resources such as farmers markets, seasonal produce stands, and food trucks by providing relevant and timely information.
Personality and Attributes
Lively, Energetic, Causal, Caring, and Efficient
Aesthetics
Style Guide / Design System
Created to set standards in design and maintain consistency throughout the project. The style guide consists of specs for logo padding, UI elements, gutter and grid recommendations, icons, imagery, typography, color palette, and the product mission.
Mood-board
Crafted to provide inspiration and direction, here I explored the Crisp brand personality and attributes that spoke to the lively, energetic, casual, and efficient nature.
Planning
User Flows
After a heuristic analysis was conducted with an emphasis on use and users need and efficiency I began to structure information architectures and user flows. Constructed to provide a blueprint of red-routes user flows gave a visual of the journey and steps to goal acquisition.
Site Map
A sitemap was constructed to demonstrate the information architecture within the design. The site map not only provides a blueprint of core categories such as profile, favorites, reviews and search.
Early Ideation
Once all necessary screens in the identified red-routes were completely sketched up I then up-loaded them to Prototype On Paper (By Marvel) app that converted them into a clickable prototype. With my new prototype in hand I set off to recruit participants as I conducted guerrilla usability testing on five willing locals.
Home / Main
Search Results
Vendor Profile
Sketches
Guerilla Usability Testing
Guerilla testing began using the previously sketched screens which I uploaded into an app known as POP (Prototype on Paper) where it was transformed into an interactive digital low fidelity prototype. This provided me the necessary feedback I needed in terms of visual hierarchy within the design for example toning down the intrusive write a review button on the vendor page and providing a vendor discovery option on the Landing/Search page.
Design Evolution
Usability testing demonstrated that the foundations of the design and application was understood on a basic level, and a number of improvements were initiated, planned, and incorporated into the wireframes as they were created.
After the completion of my wireframe red-routes I examined edge cases, to account for outlier behavior and help create a seamless user experience.
Wireframes and Wire Flows
Accessibility Audit
An accessibility audit was conducted to assess the compatibility of color palettes, typography, and elements of the newly crafted high fidelity screens. The audit allowed me to identify text colors, fonts, sizes, and various backgrounds that would be easily readable and identifiable to users on a variety of OS and devices.
High Fidelity
After the creation and validation of wireframes through user testing it was now time to take feed back, implement changes into a final draft and begin adding color, detail, and the brands personality.
Prototyping & Animation
With hifis in hand I began prototyping to create a high functioning high fidelity digital prototype. User interactions were carefully thought through, and I collated pre-design information architecture using sitemaps, user flow, and connecting elements then assigned them to the coinciding pages.
Moderated Usability Testing
Next a usability test plan was drafted outlining goals and objectives such as identifying user patterns pertaining to the chosen UI organization and patterns, specifically the buttons on the category buttons on the search page (seasonal vendor, food truck, organic markets, and local dining). The test plan details test methodologies, participants, recruiting strategy, and a schedule.
Iteration on High Fidelity Screens
An iterative session was underway after the usability test results allowed for informed decision making and the implementation numerous updates. Changes included integrating user feedback alerts that popped up after multi step processes, screen simplification, a more direct review process, and visually highlighting critical elements.
Retesting - Moderated Usability Testing
After implementing changes and updates originating from user feedback and observation I was ready to retest my prototype on a new batch of participants. Five participants were recruited from online social media groups as I did in the first round of testing. Throughout the sessions participants engaged and worked through the designated tasks on the new iteration of the Crisp prototype.
Moderated Usability Test Findings
Usability testing revealed critical, major, minor, and general issues throughout the Crisp design/prototype. Findings where categorized by priority of urgency and addressed accordingly. Moderated Usability Test Report (Round One)
Reflection and Future Direction
A potential solution to local food and resource discovery has been successfully researched and prototyped. Necessity for the product was revealed through user research and effectiveness and it’s potential and efficiency was tested through means of a physical prototype.
Ultimately the design needs to be improved and iterated on focus with A/B testing on primary functionality and further usability research refining the design to an even more approachable point. Further pursuit of the project would involve additional creative refinement, creating a rough business plan, and hiring a programmer to build an iOS MVP.
