Project Overview
The product
Town Grocer is a family-run grocery store in Metropolitan Cebu, Philippines with branches in 4 major Cities: Cebu City, Mandaue City, Lapu-lapu City and Talisay City.
As the global pandemic caused a drastic change in consumer behaviour, the proprietor of Town Grocer decided to offer a grocery shopping app to their customers.
The Town Grocer Shopping App will provide customers with an easy and convenient way to shop for their groceries online. Customers will be able to browse and purchase items from the store's inventory, view their past orders, and take advantage of special promotions and discounts. The app will also offer delivery and pickup options, as well as multiple payment methods.
Project duration
The project started in February 2022 and was completed at the end of July 2022
The problem
• The increasing traffic problem in Metropolitan Cebu robs commuters of their time going and coming from work plus going to get grocery where the stores are always packed with people and the checkout lines are long.
• The Covid-19 pandemic has made some vulnerable individuals hesitant to go to crowded places like the grocery store.
The goal
• Increase sales and customer loyalty for the small grocery store
• Provide customers with a convenient and hassle-free shopping experience
• Offer delivery and pickup options for customers who are unable or prefer not to visit the store in person
• Accept multiple payment methods, including cash, credit, and mobile payments
• Offer a loyalty program or rewards system to incentivize repeat business
My Role
UX designer designing an app for Town Grocer from conception to delivery
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research Summary
I conducted online interviews and created empathy maps to understand the users I’m designing for and their needs.
Based on the user research for a shopping app for a small grocery store in the Philippines, it seems that customers value the convenience of being able to shop online, but also appreciate being able to see and touch products in-store. They would like the app to have a search bar and offer filters for easier product discovery, as well as the ability to view product ratings and reviews. Customers would prefer to have multiple payment options, including credit cards and mobile payments, and would like the app to offer delivery options. They would also like to be able to save favorite items and reorder from previous orders with ease. Customers would appreciate promotions and discounts, as well as a loyalty program or rewards system.
Pain points
1. Difficulty finding specific products
Most available apps does not have intuitive search and filter function and it can be difficult for users to find what they are looking for.
2. Limited payment options
Most available shopping apps only accepts cash or a single type of payment method, it may be inconvenient for users who prefer to pay with a credit card or mobile payment system.
3. Dated Inventory
Current local shopping apps shows products that are not actually available in the store, users may be frustrated when they find out that the items they receive is incomplete without knowing that the product they purchased was not in-stock,
4. Poor delivery experience
Some available apps does not provide reliable delivery or pickup options, users may become frustrated and look for alternative shopping options.
5. Poor customer service
Some available apps does not provide easy access to customer service, users may become frustrated when they encounter problem while shopping or when they receive their purchases.
Personas
User Journey Map
The scenario:
Jade is short on time and decides to use the shopping app to purchase her groceries for the week. She adds several items to her cart and selects home delivery as the delivery option. She pays with her credit card and is happy with the convenient and efficient shopping experience.
The Design
Paper Sketches
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I sketched 5 wireframe versions of the homepage on paper and highlighted the elements that would be used in the initial digital wireframe. For the home screen, I prioritized having the highlighted products and categories to help users find what they need to purchase.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital Wireframes
As the initial design phase continued, I converted the paper wireframes to digital wireframe. Easy to access shopping cart page was a key user need to address in addition to accessible bottom navigation.
Low-Fidelity Prototype
The low-fidelity prototype connected the primary user flow of finding and purchasing grocery items, so the prototype could be used in a usability study with users.
Usability Study
Affinity Diagram
I conducted an unmoderated usability study of 5 people from different background and profession. After collecting the data, I organize them into an affinity diagram and identified patterns and insights.
Pain Points
Participant Suggestions
Findings & Iterations
1. Users suggested to have an option to use the app as guest instead of having to create an account.
2. It was observed that users did not select the store location in the homepage and continue to browse items. Some products and offers may only be available in specific stores, therefore it is important that the user selects the store/chain before they purchase their items on the app. Allowing location access will also automatically inform the delivery address upon checkout.
3. It was observed that users want to use the search bar instead of scrolling through the items to find what they wanted to add to cart, therefore, I made a floating search icon so that users can search anywhere the are on the screen. The cart also floats when the user scrolls down for easy access.
4. Finally, I removed the Track Order tab on the button navigation and moved the link to the menu drawer to make space for chat support tab. It was identified in the initial research that one prevalent pain point of users is the difficulty in reaching customer service.
Final Mockup
Accessibility Considerations
1. Used clear and simple language
To make the app easier to understand for users with cognitive impairments or limited literacy, I use clear and simple language in the user interface and content and avoided jargon and technical terms.
2. Used high contrast colors
To make the text and other elements on the screen easier to see for users with vision impairments, I used high contrast colors.
3. Made the app keyboard-accessible
To make the app accessible to users with mobility impairments, I ensured that it can be used with just a keyboard.
4. Used alt text for images
To help users with vision impairments understand what is being shown on the screen, I used alt text to describe images.
5. Made buttons and links easy to click
To make the app easier to use for users with mobility impairments, I made buttons and links large enough and with enough space between them to make them easy to click.
6. Tested the app with users with disabilities
To ensure that the app is accessible and usable for all users, I tested it with users who have different types of disabilities.
Takeaways
Impact
Designing this very user-friendly and intuitive shopping app for a small grocery store in the Philippines could lead to a number of benefits for the store and its customers. The app could drive sales and increase customer loyalty by providing an efficient and convenient way for customers to shop for groceries. It could also improve customer satisfaction and the store's reputation, as a high-quality app is more likely to meet the needs and preferences of users. Additionally, the app could potentially reduce operational costs for the store by automating tasks such as order processing and inventory management. Overall, a well-designed shopping app has the potential to have a significant positive impact on the store's performance.
What I learned
I learned the importance of conducting thorough user research to understand the needs and preferences of potential users. I also learned the value of creating a clear user flow and designing wireframes that are easy to use and intuitive. Through the design process, I gained a better understanding of how to create an app that meets the goals and objectives of the store, as well as the needs of its customers. Overall, this project has helped me to develop my skills as a designer and has given me a greater appreciation for the role that user experience design plays in the success of a product.
Next Steps
1. Add a loyalty program to encourage users to keep using the app for their grocery needs
2. Monitor app usage and gather user feedback: It is important to track how users are interacting with the app and gather feedback to identify areas for improvement. This can be done through in-app surveys, user interviews, and other methods.
3. Analyze user data: Use data analytics tools to analyze user behavior and identify trends and patterns. This can help to identify areas of the app that are working well and areas that need improvement.
4. Iterate and optimize: Based on the feedback and data gathered, make necessary changes and improvements to the app to optimize the user experience. This may include adding new features, updating existing features, or removing features that are not being used.
5. Test and validate changes: Before making any changes to the app, it is important to test them with a small group of users to ensure that they are effective and improve the user experience.
6. Communicate with users: Keep users informed about updates and changes to the app to ensure that they are aware of what is happening and to get their feedback.
7. Continuously monitor and optimize: User experience design is an ongoing process, so it is important to continue monitoring the app and gathering feedback to identify areas for improvement.