Project Overview
As part of the Google UX Design Professional Certificate program, I completed seven modules focused on designing a mobile app prototype in Figma. This included research, ideation, wireframing, prototyping, and testing.
My prototype is designed for a local grocery store, helping shoppers efficiently locate their desired products.
Outline of Project Steps
1. User Research
2. Value Propositions
3. Competitive Audit
4. User Flow
5. Wireframes & Low-Fidelity Prototype
6. Testing Early Concepts
7. High-Fidelity Prototype
User Research
To begin the user research, I developed three detailed user personas—Amanda, Carlos, and Margaret—each representing different grocery shopping behaviors and challenges. I used user empathy maps, stories, and journey maps to deeply understand their needs, frustrations, and goals. To validate these personas, I conducted real-life user research through a survey with 25 participants, gathering insights into their typical grocery shopping experiences and pain points. This research informed problem statements and hypothesis statements for each persona, allowing me to create solutions tailored to their specific challenges, such as time-saving features for Amanda, budget-conscious tools for Carlos, and mobility assistance for Margaret.
Value Propositions
To determine the application's value, I began by brainstorming potential benefits, focusing on features that would provide meaningful solutions to users. I then narrowed these ideas by aligning them with the primary goals of my three personas—saving time for Amanda, helping Carlos shop within his budget, and providing easier navigation for Margaret. After sorting through the list, I chose two key values for each persona: in-stock notification and scan-to-buy for Amanda, price comparison and coupon integration for Carlos, and easy to use app design and shopping journey generation for Margaret. These values became the foundation for the app's core features, ensuring that it directly addressed the needs of each user.
Competitive Audit
In my competitive audit, I researched two direct and one indirect competitor: The Market at Oregon Dairy, Target, and Giant/Martin's. I analyzed each competitor's navigation features, user interface, and app functionality.
Target stands out for its store map feature, but it often struggles to provide a seamless shopping experience, as sponsored products may not align with user needs. The Market at Oregon Dairy offers a community-focused approach but lacks robust navigational tools. Meanwhile, Giant/Martin's has a user-friendly layout but fails to highlight product locations effectively. This research will inform the app's development, ensuring it delivers a solution that enhances the speed and ease of grocery shopping
User Flow
To create a seamless user experience, I began by developing a user flow that mapped out the steps a user would take to locate an unfamiliar product in the grocery store. This helped visualize the most intuitive path from start to finish. I then created both a big-picture storyboard to illustrate a user finding a product that is in stock in another part of the store and a close-up storyboard to show a specific interaction of searching for an item. Additionally, I built a site map, organizing the app’s structure to ensure easy navigation and logical groupings of features.
Wireframes & Low-Fidelity Prototype
Transitioning to the design process, I started by developing wireframe sketches to outline the app's structure and layout, prioritizing functionality and user flow. These sketches served as the foundation for my paper prototypes, where I demonstrated the flow of adding a product to the user's shopping list and then locating the product on their shopping route.
After the paper prototype, I moved to Figma and created a low-fidelity digital prototype using my digital wireframes.
Testing Early Concepts
After completing the initial prototype, I conducted usability research to enhance the user experience and ensure intuitive navigation. I started by creating a detailed research plan with clear objectives and key questions to steer the process. I then interviewed target users in a moderated study taking notes and gathering insights into their shopping habits and preferences, and observed them completing tasks within the app as I moderated the study.
View the Google Sheets file
Notes on Participant A
Notes on Participant B
Notes on Participant C
Using an affinity diagram, I consolidated the data from these sessions and identified trends and common pain points. Using the grouped themes, I wrote three pattern identifications based off of the observations.
Affinity Diagram
To present my findings I created a presentation to share with a hypothetical design team and stakeholders. This presentation then lead to prioritizing the insights into what needs to be taken action on in order of importance.
View the Google Slides file
High-Fidelity Prototype
In refining my prototype into a high-fidelity version, I focused on enhancing both design details and functionality. Using Figma, I evolved my skills by creating reusable components for consistent design elements, streamlining updates across the project. I also deepened my knowledge of Figma’s interactive features, incorporating transitions and interactions to simulate the user experience.
The prototype illustrates the flow of searching for the product "sweet onion", adding it to a shopping list, and viewing a smart shopping route tailored to the list.
If you're on mobile, you can interact with the prototype in your browser using Figma.
User Interfaces for Web
The next phase of the certificate program focused on designing dynamic user interfaces for websites.
Software Used
Figma, Adobe Illustrator, Google Docs, Google Sheets & Google Slides