Grocery App Design Project
Project Type
User-Centred Design, User-Experince (UX), Human Factors
Year
2024
As a part of my portfolio project as a part of my UX course I was given a prompt to design an app and a responsive website on Figma that would help customers of a local grocery store help find the location of products.
Introduction
Paper Wireframe
After considering the Google UX prompt I had wanted to create multiple quick paper wire frames to help begin create a quantity of ideas that will help steer the apps design.
I had created four different paper wire frame. I focused on quickly creating designs to come up with multiple different ideas. With the four different paper wire frames I then put stars and notes to mark my favourite parts of each design for me to consider when creating a digital wire frame.
Low Fidelity Prototype
With the paper prototypes in hand, I moved on to digital prototyping in Figma. I picked the wire-frame that felt most intuitive for users and borrowed thoughtful elements from the others. This low-fidelity prototype was all about getting the structure and flow of content just right.
I had included a way for customers to be able to filter for which items they are searching for including a search bar at the top and a row of buttons that would lead customers to a more refined page. I as well sorted all items in the home page so that similar items can be found in the same row. As well I included a featured item tab that would recommend items to the user
When an item press it would take the user to an item page. Here users can find the item, a description and a picture of where the item is stocked. At the bottom of the page it also shows tabs of nearby items which may help direct users to the location but will also allow users to look at other items on the app
High-Fidelity Prototype
The high-fidelity prototype was created then after. I had translated key components from the low-fidelity wire frame into a polished, interactive design using consistent branding, typography, and colour schemes. Also I have developed a realistic layouts that closely resembles the final product to demonstrate flow and intended interactions. The high-fidelity prototype was also adjusted for multiple different phone screens.
Each category has a sliding tab that allows users to scroll horizontally to view items. Also in the product page I had added a map to better help support the objective of the Google UX prompt to help customer find the location of the item.
Responsive Website
Alongside the app a responsive website was also created to help those accessing the app via a browser on a personal computer / laptop. The progressive enhancement model was used where I first designed the smallest most basic version of my site (the mobile app) and then scaled it up to make a desktop website. I had wanted to keep the website simple and consistent with what users might see on other websites especially considering the project is dealing with users who may be unfamiliar with finance topics like credit.
I wanted consistency so users felt a similar experience between devices and also to design for the context in which the users use each device.
Conclusion
Overall this Google UX prompt helped me continue to improve my design skills and provided a valuable learning experience with the tools available on Figma. During a reflection on the project one thing I would do to improve is better my understanding of the layout tools on Figma, and have better contrasting colours in order to improve accessibility and usability.