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

Nourish Market: Reenvisioning the online grocery shopping experience

DURATION
‍
6 weeks
ROLE

UX/UI
User Research
Branding
TOOLS & METHODS 
‍
Pen & Paper
Figma
Maze
Prototyping
Usability Testing
CATEGORY

Solo project
Retail: Grocery

With the rise of specialty grocery shopping, there is a significant gap between the offerings of major grocery apps and those of specialty grocers, leading to a poor user experience in product discovery and learning. Experience the future of grocery shopping with Nourish Market, a user-friendly app that streamlines your specialty grocery shopping process. Enjoy features that let you discover new specialty products, compare items, and checkout with ease.

PROBLEM

 While most marketing for specialty products happen through mobile-first approaches (Tik Tok and Instagram), users find it difficult to browse and purchase these products. Additionally, mobile users face challenges with online grocery shopping due to poor functionality and usability. Users find mobile grocery shopping time-consuming and tedious, especially when there are too many options to choose from.  

SOLUTION

To streamline the specialty grocery shopping experience and to tackle mobile shopping issues, I developed Nourish Market – a feature rich, user-friendly mobile app that allows users to discover new specialty products in a fun, easy, and efficient way. It provides missing functions from traditional grocery apps, like comparing products, learning about brands, and exploring products through videos.

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. While conducting secondary research, I found the most common problems mobile shoppers experience.

NEW SHOPPING BEHAVIORS 
During the pandemic, there was a newfound appreciation for local artisans and niche purveyors. "56 percent of consumers are shopping in neighborhood stores or buying more locally sourced products, with 79 and 84 percent respectively planning to continue with this behavior into the longer term."
‍
‍‍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. According to a US survey polling over 11,000 customers, 72% say they now buy more groceries online than before the pandemic.

Millennials and Gen Z are now crucial target audiences for online grocery stores due to their familiarity with modern technology—often using Tik Tok and Instagram for information.

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.

PRODUCT DISCOVERY
On mobile, especially on major grocery apps, there isn't an easy way to explore products. A significant amount of time goes into locating products.

Slow checkout
Many customers have said that too many steps in the checkout process are one of the main reasons that they do not shop on their mobile devices.

Lack of reviews
Compared to other e-commerce shopping experiences, grocery shopping apps typically lack reviews, which is something users value and look for when selecting products—especially when purchasing something new.

Competitive 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 major grocery apps as well as specialty grocers to help me understand what works well and what doesn’t. It will also help me better understand the overall shopping flow and help me plan my information architecture to ensure a good user experience.
By looking into these competitors, I identified a significant gap between the offerings of major grocery apps and those of specialty grocers. Major grocery apps tend to focus on a broad range of products with an emphasis on convenience and quick access to staple items. In contrast, specialty grocers offer unique, high-quality, and often artisanal products, but they lack the digital presence and user-friendly interfaces of larger apps.
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.
User Research
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 Findings
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 need a way to learn about products in order to make informed decisions

02
Define

After gathering insights from real users, I created personas that represent key audience segments. This helped 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’m able to keep in mind 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.
“I like learning about why one item is better than the other”
“I hate having to think of what to buy”

“Searching for specific items online is tedious”

03
Ideate

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.

How might we optimize how users can discover new products and help them 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 help users learn more about the products they’re purchasing?

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 for users to easily learn more about products and brands because that’s what they enjoy about the in-store shopping at a specialty market.

Information Architecture
With a clearer understanding of user requirements, I developed a sitemap inspired by intuitive navigation found in grocery apps as well as social media apps like Tik Tok. This ensured comprehensive inclusion of all essential information, functions, features, and screens. My user flows helped me plan out how I wanted each screen to be laid out in order for users to complete their tasks.  
Sketches‍
Referencing the sitemap and user flow, I did some quick sketches for the key screens users will be interacting with most often. Sketching helped me bring the apps user flows to life. During this process, I grasped an overall idea of how I wanted the app to feel and look.  

‍Because discovering new products is a critical feature of the app, a significant amount of effort was dedicated to home screen explorations, which will enable users to effortlessly browse and explore various products.

With my two personas in mind, I brainstormed how users would access these products, and how I wanted the layout of each screen to look like. I also wanted to make sure that users will have all of the information they need (and by order of importance) when looking at a specific product to purchase. To further optimize the user experience, I decided to add a navigation bar to allow users to easily navigate between different features of the product.
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. To keep the design consistent throughout the app, I created a UI kit for the primary fonts, iconography, and color palette. Overall, I decided on a minimal and simple interface to ensure that the product remains intuitive.

04
Prototype

Browse Videos
‍
Users are able to easily discover new products that fit their specific needs, such as dietary restrictions or lifestyle goals.
Learn about brands

‍‍Users are able to learn more about brands and discover different ways to use the products. This allows them  to find and purchase products that they trust to be high-quality, ethically sourced, and sustainably produced.
Compare products
‍‍
Users can compare products in order to make informed decisions and feel confident about their purchase.

05
Testing

I set out to assess how users navigate and complete tasks in the app, with participants drawn from prior survey and interview respondents. 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
“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!”
“As someone who loves food and trying new products, this is something i’d definitely use.”
“I liked the structure of recipe page and of course the video clips are eye catching. Design was clean and fresh! Well done!”
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.

After making iterations based on feedback, 100% of participants were able to complete tasks with no errors.

✴
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. The importance of usability testing  
‍
Iteration is important because it allows me to refine and improve my designs based on feedback from users. Through usability testing, 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.

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. The importance of usability testing  
‍
Iteration is important because it allows me to refine and improve my designs based on feedback from users. Through usability testing, 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.

Conclusion