Feast Local
Role
Product Designer
Project Type
Concept and Design
Tools
Google Docs, Miro, Adobe XD
Introduction
Overview
Over the course of the COVID-19 Pandemic we have seen it impact across all walks of life, ranging from global nations down to our local neighborhoods. One of the primary cases has been its economic impact on the small businesses located within our communities as they face these circumstances without the surplus that larger corporations may have.
Objective
The objective was to bring awareness and support to small local businesses that have been economically and socially impacted by the effects of the COVID-19 Pandemic. The major design challenge was to create an app that would balance the focus on the smaller businesses while also creating a unique experience that caters to the user.
Responsibilities
As the product designer, I worked on the following aspects through all phases of the app development:
User Research
Design ideation
Wireframes
Prototypes
Gathering Information
Surveys and Interviews
The initial phase of the product development began with conducting participant surveys and interviews. I comprised a series of questions and reached out to user groups that would best fit the criteria for the participant testing.
Personas
Personas would begin the early ideation to visualize whom the product would serve. Based on the personas, the general target audience would be individuals who used apps fairly often and were open to exploring businesses of various sizes.
Early Ideation
Affinity Diagram
After the user screening was completed, the next step was to create a series of affinity maps and diagrams that grouped the comments taken from the interviews. These groups would provide several focal points to consider leading into the product development. This process was fast-paced and translated into the development of the user stories.
User Journey
After the user screening was completed, the next step was to create a series of affinity maps and diagrams that grouped the comments taken from the interviews. These groups would provide several focal points to consider leading into the product development. This process was fast-paced and translated into the development of the user stories.
Site Map
Site maps were created to develop a general template of how the application would navigate as the user interacts with it. These maps included various levels to indicate the hierarchy of the screen progression, ranging from primary to tertiary. By creating an overall layout, it helped influence the way that the user flow would behave.
User Flow
It was essential to explore the possible ways that an app would progress. The primary method was to identify the red routes. These corresponded with the MVPs that were identified through the user stories. The main red routes for this product were:
Ordering for Delivery or Take-Out
Finding Directions
Submitting a Review
Testing + Refining
Guerrilla User Testing
Once the user flows were defined and laid out. Sketched mock-ups were made to be set up for guerrilla testing. These sketches were placed into the Invision prototype app and shown to participants to identify key issues that users would face as they navigate through the sketches. Due to the preliminary nature of the screens, the main goal was to explore any navigation issues a user would have. Findings included the following:
Simply layout structure
Clean design and straightforward navigation
Were unsure after the final confirmation button
Guerrilla Testing Paper Wireframes
Guerrilla User Testing
Once the user flows were defined and laid out. Sketched mock-ups were made to be set up for guerrilla testing. These sketches were placed into the Invision prototype app and shown to participants to identify key issues that users would face as they navigate through the sketches. Due to the preliminary nature of the screens, the main goal was to explore any navigation issues a user would have. Findings included the following:
Simply layout structure
Clean design and straightforward navigation
Were unsure after the final confirmation button
Low Fidelity Wireframe User Flow
Bringing to Reality
Logo Creation and Style Guide
After the overall template of the screens were outlined, a logo and style guide was made to give the app its own character. Within the style guide was the creation of a brand platform which established the app's mission and personality.
High Fidelity Mock-Ups
The elements of the style guide and design brand were then used to refine the low fidelity mock-ups into high-fidelity screens. These would then be placed within the InVision platform to create working prototypes for multiple rounds of usability testing. The testing involved asking participants to navigate through the app to accomplish various tasks. Findings included the following:
Remove the background color for visual clarity
Include a way to cancel mid- transaction
High Fidelity Wireframe User Flow
Revision + Reflection
Final Screens
After gathering the results of the usability tests, I implemented the insights into the initial high-fidelity prototype screens. The following screens were designed to address the notable pain points and aim to represent a more minimalist aesthetic.
High-Fidelity Final Screens
Lessons Learned
Delving into the research of this particular subject was an engaging foray into the current social and economic landscape. I was able to gain insight into the mindset of users and experience various methods of translating data into a visual representation. The concept of this project was also enriched by my passion for merging the worlds of social impact and design. Ultimately, the opportunity to engage in this project was rewarding and I hope to reflect the design principles I gleamed into my current design philosophy.