delis app
delis is a local pastry shop with a few locations within the town. The shop offers wide range of delicious sweet baked goods, salty snacks, and bread.
The products are sophisticated but in affordable prices, and they also meet requirements of more picky eaters. Delis wants to target customers who are busy and like to order online fancy food.
delis wants to develop a product that will improve ordering experience of its users; increase customer satisfaction and thus positively affect sales; contribute to building customer loyalty.
The app would allows users to quickly custom and place their order and pre-filter products according to their preferences and allergies. Option between delivery and pick up would be possible.
my responsibilities:
The project twas a part of Google's UX Designer certification program. Therefore throughout the process I have conducted all stages and functions of ux project, from ux research to final design.
Tools: Figma, Figma Mirror app, Photoshop
Our delis ordering app will let users quickly custom and place their orders which will affect busy or picky users, or those with allergies, by allowing them to save time and order in advance their favorite pastries and bread.
We will measure effectiveness by amount of orders, reviews and waste data.
In foundational research, my goal was to find out users’ needs, and discover how to address those needs with design of the product. User research data in the foundational research phase was collected through semi-structured interviews. The goal of these interviews was to find as much as possible about users’ experience regarding purchasing products at a local bakery or pastry. This type of research was a primary qualitative and descriptive in nature. It was focused on understanding user’s motivations, aims, goals and problems. I had also read reviews of the ordering apps in the app store to comprehend typial pain points of exisiting users.
The data gained in this process helped, through empathizing, to define main issues for the functionality of the ordering app.
Next I had created journey maps to identify feelings and thoughts user might experience while ordering baked products from the typical bakery/deli in the traditional way.
I have compared features of three competitors (one direct and two indirect) that had launched an app similar to project.
I have focused on functionality and ordering experience and reviewed the interface, visual aspects, navigation and features.
delis wants to develop a product that will improve ordering experience of its users; increase customer satisfaction and thus positively affect sales; contribute to building customer loyalty.
The app would allows users to quickly custom and place their order and pre-filter products according to their preferences and allergies. Option between delivery and pick up would be possible.
I prepared the basic user flow diagram and then started with paper version of wireframes. Afterwards I transformed them into digital ones using Figma. I have decided to perform my design for iPhone 12, as I could test it afterwards accordingly on my device using Figma Mirror.
These basic wireframes were connected into simple prototype to estimate if the journey is easy to navigate, and main tasks easy to complete. After testing wireframes with a couple of users I came to some findings that I would apply in the next phase: high-fidelity mock-ups.
All elements and groups of elements were designed with the use of components, variants and auto layout to achieve desired responsiveness and seamless design process.
Affordances have got contrast applied to meet the AA standards of WCAG (World Wide Web Consortium).
This norm requires a ratio of at least 4.5:1 for normal text and 3:1 for large text.
The UI of my app went through a few iteration rounds. First layouts were too overloaded, colorful and lacked proper hierarchy.
After reducing the palette, increasing contrast and amount of white space, also the accessibility considerations helped to order
and simplify mock-ups, resulting in more intuitive and functional design.
After completing designing high-fidelity mock-ups I connected them into clickable prototype and chose animations that would enhance the performed action between screens. The ready prototype could be then verified by a group of potential users.
After creating the prototype I tested it on five users. The tasks and questions were so prepared to verify if ordering experience is smooth, understandable and easy to complete. It was unmoderated study where users had to perform tasks of ordering pickup and home delivery order using high fidelity prototype through Figma Mirror app. The time of completion the task and conversion rate was measured. The methodology was based on KPIs, drop-off rate and error rate.
After the study I organized collected data and prepared affinity diagrams to group the main issues. Afterwards I made the last small iterations on my design.
The project was very challenging, and due to all roles I had to take over, really time-consuming, but overall I gained great experience with a lot of insights about app design process.
I had learned that simplest design solutions are usually the best. More white space and reduced color palette increases readability.
Users can give an input that designer could not have predicted.
AI Website Software