PROJECT 2 - GOOGLE PROFESSIONAL CERTIFICATE
PROJECT 2 - GOOGLE PROFESSIONAL CERTIFICATE
Embedded Files
Project Overview
Project Overview
The product:
The product:
Geo-grocery is an app that helps people find in-store
real-time, the product they are looking for as they shop in person.
The Problem:
The Problem:
People have difficulty finding products when they shop in person.
The Goal:
The Goal:
Help people find the products when they shop in person
My role:
My role:
UX Designer leading the Geo-grocery website and app
Responsibilities:
Responsibilities:
Conducting interviews, creating paper and digital wireframes, developing low and high-fidelity prototypes, performing usability studies, considering accessibility, and iterating on designs and responsive design
User Research
User Research
summary
summary
I conducted user interviews, which I then turned into empathy maps to understand the target user and their needs better. I discovered that many target users treat grocery shopping as fun, necessary, and enjoyable. However, many grocery stores don’t provide effective guidance to get the product when people shop in person, which frustrates many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of fun
Pain points
Pain points
1️⃣
Navigation
Grocery store website designs are often with a lot of information, which results in confusing navigation
2️⃣
Interaction
Small buttons on grocery stores' websites make item selection difficult, which sometimes leads users to make mistakes
3️⃣
Expirience
Online grocery shopping websites don’t provide an engaging and real-time guidance browsing experience
Personas
Personas
Problem statement
Problem statement
Carrie Fisher is a busy senior marketing manager who needs guidance when she is shopping in person because she wants to buy groceries without getting lost in the grocery store.
User journey map
User journey map
I created a user journey map of Carrie Fisher’s experience using the site to help identify possible pain points and improvement opportunities.
Sitemap
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy
Paper wireframes
Paper wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user's pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Paper wireframes
Paper wireframes
screen size variation (s)
screen size variation (s)
Because grocery customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Digital wireframes
Digital wireframes
Digital wireframes
screen size variation (s)
screen size variation (s)
Low-fidelity Prototype
Low-fidelity Prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from members of my team about things like the placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study: Finding
Usability study: Finding
1 - Confused
1 - Confused
Once on the homepage, the so many items that are confusing for the users
2 - Geolocation
2 - Geolocation
Users weren’t able to easily find and use Geo-grocery.
3 - Account
3 - Account
During the checkout process, there wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info
Mockups
Mockups
Based on the insights from the usability study, I made changes to improve the site’s checkout flow. One of the changes I made was to clear the visual and improve the user experience.
Mockups: Original screen size
Mockups: Original screen size
Mockups: Screen size variations
Mockups: Screen size variations
High-fidelity prototype
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.
Accessibility considerations
Accessibility considerations
1️⃣
When choosing a color palette, I made sure my primary colors met WCAG AA Compliance before building out the UI for each screen.
2️⃣
I implemented a text hierarchy throughout the app. This helps users to distinguish the different sections and information on the screen.
3️⃣
I am using only two typefaces: Barlow for headlines and Raleway for body copy.
Takeaways
Takeaways
Impact:
The design strategy included an efficient concept design that increases task efficiency multifold and improves engagement with the application.
The reservation app has ensured its potential for future growth with a scalable and secure solution that has streamlined the store´s inventory management operations.
What I learned:
While designing this website and app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s design.
Page updated
Google Sites
Report abuse