End-to-end mobile app: UX | UI | Branding

Nourish Market: Improving the grocery shopping experience

DURATION

6 weeks
ROLE

UX/UI
User Research
METHODS 

Pen & Paper
Figma
Maze
Branding
Prototyping
Usability Testing
CATEGORY

Retail: 
Grocery

PROBLEM

The pandemic resulted in a substantial increase in online grocery shopping due to its convenience and availability. Retailers were quickly replacing in-store experiences with digital experiences, While mainstream grocery stores were crowded with shelves emptied, restaurants and food-adjacent businesses started selling their inventory to stay afloat, most of which were specialty, local products. Having worked at a coffee company that had to redirect its focus as a result of the pandemic, I witnessed the rise of a new type of shopping experience: the introduction of smaller neighborhood markets that altered how people shopped for groceries. During this time, people wanted to put in an effort in supporting small local businesses and brands. This changed how people viewed their pantries, transforming them from basics into everyday luxuries.

Online grocery shopping remains popular after the pandemic due to its convenience and availability, resulting in a growing market for local products and brands.

BACKGROUND

For some, grocery shopping is just another thing on their to-do list. But for many, grocery shopping can be time-consuming and stressful, especially when there are too many options to choose from. While  options like Instacart and Amazon Fresh provide an online shopping experience, it  can feel dull and uninspiring. I want to explore how we can create an app that can provide an experience that simulates one of shopping a at specialty market.

SOLUTION

To reflect the experience of browsing for grocery products in-store, I created Nourish Market – a mobile app that allows users to discover new specialty products in a fun, easy, and efficient way. By providing users everything they need to make informed decisions. from the ability to explore products through videos, to being able to compare selected items, users can now feel more satisfied with their purchases when shopping online.

PROJECT OVERVIEW

01. RESEARCH

I dove into research to gain a better understanding of the e-grocery market. I wanted to understand who our audience is, see what’s currently on the market, what works, and what doesn’t.

SECONDARY RESEARCH

To gain an understanding of the market, I started with secondary research to get a sense of what we already know, who our audience is, and current trends. I also wanted a deeper understanding of the online grocery experience and to uncover motivations, goals, and pain points.

THE RISE OF ONLINE SHOPPING AND INTRODUCTION OF
NEIGHBORHOOD MARKETS

While most industries struggled to stay alive, the grocery industry was booming – people cooking at home more and eating out less. The small, neighborhood market concept allowed people to not wait on long lines outside, be surrounded by less people and also support smaller businesses.

These neighborhood markets carried products from local brands and changed the way people shopped for goods.

There has been a 200% increase in downloads of major grocery shopping apps, so the number of people who shop online will naturally rise too.

Millennials and Gen Z are now crucial target audiences for online grocery stores due to their familiarity with modern technology.

According to a US survey polling over 11,000 customers, 72% say they now buy more groceries online than before the pandemic.

A significant amount of shopping time goes into locating products that you want to buy. Being able to shop at any time (64%), to find the item easily (62%) and to save time (61%) were all major reasons that could lead to people choosing to shop online.

97% of customers who do online grocery shopping also do in-store shopping - the main reason being customers want to inspect the product’s quality.

COMPETITOR ANALYSIS

I then jumped into competitive analysis, as their products will help me gather insights about strengths, weaknesses, and possible opportunities. These insights will help me gather any gaps in features that Nourish Market might address. I analyzed grocery apps as well as specialty grocers to help me understand what works well and what doesn't.

By looking into these competitors, I saw an opportunity to improve how users discovered and learned about new products.

USER RESEARCH

To develop the best product to the user we need to understand who we are designing for. The main goal is to empathize, observe, engage and immerse, putting aside our own opinions to avoid general assumptions. Building on a general understanding of the market, I conducted user interviews and surveys to really empathize with our users. My goal was to understand users' behaviors with online and in-store grocery shopping and to uncover their motivations and frustrations. To synthesize the qualitative data gathered from user interview, I created an affinity map to help me identify patterns, pain points, and design opportunities to start defining a clear problem to solve.

