Menu
The Hometown Cafe website is more than just a virtual menu. It’s a digital extension of our cozy cafe, designed to keep you connected with the heart of your hometown, even when you can’t be here in person. Whether planning your next visit or simply craving a taste of home, our website is your one-stop destination.
People find it difficult to go in person and spend their time ordering and getting their favorite delights because of their busy schedules.
Design a website for Hometown Cafe that allows users to easily order and pick up fresh, healthy delights.
Design a responsive website for Hometown cafe.
Figma
UX designer leading the Hometown Cafe website design.
March 2023 to July 2023
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users treat online food ordering as a fun and relaxing activity when they need a break from their busy schedules. However, many websites are overwhelming and confusing to navigate, which frustrates many target users. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of usage.
Problem statement: Karl is a busy working adult who needs easy access to healthy food ordering options because he wants to save time by using a compatible food ordering website.
Mapping Karl’s user journey revealed how helpful it would be for users to have access to a dedicated Hometown Cafe Website.
The sitemap created for the Hometown Cafe Website helped to establish a clear and structured navigation system. It served as a visual blueprint, outlining the hierarchy of pages and their relationships, ensuring a logical flow for users.
Creating paper wireframes before digital ones for the Hometown Cafe Website offered a tangible, tactile way to brainstorm and iterate the ideas quickly. It allowed a more organic, hands-on approach to design, fostering creativity without the constraints of digital tools.
Because Hometown Cafe’s customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Creating digital wireframes for different screen variations serves the purpose of ensuring a consistent user experience across various devices, making the interface adaptable and user-friendly.
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
Unmoderated usability study
United States, Remote
5 participants
20- 30 minutes
The hometown cafe website features an enticing menu, a cozy atmosphere, and online ordering for convenience.
People prefer intuitive navigation.
People prefer easy design to add items to the cart without much hustle.
The home screen underwent design changes by adding an additional section which showcase the special items of the day in hometown cafe. This design change made the interface welcoming and helps users to find the highlights of the day.
The check out screens of the website underwent design changes that involved splitting the payment process and additional procedures for a more user-friendly experience.
Furthering the usability study conducted, from intuitive navigation to visually pleasing layout and seamless ordering process, this high-fi prototype brings life to the hometown cafe website to meet the needs and preferences of the users.
I made the website to be responsive and adapts seamlessly to various screen sizes and devices.
Have chosen accessible fonts that is easy to read and differentiate between headings and descriptions.
A consistent and intuitive navigation structure.
Hometown Cafe Website have a significant positive impact on users by providing convenience, information, engagement, and a strong online presence. The website designed and maintained to meet the needs and expectations of its target audience.
While designing the Hometown Cafe Website, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the website's designs.
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features
