Scan & Save
An app that helps users locate products as they shop in person
Product Overview
OVERVIEW
The Local Grocery Store app is designed to assist users in locating products during in-person shopping, addressing the common frustration of wasting time searching for items. This app offers a streamlined solution to enhance the In-person shopping experience by efficiently guiding users to the products they need.
MY ROLE
UX Designer & Researcher
USER RESEARCH
I conducted extensive secondary research and competitive analysis for Jewel-Osco and Whole Foods Market to identify the challenges users face with grocery shopping apps during in-person purchases. By analyzing various articles and research papers, I uncovered key pain points, highlighting the diverse needs and expectations of users. I then prioritized the most critical issues and integrated targeted design solutions into the app to effectively address them.
PAIN POINTS
SOLUTIONS
1. Users face problem to locate products as they shop in person which result in waste of time.
2. Most of the users cannot locate the exact product in app that they see in real time.
3. Most of the users do not know the special offers and discounts for the particular day.
4. Regular users want the convenience of saving frequently purchased items for future use.
1. Users can find the product location in real time through the Rack no provided by the app.
2. The app has a feature known as barcode scanner through which the product and its information can be found in the app.
3. Users can easily discover exclusive offers and discounts through the app's dedicated deals page.
4. The app features a list page where users can save items by simply tapping the heart icon.
DEFINE
By researching user needs, I developed the following personas, user journeys to represent the key pain points and goals of various user groups.
PERSONAS
Problem Statement
Problem Statement
Problem Statement
Problem Statement
Elliot is a cook who needs an app that gives personalized recommendations , special offers and discounts because he struggles to locate specific products.
Leah is a doctor who needs an app that gives dietary information of the product because she believes in a healthy and quality life style.
Zareen is a student who needs an app that provides efficient and stress free shopping experience because she want to avoid wasting time in search of products
Carlos is a small business owner who needs an app that allows to scan the barcode of the product to get more information because he wants to shop quickly.
USER JOURNEY MAPS
Goal: To find products through app based on personalised recommendations, special offers & discounts
Goal: To find products through app based on sppecific dietary needs & personalised recommendations.
Goal: To find products through app by scanning bardcodes & efficient checkout process.
COLOURS
After defining user pain points, goals, and journey maps, I proceeded to outline and design the main user flow.
DESIGN
TYPOGRAPHY
INFORMATION ARCHITECTURE
DIGITAL WIREFRAMES
USER FLOW
USABILITY TESTING
I conducted the first round of usability testing with friends and followed up with a second round involving strangers in my university library.
ROUND 1
ROUND 2
There is no payment page following the checkout process.
A confirmation page is needed before the payment process.
The list page is labeled as Cart instead of List.
There is no payment page following the checkout process.
Add a screen for managing payment methods to the accounts page.
Add a button on the list page to access the cart, and include a button on the checkout page to return to shopping.
HIGH FIDELITY WIREFRAMES
Welcome
SignIn
Register
Home
Shop
Account
List
Deals
Search
Scan
Cart
Confirmation
Payment
Checkout
ACCESSABILITY CONSIDERATIONS
The app supports keyboard navigation, allowing users to smoothly move between elements using the tab key. The carefully defined element order ensures an intuitive experience, enabling users to interact with the app efficiently without needing a mouse. This design caters to those who rely on keyboard navigation, offering a convenient and accessible interface.
The app is meticulously designed to enhance user experience through strategic icon placement, creating an intuitive and visually appealing interface. In key areas like the navigation bar, both icons and text are used together to ensure clarity and seamless navigation. This approach makes the app more efficient and enjoyable for users.
The app is designed with high contrast sensitivity in mind, using a white background and orangey-red font to ensure clear visibility and readability. This color scheme achieves a minimum contrast ratio, enhancing accessibility and creating a user-friendly experience for all.
IMPACT
The design addresses key user pain points such as product location, barcode scanning, personalized recommendations, and special offers. User acceptance testing revealed that users appreciated the features and color theme, and they provided valuable suggestions for further enhancements.
Scan & Save
An app that helps users locate products as they shop in person
PRODUCT OVERVIEW
OVERVIEW
The Local Grocery Store app is designed to assist users in locating products during in-person shopping, addressing the common frustration of wasting time searching for items. This app offers a streamlined solution to enhance the In-person shopping experience by efficiently guiding users to the products they need.
MY ROLE
UX Designer & Researcher
USER RESEARCH
I conducted extensive secondary research and competitive analysis for Jewel-Osco and Whole Foods Market to identify the challenges users face with grocery shopping apps during in-person purchases. By analyzing various articles and research papers, I uncovered key pain points, highlighting the diverse needs and expectations of users. I then prioritized the most critical issues and integrated targeted design solutions into the app to effectively address them.
PAIN POINTS
1. Users face problem to locate products as they shop in person which result in waste of time.
4. Regular users want the convenience of saving frequently purchased items for future use.
3. Most of the users do not know the special offers and discounts for the particular day.
2. Most of the users cannot locate the exact product in app that they see in real time.
SOLUTIONS
1. Users can find the product location in real time through the Rack no provided by the app.
4. The app features a list page where users can save items by simply tapping the heart icon.
3. Users can easily discover exclusive offers and discounts through the app's dedicated deals page.
2. The app has a feature known as barcode scanner through which the product and its information can be found in the app.
DEFINE
By researching user needs, I developed the following personas, user journeys to represent the key pain points and goals of various user groups.
PERSONAS
Elliot is a cook who needs an app that gives personalized recommendations , special offers and discounts because he struggles to locate specific products.
PROBLEM STATEMENT
PROBLEM STATEMENT
Leah is a doctor who needs an app that gives dietary information of the product because she believes in a healthy and quality life style.
PROBLEM STATEMENT
Carlos is a small business owner who needs an app that allows to scan the barcode of the product to get more information because he wants to shop quickly.
PROBLEM STATEMENT
Zareen is a student who needs an app that provides efficient and stress free shopping experience because she want to avoid wasting time in search of products
USER JOURNEY MAPS
Goal: To find products through app based on personalised recommendations, special offers & discounts
Goal: To find products through app based on specific dietary needs & personalised recommendations.
Goal: To find products through app by scanning bardcodes & efficient checkout process. mmendations.
DESIGN PHASE
After defining user pain points, goals, and journey maps, I proceeded to outline and design the main user flow.
COLOURS
TYPOGRAPHY
SITE MAP
DIGITAL WIREFRAMES
Welcome
SignIn
Register
Home
Shop
Scan
Search
Deals
List
Account
Cart
Checkout
USER FLOW
USABILITY STUDY : FINDINGS
I conducted the first round of usability testing with friends and followed up with a second round involving strangers in my university library.
ROUND 1
ROUND 2
There is no payment page following the checkout process.
The list page is labeled as Cart instead of List.
A confirmation page is needed before the payment process.
A logout button should be included on all screens.
Add a button on the list page to access the cart, and include a button on the checkout page to return to shopping.
Add a screen for managing payment methods to the accounts page.
HGH FEDILITY MOCKUPS
Welcome
Scan
Home
Register
SignIn
Shop
Search
Account
List
Deals
Payment
Cart
Confirmation
Checkout
ACCESSABILITY CONSIDERATIONS
The app is designed with high contrast sensitivity in mind, using a white background and orangey-red font to ensure clear visibility and readability. This color scheme achieves a minimum contrast ratio, enhancing accessibility and creating a user-friendly experience for all.
The app is meticulously designed to enhance user experience through strategic icon placement, creating an intuitive and visually appealing interface. In key areas like the navigation bar, both icons and text are used together to ensure clarity and seamless navigation. This approach makes the app more efficient and enjoyable for users.
The app supports keyboard navigation, allowing users to smoothly move between elements using the tab key. The carefully defined element order ensures an intuitive experience, enabling users to interact with the app efficiently without needing a mouse. This design caters to those who rely on keyboard navigation, offering a convenient and accessible interface.
IMPACT
