Improved user experience of ordering food journey on the chipotle.com website.
Maryam Habibi, Other UX/UI Designers
Project Lead, UX Designer/Researcher
Figma, Figjam, Maze, Usertesting.com
Redesigned the ordering experience based on expert evaluation, qualitative research, and quantitative user research.
To elevate Chipotle's online ordering experience to the levels of the in-store customer satisfaction that the brand is known for.
We talked to our client to better understand their main goal and pain points for this project. The goal was to get more volunteers to sign up and create an app for parents to have access to information regarding upcoming children’s events.
The first step for this project was a comparative and competitive analysis of features that the potential competitive website has. C&C analysis is to understand opportunities and standards.
Highlights/Achievements was something that other places are using
Large call to action so volunteer can sign up easily
Pizza tracker in forms are very common way to break up the form page
Using icons instead of writing the information so it’s easier to understand
As part of the UX research team we completed nine task analyses. We asked our users to go to Reading to Kids website and look for some information regarding their events and signing up to volunteer. Our users had hard time to navigating through the website and complete the signup from.
“There is a lot of duplicate information on the forms, I've found it really confusing to be honest”
Here are sign up to volunteer and form screens from Reading to Kids website.
After our interviews we applied affinity mapping method to the large amount of data that we gathered. We started by writing key insights on sticky notes to identify overarching trends and patterns. We grouped similar comments and insights in order to make sense from the data we got. By doing this we ended up with nine different categories. Here are some of our key findings.
Users were frustrated with the amount of information on the website
Users were not able to navigate through the website easily
Parents could not find the right information on the website
The sign up page was too long and discouraged volunteers to sign up
Based upon our affinity mapping and interviews we developed a persona, Gary Giver wants to get the app to sign up for volunteering and find some information regarding the upcoming event dates and list of books.
These research findings lead to two major problems: Users who want to volunteer feel overwhelmed with the amount of information on the website and users who experience difficulty signing up.
How might we present information and simplify the sign-up process so that people can give back to the community?
We prioritize our features based on our user’s goals. We mainly focused on features that are low effort and essential for our users such as Sign up to volunteer, Detailed school information, Schedule of books, Volunteer information.
Our user flow is for users to sign up to volunteer in our app and and after they get approve, find the closest school to volunteer at.
We conducted design studios for all screens within the app that would alleviate frustrations that users felt during our user research. Below are a few samples of what we created together.
We simplified the App to five tabs to make it easier for the user to navigate: A home page, Map page with each school info, schedule of books for each events, notification and profile page after you sign up. We will have a clear call to action on the home page for volunteers to sign up.
Based on some of the feedback that we got from our users, their current logo was outdated and did not feel very inviting. I redesigned it to a cleaner and simpler logo. Using different blue shades helped to give the logo more user-friendly look.
Low Fidelity Wireframing
We started digitizing our sketches from Design Studio to low fidelity wireframing.
We conducted three paper prototyping with target users. They did the testing and gave us some valuable feedback. Here are some of our changes based off of
Users didn’t wanted to sign up with email before entering the app
Reading to Kids mission statement should be on top of the page
We started to design our medium to high fidelity wireframes. We tested our prototype with five more users and made changes after each usability test based on the feedback we got. Here are some of the key findings from our usability test.
The icon for the book schedule was not clear for our users
The idea of monthly milestone was great to get inspire and volunteer more but users preferred to see it in their profile
The last page of our form screen was to review information but it wasn’t clear to our users on how to open each section
User’s current location wasn’t clear on the map screen
Hi Fidelity Wireframing
After all the changes we made on our wireframes, we finalized our high fidelity wireframes. Here are some of our high fidelity wireframes for Reading to Kids app.
Here is our clickable prototype
Testing and reiterating the language options
Exploring social features within the app such as chat
Developing the donation features for other users
Additional focus on integrating cross-media content