The Challenge
The goal was to update and refine an
old course project - to both give the design a fresh new look and improve the user experience. Visual improvements to the site should attract interest, while the user experience updates should ensure the user has a smooth and easy process with minimal pain points.
Research
I began this iteration by conducting some research to gain a deeper understanding of the target audience and their needs. I used this information to create a user-centered design that prioritizes ease of navigation and a visually appealing layout. To understand the needs of the user I pulled some key points from some in-depth studies on similar websites and apps.
Key Research Findings:
- Users liked having an easy way to reorder past orders, ideally an "order again" function with the option to add immediately (with less clicks).
- Users liked an easy way to show allergens
- Users liked having an easy way to change meal preferences or special instructions for their order.
- Users needed an easy way to get back to add additional items
- Users wanted to be able to order for later
- Users did not want to have to calculate tips and preferred sites that showed both percentage and dollar amounts.
Wireframes
Sketching out ideas allowed me to refine the basic structure and flow of the site before the design details came into play.
Applying the Research
To ensure quick and easy access to commonly ordered items, an "Easy Reorder" Function was added front and center on the order screen.
To help users quickly identify which menu items are safe for them, an allergen filter was added. When the user chooses a category on the menu, all items containing that allergen are shown in red to make ordering easier for that user.
While the menu already has a fully customizable "build your own" option, users can edit each added item with an "options" function in the cart. This allows users to edit meals to omit or add extra, or add on additional ingredients according to their personal meal preferences.
A text box is provided in case there are any additional requests or dietary needs when ordering. Just above this, recommended additions are included to give the user a quick way to add the most popular items before checkout.
To allow users to pre-order for a later date, a date/time option was added to the cart.
Research has shown that users dislike having to calculate tips. Tips have been displayed as percentages and dollar amounts.
User Testing
Once the new prototype was created, it was time to conduct some user testing. Users were asked to complete various tasks on the website and their actions were recorded. Insights about the users' experience were gathered with heatmaps, user flows, as well as written questions about the users' experience. This information was used to understand how the user might interact with the product and identify potential problem areas.
User testing revealed a few areas that needed attention. It became clear users were searching for an option to edit their previous choices once they arrived at the checkout screen. A pop-up with delivery/takeout selection and an option to edit the entered address was added to ensure users could continue through the checkout without having to backtrack.
Looking at the user flow data, it became apparent that users were looking for the allergen information on the menu page, so an allergen filter was added here as well. To clarify the purpose of the filters a pop-up informs the user that they can use this menu if they have allergy concerns.
Final Design
Reflections and Next Steps
Reflecting on this project, I am proud of the progress I have made as a designer and wanted to revisit this project to showcase my updated skills and knowledge. One of the areas I wanted to focus on was improving the functionality and realism of my prototype. I utilized Adobe XD components to enhance the user experience and make the prototype more interactive. Additionally, I experimented with using glassmorphism as a design technique to create a visually appealing and modern interface.
However, throughout this process, my main focus remained on creating a user-centered design. I constantly reminded myself to consider the needs and goals of the users and ensure that the design solutions I proposed were tailored to meet their needs. I also conducted user research and testing to validate my design decisions and make sure that the final product was user-friendly and easy to navigate.
In the future, I plan to continue learning and exploring new design techniques and tools to improve my skills as a designer and create even more user-centric designs. I also hope to have more opportunities to conduct user research and testing to gain a deeper understanding of user needs and improve my ability to create effective and efficient solutions
