People wasting a lot of time in waiting lines to get coffees. Additionally, those who have already ordered and are in the store face the problem of losing their place in line if they go to wait again. This leads to frustration and inconvenience for customers who need to get their drink quickly.
UI/UX designer designing “Café Mozart” website from conception to delivery for my Google UI/UX training project.
Conducting customer interviews, creating wireframes, prototyping, conducting usability studies, designing a user-friendly UI/UX. Ensure the website is responsive and is accessible on various devices.
Provide a seamless and convenient ordering experience for customers. Design a website to aims to help customers skip the long queues at the store and allow those who need a quick refill to do so without losing their place in line without any inconvenience.
2 weeks
I conducted interviews and created empathy maps during my first project of designing the app. In that project, I found that working adults who have limited time to wait in lines due to work are a significant user group that require a pre-order tool to manage their time effectively. Additionally, the problem of losing their place in line while in the store was identified as another issue. To understand the needs and requirements of the users for the Café Mozart website, I will use this information along with new insights to develop a more efficient ordering website for Café Mozart. To ensure the website's design is user-friendly, I conducted a competitive audit and came up with multiple design solutions before the final version.
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.
The frustration of losing their place in line can be an inconvenience for customers who have already invested time and effort in placing their initial order and are now trying to quickly place a follow-up order. This is especially problematic for customers who are working on their laptops at a table and don't want to lose their concentration from their work by having to wait in line again. Finding a solution to this problem would greatly enhance the user experience and allow customers to seamlessly continue with their tasks without any interruptions.
Lea, a student, faces the challenge of ordering her coffee while working at Café Mozart store without losing her place. She wants to avoid getting up and waiting in line again for another coffee. Lea needs a solution that allows her to order from her computer to avoid wasting time and disrupting her work.
Mapping Laura's user journey highlighted the need to provide a dedicated website for ordering coffee from Café Mozart in addition to the app. By doing so, users would have the convenience of accessing and ordering their favorite coffee without having to use their phone or leave their current table. This improvement would ultimately result in an enhanced overall experience for customers.
To get a bunch of creative ideas, I hosted a series of workshops aimed at getting my imagination flowing. These workshops helped me gather loads of unique and imaginative concepts that I could explore in greater depth. To make website navigation easier, I created a sitemap that followed the same structure as the mobile app. This way, users could have a familiar and consistent experience across different devices, making navigation smoother and more intuitive. This approach made it easy for users to find what they were looking for on both the app and website, resulting in a seamless experience.
Sitemap of Café Mozart Website.
I created paper and digital wireframes for each screen, considering pain points related to navigation, browsing, and checkout flow. Variations of the home screen wireframe were designed to optimize the browsing experience for users. These wireframes helped refine the app's design and improve its overall user-friendliness. To ensure that the ordering website for Café Mozart was accessible on all devices, I designed additional screen sizes to ensure a fully responsive experience. This approach was taken to ensure that customers could use the website effortlessly, regardless of the device they were using. With responsive designs in place, customers could enjoy a seamless ordering experience on any device, including desktops, tablets, and mobile devices.
Paper wireframes for desktop screens.
Paper wireframes size variations.
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.
Designed digital wireframes for various screen sizes, which included optimization of key elements such as button placement and visual hierarchy. This approach ensured that the ordering website for Café Mozart would deliver a consistent user experience regardless of the device used to access it.
To build a low-fi prototype, I connected the screens for the main user flow of adding items to the cart and completing the checkout process. My team provided feedback on the design, including button placement and page organization, and I incorporated their suggestions to improve the user experience.
Low-fidelity prototype interactions and navigation.
To better understand user needs and how they interact with the prototype website, I conduct regular usability studies. These studies aim to collect detailed feedback from users regarding their overall experience and highlight any major issues or roadblocks they may encounter while trying to complete tasks or access features. By leveraging usability findings from the app project, I am able to avoid making the same mistakes on the website. Furthermore, this study helps me gather more specific feedback and observe how users interact with the website. Based on this feedback, I identified areas of the website that may cause confusion or frustration for users and made incremental improvements to the design.
Users do not identify section as they had to. Like for the promotion section.
Users wanted to add to card coffees without having to view the “product” page.
The checkout process was not clear, they need a “select shipping method” function
During the checkout process, there wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info
Following the feedback from user testing, I focused on improving the user experience for my project. One of the changes I made was rethinking the way the promotion section was presented to users, making it more visually appealing and user-friendly.
Additionally, I added buttons next to each promoted coffee, allowing users to easily add them to their order. Finally, I revisited the checkout process, making adjustments to ensure that users could easily navigate through the process and complete their order with ease.
Promotions page refined.
Checkout page refined.
As part of my mockup design process, I took into account the various screen sizes that users might use to access the website. By optimizing the browsing experience for different device sizes, including mobile and tablet, I ensured that users would have a seamless and enjoyable experience no matter what device they were using. This approach helped to increase user engagement and make the website more accessible to a wider range of users.
Mockups screen size variations
For the final stage of my design process, I created a hi-fi prototype that followed the same user flow as the lo-fi prototype. This hi-fi prototype incorporated design changes that were made based on the results of the usability study.
High-fidelity prototype of the final work.
Make sure the website is easy to navigate, with clear and consistent headings, labels, and buttons.
Use clear and concise language: Avoid using technical jargon or overly complicated language.
Ensure compatibility with assistive technologies such as screen readers and magnifiers to ensure that it is compatible and works seamlessly.
Impact: This website help people to make orders fast and avoid wasting time. All founctions is here to make the users feel better and helped in all this ordering process.
“This is nice for us who want to order without touching our phone”
Throughout this project, I learned the importance of prioritizing user needs and conducting thorough research to understand user pain points. I discovered that small design details, such as font size and colors, can have a significant impact on the user experience. Testing and iterating designs based on user feedback helped me create a better user experience.
To make sure that the pain points identified during previous usability studies are effectively addressed, another round of testing should be conducted. This will help to validate the effectiveness of the solutions implemented and provide further insights into any additional improvements that can be made to enhance user experience.
Developing detailed design specifications to ensure that all aspects of the design are considered during the development, including the layout, typography, and interactions. These specifications should cover visual and functional elements such as font, color schemes, navigation, buttons, links, and more.
Stay involved and regularly review progress to ensure design consistency throughout the development process. Providing feedback and making necessary adjustments will help to ensure proper implementation of design details and specifications in order to confirm that the final product adheres to the original design vision before releasing it to the public.