Key Takeaways: I found that when browsing for new products,

Insights:

- users often conduct extensive research before making a purchase. this includes comparing pricing, ratings, ingredients, brand values, sourcing methods

- users are more likely to purchase a product if they can see how the product can be used


- users find sorting through products that meet their needs tedious and time-consuming


- users who are shopping for specialty products value learning about the brand. They are more likely to choose products that they trust to be high-quality, ethically sourced, sustainably produced.


Needs: 

- users need to feel confident that they're making the best selection in order to feel satisfied

- users need a way to see how products can be used
before committing to a purchase


- users need a way to quickly explore products that fit their specific needs, such as dietary restrictions or health/lifestyle goals.

- users who are shopping for specialty products value learning about the brand. They need a streamlined way to find and purchase products that they trust to be high-quality, ethically sourced, sustainably produced.

My user research confirmed that the demographics of users who grocery shopped online were between the ages of 23-38 years old. All of the participants stated convenience and saving time as main reasons for shopping online.

Users expressed enjoyment in shopping in-store due to the ability to browse and discover new products. I saw this as an opportunity to explore how I could reflect that experience in my product.

I conducted a second round of surveys to gain insights on how users currently discover new products online, what’s frustrating about the process, and what they enjoy about it.

In addition to standard grocery apps, users discovered specialty grocery products through social media, such as Tik Tok and Instagram
Users like to compare their options in order to make an informed decision
Users trust a product more when they can learn more about the brand and can see how the product can be used

02.
DEFINE

After gathering insights from real users, I created personas that represent key audience segments. This helps me focus on tackling the most important problems – to address the major needs of the most important user groups. With keeping my persona in mind, I think of how I can help satisfy their needs when moving forwards with my design decisions.

Analyzing insights from my user interviews led me to two main personas. Michelle discovers products through social media, likes to learn about the brand to solidify her trust, and enjoys seeings ways to use the product. Ethan is all about convenience and enjoys shopping online. He likes exploring new products, but likes to compare products to make sure he's making the best selection.

Though these have two share some behaviors, they have different goals and needs, which is crucial to remember when designing my product.

03.
IDEATE

I’d like to explore ways that will reduce time spent shopping because they find it tedious and time-consuming to think of specific items to purchase.

I’d like to explore how users can feel more confident when shopping online because they don’t trust the quality of products they will receive.

I’d like to explore ways to provide recommendations because users enjoy trying new products.

How might we help users reduce time spent when thinking of items to purchase?

How might we help users feel more confident and satisfied with their online grocery shopping experience?

How might we optimize how users can discover new products?

After synthesizing research, I came up with POVs and HMWs using users' pain points and needs to help me brainstorm ideas. The statements and questions are generated based on the insights and needs I gathered in my Affinity Map. Centering on these questions, I then brainstormed solutions.

After defining the goals, I continued to build up the structure of the website by creating a site map. A site map will help me visualize the relationship between the content and examine the hierarchy.

INFORMATION ARCHITECTURE 

SKETCHES

Referencing the sitemap and user flow, I did some quick sketches for the key screens users will be interacting with most often. I brainstormed how users would access videos, and how I wanted the layout of each product to look like. I also wanted to make sure that users have all of the information they need (and by order of importance) when looking at a specific product to purchase.

WIREFRAMES

Creating low-fidelity wireframes allowed me to take a step back and focus on the big picture, as well as understand the user flow and how users would navigate through the product. It helped me to define the key features and functionalities that needed to be included, and allowed me to identify any potential issues or challenges that needed to be addressed before proceeding to the next design phase. The low-fidelity wireframes were also a useful tool for collaboration and communication. They allowed for quick feedback and iteration, which helped to streamline the design process and ensure that the final product met user needs and expectations.

