END-TO-END MOBILE APP
END-TO-END MOBILE APP
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

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

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

View Prototype

View Prototype

View Prototype

Project Overview

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

✅ My Responsibilities:

✅ 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

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.

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.

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.

The Goal

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

My Process

Discover & Define

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.

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.

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

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.

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.

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

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.

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.

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

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

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

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

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

Click to enlarge

Full research synthesis can be viewed in FigJam: Affinity Map

POV & HMW

Click to enlarge

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: Busy, value-driven shoppers need a trustworthy way to find vendors and coordinate visits.
HMW: How might we make discovery easy, trustworthy and planning effortless?

Ideate & Design

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

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.

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.
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.

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.

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.

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

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:

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 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.

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:

View Prototype

View Prototype

View Prototype

Test & Deliver

Test & Deliver

Usability Testing

I built an interactive prototype in Figma and performed a mix of moderated/unmoderated tests with 15 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 some critical comments one of which was around the lists section being hard to find and the other around the size of the food icons.

Although there wasn't a lot of feedback on the "Done" button placement when adding items to the list, there were a high number of misclicks

Click to enlarge

Click to enlarge

Priority Revisions

Based on the feedback received in the usability tests, I made the food icons on the vendor cards a bit larger and more spaced out, which is much easier on the eyes and more legible. I would like to explore testing out different styles for the food type icons in the future to discover the most usable version.

Click to enlarge

Click to enlarge

To address the high number of misclicks when completing the List creation task (specifically when finishing adding items to the list), I opted to move the "Done" button to a central location and at the bottom of the screen, hovering so that it is easy to find. Additionally, I added a "Cancel" button in it's place next to the search bar.

Click to enlarge

Click to enlarge

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, given 14 out of the 15 users had no issue finding the Lists I opted to keep it as is. In the future I hope to build and test an onboarding flow where first-time users can get a walkthrough of the app to assist with familiarizing with Gather's features. I also am open to exploring cues on the homepage that would lead users into the Planner section, such as, "Hey let's make a shopping list for this week, open up the Planner".

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

  • Another round of usability testing to validate Priority Revisions as well as with a more responsive Discover map + list OR clarified instructions

  • Build out a brief onboarding flow to show users how to use the main features of the application (i.e. List creation)

  • Some sort of testing on different food icon options to determine what option is most visible and usable

  • Additional features to explore:

    • Build out vendor-side input allowing vendors to push updates to the app

    • Food preferences that users set so they get more personalized suggestions in their feed

    • Communication tools to connect shoppers and vendors

    • Farm box subs./pickup options to streamline shopping, user buys direct from source

Next Projects:

Next Projects:

Next Projects:

© Framer Inc. 2023

Linkedin

Email

© Framer Inc. 2023

Linkedin

Email

© Framer Inc. 2023

Linkedin

Email