END-TO-END MOBILE APP
A platform fostering connection with local food growers and farmers and making these shopping trips more seamless and efficient
Project Overview
The intent of this project was to design an end-to-end mobile application. I chose my focus to be on lifestyle and helping to resolve an issue in that space. After some initial research I decided to focus on helping users connect with local food growers in their community and shop more sustainably.
My Role
Solo UX/UI Designer
My Responsibilities
User Research & Competitive Analysis
Design Strategy
User Flows & Task Flows
Visual Design
Wireframing
Prototyping & Usability Testing
Tools
My Process
Define
Design
Discover
Ideate
Test
Deliver
The Problem
This project’s initial assumption is that consumers who are wanting to support local and sustainable food sources have difficulty discovering and navigating all the options available to them.
Through research I discovered this was true, it’s overwhelming for users to learn of local food sources, markets, restaurants, etc. as well as educate themselves on the ins and outs of the food industry. There’s a gap in the market for a centralized solution to discovered local food sources combined with an educational resource so consumers feel more confident in the choices they make around the food products they consume.
The Goal
Understand why users decide to shop local & sustainable food products, what their desires are and what their pain points are.
Define the problem and user story through synthesis of user research findings and hone in on a proposed mobile app solution.
Build and test an app design to improve the experience of users trying to shop local and support their community.
Discover
Competitive Analysis
Click to enlarge
User Interviews
Interviews were conducted with 4 individuals who shop local, i.e. go to farmer’s markets. Going into these interviews I wanted to learn how these individuals shopped for their food, what their search process is, and what they like and dislike about the process.
Some questions included:
How do you shop local?
Why do you shop local sources?
Can you walk me through a typical week of grocery shopping for you?
What sort of products do you typically buy when shopping for local food sources?
What is your process for finding local or sustainable food sources currently?
How effective do you find this process of discovery?
What are your drivers or goals when shopping local or sustainably?
How do feel about doing most or all of your food shopping from local sources?
Do you think you have the resources/information to do that?
What are your pain points in shopping from local or sustainable sources? What do you enjoy?
What do you think would make the process easier?
Key Takeaways
Click to enlarge
Full research synthesis can be viewed in FigJam: Affinity Map
Define
POVs & HMWs
Click to enlarge
I consistently heard from my interviewees that they stumbled upon their local food sources/vendors or they discovered through word of mouth. They also had some difficulty staying updated with their local farmers markets, for example, what vendors would be in attendance this week, etc. They wanted to be able to better plan and have more control over their shopping process while supporting their local food.
I landed on the following POV & HMW statements:
POV: I’d like to explore ways to help users who shop local have access to information and updates about sources in their area because they feel it is difficult to plan their shopping due to lack of information.
HMW: How might we give users access to information on their local food sources so that they can have control over the process of discovery and more easily stay updated with local food sources?
Ideate
Based on the research findings and steps taken to define the problem, I determined that users who want to support their local food economy would benefit from a platform specifically focused on connecting users with local farmers and events. In parallel, this platform will allow users to plan and organize their shopping in-app.
The goal being that users can use this app through their whole shopping process making the scattered and overwhelming process of shopping local much easier.
Feature Diagram
Click to enlarge
User Flows & Task Flows
After doing the MoSCoW matrix I wanted to get some ideas down for how this would be laid out with some sketching. View ideation sketches here: Sketches
In tandem I also worked on User Flows & Task Flows and let the two exercises inform each other.
View User Flows & Task Flows here: User/Task Flows
Design
Logo
I began thinking of the name for this app, focusing on bringing together communities, food, and sustenance. Ideating with word maps and quick sketches I landed on the name Gather. I feel this perfectly emulates all the above motifs.
In designing the Gather logo, I felt a word-mark logo was best after trying sketches of some more visual symbols.
In choosing the font for the word-mark, I wanted a blocky, serif font that gives a sense of approachability and reliability but also feels fun and modern. The font, Fraunces, fit this. And I wanted to focus on designing around the letter “g” and chose to design a tomato on the circular portion of the letter. Ultimately landing on two versions of the logo.
Branding
I wanted to keep the branding relatively simple and kept the coloring mostly in the green color family. Green representing a natural, organic feel to the design aligning with the sole purpose of this application.
The type for the body of the app will use Fraunces for page headers and the rest of the body will utilize Poppins, which gives a clean, legible, and bubbly look.
The UI elements such as buttons, icons, images will have rounded appearance to coincide with the natural appearance mentioned above.
Wireframing
From my initial sketches and user/task flows I had a pretty good sense of what I would design, so moved into a digitizing Mid-Fi frames to get a sense of layout.
The specific aspects of Gather that I wanted to focus on in the design were the Home Feed, Discover, and Planner (Calendar & Shopping Lists), as seen below or in Figma
HiFi
In bringing this app to life I focused on making the Discover map and the Planner features as built out as possible for an MVP because these aspects of shopping local were most troublesome for interviewees in my research.
For the Discover tab, I wanted to ensure I was allowing the user to have many options to filter down on the map and list results. In my research, a major pain point was not having enough information ahead of time on farmers markets, local stores, etc. and what would be sold, so the interviewees feel they can’t plan their meals or shopping for the week as easily. I hope with specific filters on food types, vendor types, and even the user’s specific shopping list, that users can discover who has what they need and approach shopping local with more organization and efficiency.
In the design of the Discover tab, I kept things pretty simple so as not to overwhelm the user since there are a lot of actionable elements on this screen with the many options for filters, map view, list view, and the information presented in the actual results.
Additionally, at this point most users are familiar with search features that utilize a map/list functionality across various other apps. I’m not trying to reinvent the wheel, so I kept the layout of the Discover tab aligned with what they are used to seeing. I instead put my focus on making the content and information presented in this feature as useful as possible, which is to help users discover local food sources based on their needs.
For the Planner tab, I sought to create a hub where users can keep track of their vendor events and what they are shopping for. I wanted to evoke a feeling of an actual planner so when users click into a list it looks like classic lined paper.
To make the Planner useful to the users, I focused on integrating the planning features throughout the app. All vendor cards and pages have an easy add to calendar button and users can search for vendors using the shopping list of their choice. This helps push users to utilize the full power of the Gather app before, during, and after their shopping trips.
I moved into developing the above and the rest of the Hi-Fi screens for Gather along with a design system to ultimately bring this idea to life. I then built an actionable prototype for testing. Below are some of the screens, all of which can be viewed in the prototype below:
Deliver
Usability Testing
Test Parameters
I built an interactive prototype in Figma and performed a mix of moderated/unmoderated tests with 6 participants. I asked participants to freely use the app as they desired and then had them complete 2 tasks: Create a Shopping List and Search for a Farmers Market using the Discover filters.
Feedback
Overall people really liked the design and felt the app functioned as they would have expected. There were 2 critical comments one of which was around the lists section being hard to find and the other around the size of the food icons.
Priority Revisions
Based on the feedback received in the usability tests, I tried making the food icons on the vendor cards a bit larger and agreed it was easier on the eyes than the smaller original size.
I brainstormed how to address the lists comment that came from 1 individual, I didn’t want to change the Planner tab to Lists because this section also includes saved events. In the end, referring back to my POV/HMW statements the app is more focused on the discovery and connection to local food sources and the lists/events features in the Planner tab are more secondary features. Given this comment only came from 1 individual, I opted not to change anything.
Learnings
This project highlighted to me that more meaningful research can be achieved by being more selective with my interviewees and my line of questioning. This gave me a number of routes I could have taken with the product and what solution it provided to the users. Which meant when it came time to do feature sets, I had to be more selective for what would shape the Gather MVP. Good research from the start gave me more freedom to be selective down the road.
Next Steps
I would focus on implementing more vendor-side input within the app so shoppers can see up to date information, such as specific vegetables the vendor will be selling that day.
Communication tools in app where shoppers can connect with their local vendors to ask questions about their products or to just say hello!
Explore potential for online ordering and/or farm box subscriptions with additional user research.
Next Project: