People wasting a lot of time in waiting lines to get coffees.
UI/UX designer designing “Café Mozart” app from conception to delivery for my Google UI/UX training project.
Conducting interviews, paper and digital wireframing, prototyping, conducting usability studies and UI/UX design.
Allow people (students to workers) to easily and fastly be able to order coffees without wasting time in waiting lines, and this in a large quantity.
3 months
In order to comprehend the users and their requirements for who I am developing, I have conducted interviews and produced empathy maps. Working adults who don't have time to wait in lines due to work were recognized as a main user group. This user group supported my earlier hypotheses regarding Café Mozart clients, and I discovered that they require a pre-order tool to manage their orders and their time more conveniently. Group ordering issues while using apps with complexing customizations are another user issue that needs to be considered.
Working people often have very busy schedules, and as a result, they do not have the time to spend waiting in lines at coffee shops. Not only are they short on time, but they also have many other responsibilities that they need to take care of, such as their jobs, families, and personal errands. For many people, waiting in line for a cup of coffee is simply not an option. This can be a major inconvenience for individuals who rely on coffee as a morning pick-me-up or as a way to stay focused during the workday.
People are struggling with managing their busy schedules and keeping track of all their day-to-day tasks. With so many competing demands on their time, many users find it difficult to stay organized and effectively manage their time. They are looking for an efficient solution that can help them to stay on top of their tasks and meet their obligations. This can be especially challenging for users who have a lot of responsibilities, such as working professionals or students, as they often have to juggle multiple projects and deadlines at once.
This is a feature that many users find to be important, as it allows them to easily place orders with a group of friends or colleagues. Unfortunately, most other apps in the same category are not naturally intended to have this type of functionality, making it difficult for users to find an app that meets their needs. This can be a major inconvenience for users who frequently need to place group orders, as they may have to rely on manual methods like text messaging or email to coordinate orders with others.
Alex is the owner of an insurance company, and he's always looking for ways to streamline his business and make it run more efficiently. One area where he's noticed a lot of wasted time and effort is when it comes to getting coffees for himself and his customers. He's tired of spending hours standing in line at the local coffee shop, waiting for his turn to order.
Mapping Alex's user journey revealed that having a dedicated app for ordering coffee from "Café Mozart" would be helpful. It would make it more convenient for users to access and order their favorite coffee and will improve their overall experience with the brand.
In an effort to gather a diverse array of perspectives and ideas, I conducted a series of workshops. These workshops were designed to ignite my imagination. Through these workshops, I sought to gather as many unique and creative ideas as possible, in order to explore them in greater depth and detail. I utilized a variety of brainstorming and ideation techniques to generate a wealth of potential concepts and possibilities. Then i used Figma to design digital wireframes in order to oragnize things and have a better idea of my desgin ideas.
Some workshop sketches.
Summarizing and sorting ideas
Paper wireframes of all of my ideas before starting the magical work.
During the initial design phase, I made sure to give careful attention to the feedback and findings gathered from user research in order to inform the creation of the screen designs. User research is an important step in the design process as it allows for a deep understanding of the target audience's needs and preferences. By taking these insights into account, I was able to create designs that would be tailored to the specific requirements of the target audience and making the user experience as seamless as possible.
In order to create an intuitive and user-friendly experience, I put a great deal of thought into the navigation of the app. I decided to place the navigation at the bottom of the screen in order to make it easily accessible for users. This placement also makes it convenient for users to navigate through the app using one hand, which is particularly useful for users on-the-go. I also made sure to incorporate support for assistive technologies.
With the digital wireframes as a guide, I created a low-fidelity prototype to demonstrate the primary user flow of ordering an coffee. This low-fidelity prototype allowed me to test the basic functionality and user experience of the app.
Low-fidelity prototype interactions and navigation.
I conduct usability studies in two rounds to gather detailed feedback on user needs and how they interact with the prototype app. The first round of testing focuses on gathering general impressions and identifying any major issues or roadblocks that users may encounter when trying to complete tasks or access features. The second round of testing is then used to gather more specific feedback on these issues and to observe how users interact with any new or updated features that have been implemented based on the results of the first round of testing. This process allows me to identify any areas of the app that may be causing confusion or frustration for users, and make iterative improvements to the design.
- Users need a search bar to look for their favorite coffees.
- Users need a better way to find their address and update it.
- Users need “extras” options in the product tab.
- The “checkout” process need to be more complete and more fluid.
- Orders tab need to be more clear.
- Users need a “profile” tab to manage their informations.
Early design are not really complete but just a visualisation of the app. After the first usability study, i revised the design to better respond to all users with a lot of functions like the search bar or the “last order” section.
The second usability study reveals that some users are not familiar with tracking order tab. I designed it to be more clear and to avoid losting users attention.
Digital wireframes vs Mockups
The final high-fidelity prototype presented cleaner user flows for ordering a coffee and checkout. It also meet user needs for a pickup or delivery option as well as more customization. Its also include a design system with all typos, colors icons and some components.
High-fidelity prototype of the final work.
In order to ensure that the app is easy to navigate, I focus on the design of the headings, labels, and buttons, making sure they are clear and consistent throughout the app. This involves selecting appropriate font styles and sizes, using clear and descriptive text, and ensuring that all buttons and other interactive elements are properly labeled and placed in logical locations. Additionally, I will include clear and recognizable icons that can guide the user experience.
To make the app more accessible for users with visual impairments, I made sure to use high-contrast colors and larger text sizes throughout the interface. Using high-contrast colors, such as black text on a white background, makes it easier for users with visual impairments to distinguish between different elements on the screen. Larger text sizes also make it easier for users with visual impairments to read the text on the screen.
To ensure that the app is fully accessible for users who rely on screen readers, I made sure to use descriptive alt-text for all images used throughout the interface. Alt-text, short for alternative text, is a brief description of an image that can be read by screen readers to provide users with a better understanding of the content of the image. It also ensures that the images will be properly described.
This app help people to make orders fast and avoid wasting time. All functions is here to make the users feel better and helped in all this ordering process.“Overall, the app was a convenient and enjoyable way to order coffee on the go. I will definitely download it”
I learned that the design of a simple button can significantly impact a user's experience. As a result, it is essential to conduct thorough usability studies in order to create the better design that is both effective and intuitive. I also learned that taking the time to carefully consider and test design is crucial in order to deliver a positive user experience.
Conduct an additional round of usability studies in order to thoroughly validate the effectiveness of the solutions implemented to address the pain points identified during previous studies. The results of these studies will provide valuable insights into whether the pain points experienced by users have been effectively resolved and whether any additional improvements can be made.
Develop design specifications that detail all aspects of the design, including layout, typography, and interactions. Include information on all visual and functional elements such as font, color schemes, navigation, buttons, links, etc. Specify how different components work together and how they respond to user inputs to help describe the design in detail.
Stay involved in the development process to ensure design consistency throughout development. Regularly review progress, provide feedback, and make any necessary adjustments. Ensure proper implementation of design details and specifications. Confirm that the final product adheres to the original design vision before release.