BRANDING & UI KIT

Before diving into the visual design, I created a moodboard to gather inspiration. I landed on the name "Nourish Market" because of its simplicity and significance, "to provide with food or other substances necessary for growth and health," which captures what my product offers. When designing the logo, my goal was to create a clean and minimal logo that was cohesive with current specialty food brands and stores. As for the color palette, I opted for blue as the primary brand hue because it evokes feelings of trust and reliability. In addition, many individuals experience stress when grocery shopping, and blue helps cultivate a serene and inviting atmosphere to alleviate this anxiety.

04.
PROTOTYPE

LEARN ABOUT BRANDS 

Users can learn more about brand values and discover product usages.

BROWSE VIDEOS

Users are able to easily discover new products that fit their needs

Asterisk

COMPARE PRODUCTS 

Users able to compare products to ensure they're selecting the best option

05.
TESTING

I conducted usability tests with 10 participants through Maze. The goal was to test the overall flow of the site and uncover areas of difficulty or confusion. I had each user complete three main tasks and followed up each task with questions to gain a deeper understanding of any confusion and frustrations they may have had.

1. You want to look for a new condiment to add to your pantry.
• Explore videos and find "parasol vinegar" from Brightland.

2. You want to learn more about the brand and discover uses for the product.
• Go to brand's profile and add the products from the Orzo recipe.

3. You want to purchase the product and pick it up at a local store.
• Checkout and view your active order


FEEDBACK + ITERATIONS

I received a lot of positive feedback that the app was intuitive and that the UI was visually pleasing. However, there were still some areas that needed improvement in order to improve the usability and flow of the app. One of these areas was the process of adding products from the recipe page. Users expected to be able to complete this task in a certain way, but found it difficult or confusing to do so. As a result, I recognized the need to make some changes to the app's design to enhance the user experience. One of these changes was to modify the process of adding products from the recipe page, so that it would be more intuitive and user-friendly. By doing so, users would be able to complete this task more easily and with less frustration.

The other problem was some friction in navigating between different pages. Users were frustrated with not being able to navigate to the Cart on the recipes page straight through the Nav Bar and had to scroll to the top of the page to do so.
“I think overall it's really good, it functions the way I expect it to.”
“I enjoyed the design so much!! I think this minimal, clean design works so well for modern brands I've been seeing with cooking recently and I loved how fun the visuals were. Great job!”
“I liked the structure of recipe page and of course the video clips are eye catching. Design was clean and fresh! Well done!”
“As someone who loves food and trying new products, this is something i’d definitely use.”

06.
FINAL DESIGN

CONCLUSION

NEXT STEPS 

For future iterations, there are a few things that I would consider given that I had more time and resources:
• Explore more options for the home screen to optimize how users can discover products
• Add additional features to improve the product
• Explore how to further personalize the shopping experience

REFLECTION

01. Prioritize the users
Speaking to research participants was a great learning lesson as it taught me how much you do not know until these UX interviews are conducted. Designing for users is important because it ensures that the final product or solution meets their needs, goals, and expectations. During user research, I was able to uncover pain points that helped guide me throughout the design process. By involving users throughout the design process and gathering feedback, I'm able to make informed decisions and create solutions that truly meet the needs of the users. I designed mostly with the customer in mind, considering what type of layout would be the most intuitive to use, and paralleling the real-life grocery shopping experience. I designed this app to reflect what it would be like to browse and shop for products in a specialty grocer and include all of the information a user would need to purchase a product.

02. Iteration is necessary
Iteration is important because it allows me to refine and improve my designs based on feedback from users. Through iteration, I'm able to test my designs with real users, observe how they interact with the product, and gather feedback on what works well and what needs improvement. This allows me to identify areas causing friction and adjust where necessary to optimize the user experience. Ultimately, this helps to create a more effective and user-friendly product that better meets the needs and expectations of its users.