Taco Lab
How might we improve the user’s accessibility to the “Menus” page on the mobile site?
The problem
This project focuses on resolving a significant accessibility issue present on the "Menus" page of the mobile website. Taco Lab has noticed that customers are not able to read their menu on the mobile version of the site. The text is extremely small and when a visitor tries to zoom in, the descriptions are extremely pixelated.
Users, particularly those who are visually impaired and depend on screen readers, encounter more difficulty in reading the menu option descriptions. Currently, users resort to zooming into images, relying on Alt Text, or utilizing a screen reader, all of which offer limited access to menu information.
Screen recording of current Taco Lab mobile site.
The solution
The overall solutions designed and incorporated to address the usability issues identified in the Taco Lab mobile "Menus" page UX project were:
-
Created a thumbnail card for individual menu items, listed on page, to give users an quick impression of each items as they scroll the page
-
Created a modal pop up for each menu item, triggered when user clicks on the menu item card, which includes:
-
A larger image of the menu item
-
A full description of item in larger text
-
All text and cards will be fully accessible by a screen reader
-
-
Added a truncated description card, with ellipsis, to tell users that more information is available if they click on it
Video of Taco Lab digital prototype in action - LINK TO FIGMA FILE
Read on to Explore the process
Overview
The project
I worked on an end-to-end, comprehensive UX project for the Taco Lab mobile website, which encompassed redesigning their menu page to be more accessible and readable for users.
my role
My role within the scope of the project included:
-
Conducting user experience research and analyzing data
-
Ideating possible solutions
-
Prototyping various solutions
-
Conducting usability testing to ensure optimal user interaction and satisfaction
"How might we improve the user’s accessibility to the “Menus” page on the mobile site?"
design process
tools
Skills
Timeline
-
Google Forms
-
Google Meet
-
Canva
-
Figma
-
Google Slides
-
User Research & Data Analysis
-
Mobile-First & User-Centric Design
-
Wireframing
-
Prototyping - Paper and Digital
-
Usability & Universal Design
-
Usability Testing
-
Presenting Data
​February 5th -
February 15th, 2024
Research
Hypothesis - “It is our belief that creating a more accessible menu on the mobile site of Taco Lab will be helpful for users to access the information about the menu options.
We believe this will increase sales from the mobile, as it will improve accessibility for all users.”
User Survey & Interviews
Through a combination of user surveys conducted via Google Forms and in-depth interviews, I gained valuable insights into the user experience of Taco Lab's mobile "Menus" page. The analysis of gathered data revealed compelling findings: an overwhelming 100% of respondents identified the menu page as "Very Difficult" to read for individuals with visual impairments, with an additional 83% expressing dissatisfaction with menu option clarity. These statistics underscored a critical accessibility issue that needed immediate attention.
​
Furthermore, participants voiced frustration and annoyance while navigating the "Menus" page. Examples of user statements included:
-
"I felt... annoyed when I couldn’t find out what was in dishes..."
-
"Frustrated that I didn't know what came on/with my order."
-
"I felt a little stupid. Couldn't read all the menu and couldn't find where to order online."
These sentiments echo the urgent need for enhancements to improve user experience and ensure inclusivity for all visitors to the Taco Lab website. These insights were instrumental in guiding subsequent design decisions aimed at addressing accessibility challenges and enhancing overall usability.
Results from user survey - Google Forms screenshots.
User Personas
To design Taco Lab's “Menus” page with a user-centric approach, I took a deep dive into understanding the audience. I crafted two user personas, drawing observations from data on the Rochester, MN area and digging into current Google reviews about Taco Lab.
​
The creation of user personas played a pivotal role in guiding the design process, especially in addressing accessibility concerns for individuals with visual impairments. Through detailed personas representing various segments of Taco Lab's target audience, I gained valuable insights into their unique needs, preferences, and challenges.
​
Throughout the design process, I continuously referred back to the personas to validate design choices and ensure alignment with user expectations. By prioritizing accessibility considerations based on the needs identified through personas, I was able to ideate solutions for a mobile menu page that not only met the needs of all users but also fostered a more inclusive and user-centered design approach.
Taco Lab User Personas
Journey Map
A journey map was crafted to process the user experience while interacting with the current "Menus" page on the Taco Lab mobile site. This helped me also envision how users with visual impairments would experience the mobile menu page.
By capturing the potential feelings and frustrations that align with their thoughts and actions throughout their experiences before, during and after using the mobile's "Menus" page, I could better understand the obstacles users might encounter and tailor possible design solutions to accommodate their needs effectively.
Taco Lab Journey Map - to better read the corresponding actions for each emotion, zoom into the table
Ideation
Throughout this project, my primary focus was on improving accessibility for visually impaired users by enhancing the visibility and usability of menu items on the mobile platform. Recognizing the importance of ensuring both text and images were easily accessible, I opted for a design approach that prioritized clarity and efficiency.
​
My UX design process was comprehensive and iterative, focusing on understanding user behavior and needs while striving for effective problem-solving and user-centered design solutions.
This process included:
-
Developing a user flow
-
Mapping out the site structure
-
Sketching a paper wireframe
-
Utilizing Figma to build wireframes
User Flow
I developed this user flow to gain a comprehensive understanding of the journey users undertake while navigating the "Menus" page. This approach enabled me to pinpoint both pain points and opportunities for enhancement, ensuring a smoother and more intuitive user experience.
Taco Lab User Flow - how a user could experience the "Menus" page of the mobile site
Site Map
Though altering the site's architecture fell outside the project's scope and didn't directly impact the problem statement, I generated a visual representation of the site map. This enabled me to grasp the organization of the current Taco Lab website comprehensively. Through this process, I gained a clear understanding of its layout and content hierarchy, facilitating better insights for subsequent design decisions.
Taco Lab Site Map
Wireframes
By initially creating low-fidelity wireframes on paper, I had the opportunity to sketch out my ideas and strategically plan the content hierarchy and importance in a low-impact manner. These paper wireframes allowed me to visualize and iterate on essential features, elements, and functionality of the "Menus" mobile page. They served as a foundational step in addressing the identified problem statement, drawing insights from user research, persona creation, and journey mapping.
​
Transitioning from paper sketches to high-fidelity digital wireframes, I began to envision how elements and potential features could take shape more concretely. This shift allowed for a deeper exploration of design possibilities while maintaining a user-centric approach.
​
In response to the gathered insights and pain points, I opted to enhance the visibility of items on the "Menus" page to better serve users, particularly those with visual impairments. This involved enlarging both the text and images associated with each item, aiming to improve readability and comprehension.
Rather than adhering to a traditional layout where each menu item (with all its details) is listed sequentially on the page, I chose to implement a modal pop-up card approach. This decision aimed to minimize vertical scrolling, thereby enhancing the overall user experience.
By leveraging modal pop-up cards, I maximized screen space utilization while providing users with the option to access more details about each menu item. This solution streamlined the user interface and offered a functional mechanism for enlarging text and images, ensuring accessibility without sacrificing visual appeal.
Paper (L) and Digital (R) Wireframes, showcasing the "Menus" page of the mobile site
prototyping
Design Comp
Throughout the UI design process, I prioritized a user-centered approach by ensuring consistency with the current Taco Lab website's look and feel. This involved utilizing the same content and visual elements to seamlessly integrate with the existing brand identity, fostering a sense of familiarity for users.
​
Additionally, it was crucial to design the mobile menu in a manner that aligned with common UX patterns and mobile menu styles. By incorporating a familiar thumbnail design, users could seamlessly access the information they needed. This approach not only enhanced usability but also facilitated a more intuitive browsing experience, ensuring that users could easily navigate the menu and find relevant content.
Ultimately, the design decisions made were driven by a commitment to prioritizing user needs and preferences, resulting in a cohesive and user-friendly mobile menu experience for Taco Lab customers.
Taco Lab Design Comp, showcasing the "Menus" page with a modal card pop-up
paper & digital Prototypes
I utilized paper prototypes as an initial testing method to evaluate concepts and ideas at an early stage, which allowed for rapid exploration and iteration, ensuring a solid framework and minimizing time and resource investment later on.
Transitioning to the development of a digital prototype with interactive features in Figma further enhanced our ability to simulate real user interactions. The digital iteration provided a more realistic representation of the redesigned "Menus" page for the Taco Lab mobile site, allowing us to gain deeper insights into usability and user experience.
Taco Lab Paper Prototype, demonstrating how a modal card pop-up could function
After building my initial V1 prototype, which entailed creating a distinct frame for each menu item, I began exploring simpler alternatives that could incorporate a "pop-up" function. After discovering a tutorial on Figma's overlay interaction, I integrated this feature into the V2 prototype.
This functionality streamlined the design process, offering flexibility in pop-up placement within the frame and enabling the implementation of an exit feature triggered by either tapping the "X" at the top-right corner or clicking outside the pop-up area.
Taco Lab Digital Prototype V2 - Figma workspace for V2 showcasing the "Menus" mobile page with modal card components (L) and the overlay cards in action (R)
User Testing
Process
Adhering to usability testing best practices, I organized a comprehensive usability testing process for my prototype, ensuring feedback collection and informed iteration. This process included:
-
Implementing remote usability testing via Google Meet for user convenience and accessibility.
-
Conducting structured interviews with users as they interacted with the prototype in Figma, enabling real-time feedback gathering.
-
Systematically collecting data during testing to capture observations, user comments, and performance metrics.
-
Utilizing collected data to inform iterative improvements for the next prototype iteration, prioritizing usability enhancements based on user feedback.
Feedback Cycle
Interpreting user feedback gathered from usability testing sessions was a crucial step in refining the design and addressing user pain points. When prioritizing feedback, I ensured that proposed solutions aligned with the project's scope and objectives.
Through this analysis, a key challenge emerged: users expressed difficulty in intuitively understanding how to access additional information about menu items. To tackle this issue, I prioritized feedback and proposed a solution of incorporating a link or icon on each menu item to prompt users to click for further details.
This solution was deemed necessary for the product to function effectively and it seemed to be a relatively quick and straightforward implementation. By integrating this solution, it not only addressed the initial user problem but also contributed to enhancing overall user experience and accessibility.
Iteration
In conducting non-destructive iterations based on the prioritized feedback, I incorporated a truncated description to each menu item, aiming to enhance user engagement and intuitiveness.
The addition of an ellipsis at the end of the description serves as a visual cue, prompting users to click on the menu item for further details. This action triggers the pop-up interaction, providing users with a larger context, including menu images and expanded descriptions, thereby improving the readability, accessibility and overall user experience of the Taco Lab mobile "Menus" page.
​
After implementing the solution based on user feedback, testing confirmed that the prototype's concept and functionality met expectations. With the successful validation of the solution, I concluded that the prototype was ready to launch!
Final Prototype
Video of Taco Lab digital prototype in action - LINK TO FIGMA FILE
Results
solutions
The overall solutions designed and incorporated to address the usability issues identified in the Taco Lab mobile "Menus" page UX project were:
-
Created a thumbnail card for individual menu items, listed on page, to give users an quick impression of each items as they scroll the page
-
Created a modal pop up for each menu item, triggered when user clicks on the menu item card, which includes:
-
A larger image of the menu item
-
A full description of item in larger text
-
All text and cards will be fully accessible by a screen reader
-
-
Added a truncated description card, with ellipsis, to tell users that more information is available if they click on it
​
After the latest iteration, I believe that the final (V3) prototype functions the way I hoped and solves the initial problem statement. In addition to launching these features onto the "Menus" page of the Taco Lab mobile site, I would propose the following next steps to Taco Lab for consideration:
-
Use a dropdown menu to create categories for their menu
-
Use this format for the desktop site - while the menu is easier to read on the desktop, the menu is a PDF image that is inaccessible for screen readers
-
An idea from one of our usability testing participants was to display more images of the menu items above the list of menu items to give more visuals to users about Taco Lab’s products
Lessons Learned
Throughout this project, I encountered and overcame various challenges, leading to valuable lessons learned. Overcoming the technical learning curve of implementing the overlay interactive feature in Figma expanded my skill set and deepened my understanding of design tools' capabilities. Additionally, I honed my abilities in conducting user interviews, recognizing the importance of empathy and active listening in discovering meaningful insights from participants. These experiences emphasized the necessity of continuous learning and adaptation in the dynamic field of UX design.
​
One notable challenge I faced was maintaining focus on the problem statement solutions. At one point, I was tempted to implement a dropdown menu function for users to select different menu categories, potentially enhancing browsing experience. However, I realized that this feature was beyond the defined problem statement scope. Although I initially included a dropdown element in the prototype, I opted to abandon it in favor of adhering to UX design solutions that directly addressed accessibility issues. This highlighted the importance of clearly defining project scope and identifying the minimum viable product (MVP) to avoid scope creep and maintain project focus.
View More Projects:
UI/UX Designer
© 2024 Sebrinia Welch