END-TO-END MOBILE APP

A platform fostering connection between shoppers and local food growers/farmers and making the shopping local experience more seamless and efficient

View Prototype

Project Overview

The intent of this project was to design an end-to-end mobile application focusing on resolving an issue in the food space. After some initial research I decided to focus on helping users connect with local food growers in their community and shop more sustainably.

The intent of this project was to design an end-to-end mobile application focusing on resolving an issue in the food 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 Role: Solo UX/UI Designer

🧰 My Toolbox:

✅ My Responsibilities:

User Research & Competitive Analysis

Design Strategy
User Flows & Task Flows
Visual Design
Wireframing
Prototyping & Usability Testing

User Research & Competitive Analysis

Design Strategy
User Flows & Task Flows
Visual Design
Wireframing
Prototyping & Usability Testing

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 planning their grocery trips focusing on local sources. There’s a gap in the market for a centralized solution to discover local food sources combined with a planning tool to keep users organized as they shop local.

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.

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.

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.

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.

My Process

Discover & Define

I conducted extensive research through user interviews and competitive analysis to understand the needs of users and identify pain points with existing solutions. I further defined the pain points with a strong POV/HMW statement.

Ideate & Design

Using my research, I brainstormed a solution called Gather. I determined the features, organization, flow, branding, which helped me focus on the look and feel before getting into wireframes. With many iterations, I finalized the high-fidelity wireframes and made those into a fully-functional prototype.

Test & Deliver

With my fully functional prototype, I conducted usability testing to refine the design and improve the user experience. Based on the feedback, I made some visual design revisions.

My Process

Discover & Define

Competitive Analysis

I started the project with a look into the competitive landscape of apps focused on shopping local and sustainably with some additional secondary research on the industry.

The secondary research and competitive analysis helped better understand the landscape of apps that connect consumers with locally and sustainably grown food. I examined both direct competitors, such as SimplyLocal, Soko, GrownBy, which focus on connecting users with local farmers and markets, and indirect competitors like Farmish, Thrive Market and Market Wagon, which provide convenient online shopping experiences for organic and locally sourced goods.

By analyzing their strengths and weaknesses, I identified key opportunities for improvement, including enhancing product visibility, streamlining the ordering process, and creating a more user-friendly interface. This research provided valuable insights into how my app could differentiate itself by offering a seamless, transparent, and engaging experience for consumers looking to support local food systems and making the shopping experience easier.

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

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

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

POV & HMW

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 & Design

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

To prioritize features for the app, I used the MoSCoW method to categorize them into Must Have, Should Have, Could Have, and Won’t Have based on user needs, competitive analysis, and feasibility. The Must Have features focus on core functionalities like a searchable map of local food sources, vendor profiles, and filtering options to help users easily find sustainable food. Should Have and Could Have features enhance the user experience, such as educational content, seasonal food tracking, and CSA subscriptions, while Won’t Have features—like live chat support—were excluded to streamline development and leverage existing tools. This structured approach ensured that the app remains user-friendly, functional, and scalable.

Click to enlarge

User Flows & Task Flows

After doing the MoSCoW matrix I wanted to get some ideas down for how these features could be laid out with some sketching. View ideation sketches here: Sketches.

In tandem, I worked on User Flows & Task Flows and let the two exercises inform each other. For the flows, I focused on the two main features of the app have the user work through Discovery and Shopping List for these tasks.

View User Flows & Task Flows here: User/Task Flows

Logo & Branding

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.

In designing the Gather logo, I felt a word-mark logo was best after trying sketches of some more visual symbols.

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.

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.

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 good sense of what I would design, so moved into a digitizing Mid-Fi frames to get a sense of how the layout would look.

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.

Click to enlarge

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 prioritized giving users robust filtering options for map and list results. Research showed that a major pain point was the lack of information on what farmers markets and local stores would offer, making it difficult for users to plan their meals and shopping. By including filters for food types, vendor types, and even specific shopping lists, I aimed to help users easily find what they need and approach shopping locally with more organization and efficiency.

I kept the Discover tab design simple to avoid overwhelming users, given the many actionable elements like filters, map view, list view, and result details. Since most users are already familiar with map/list search functionality from other apps, I maintained a familiar layout and focused on ensuring the content and information provided were as useful as possible to help users discover local food sources that meet 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 Figma link below:

For the Discover tab, I prioritized giving users robust filtering options for the map and list results. Research showed that a major pain point was the lack of information on what farmers markets and local stores would offer, making it difficult for users to plan their meals and shopping. By including filters for food types, vendor types, and even specific shopping lists, I aimed to help users easily find what they need and approach shopping locally with more organization and efficiency.

I kept the Discover tab design simple to avoid overwhelming users, given the many actionable elements like filters, map view, list view, and result details. Since most users are already familiar with map/list search functionality from other apps, I maintained a familiar layout and focused on ensuring the content and information provided were as useful as possible to help users discover local food sources that meet 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.

View Prototype

Test & Deliver

Usability Testing

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.

The feedback was that 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.

Click to enlarge

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.

Click to enlarge

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 Projects: