Project Overview
Brief
The Austin Food & Wine Festival is an annual three-day event filled with delicious food, wine tasting, celebrity guest chefs, and more! Our brief for the assignment was to redesign the mobile experience for festival goers while they were at the festival as well as highlight their non-profit organization partnership.
Role
UX/UI Designer
Team
Kevin Chong, Ansel Fok
Duration
2-week design sprint (Jan 2021)
UX Methods
Heuristic Evaluations, C&C Analysis, User Surveys, User Interviews, Task Analysis, Persona, User Flows
Sketching, Wireframing, Usability Testing, Prototyping, Visual Design
Tools
Figma, Trello, Whimsical, Slack, Pen & Paper, Zoom
THE CHALLENGE
Dear customer support, where can I find info about your festival?
We conducted a heuristic evaluation and C&C analysis of the Austin Food & Wine Festival responsive website. We found that the website’s main problem was that it lacked festival details such as ticket descriptions, list of chefs and vendors, and event updates.
Initial Assumptions
Festival goers want to go to Austin Food & Wine Festival to try new foods and experience live events
They use the mobile website at the festival to check updates of the event
They do their research before buying an expensive festival ticket
USER RESEARCH
What’s the typical festival experience?
Our team sent out a screener survey to learn about the typical festival experience and we chose 4 users out of 24 who best fit our target user criteria. In our 1-on-1 user interviews, we wanted to learn about their most recent festival experience specifically their likes and dislikes. We then asked them to tell us what they did at the festival and how they chose to find the festival updates.
Task Analysis
Our 4 users completed three tasks in a brief walkthrough of the original website.
Find the age requirement for entry
Find details about the Austin Food & Wine Alliance
Find a list of the top restaurants and chefs
RESEARCH ANALYSIS
Key Insights
Be updated on social media
Everyone reported that they use social media (Instagram, Facebook, etc..) to buy festival tickets and be updated with any new information. They also used it to check the guest lineup and the schedule.
Avoid long lines and big crowds
No one enjoyed waiting in long lines and being packed into big crowds. They would’ve had a better time if those wait times were reduced.
Use an Event Map
Everyone wanted to easily get around the food festival without constantly getting lost. Examples included an event map or an app specifically made for the festival.
Reduce Planning Time
They wanted a way to reduce their planning time before going to the festival so they don’t have to spend lots of time thinking about where to go.
USER PERSONA
Meet the Fantastic Foodie
PROPOSED SOLUTION
Design a mobile festival experience and desktop ticket checkout
Based on our user research, we found that the Fantastic Foodie wants to decrease their planning time before the festival as well as bypass any lines while at the festival. We proposed that they will achieve their goals if they can create an itinerary before the festival then reserve food and/or wine at the festival. We also redesigned the ticket checkout experience on desktop because users expressed they primarily use the desktop website for it.
USER FLOWS
Think like the Fantastic Foodie
We identified 4 main tasks that the Fantastic Foodie would do before and during their festival experience.
IDEA BRAINSTORMING
How might we?
How might we make the important festival information (chefs/ vendors, event times, ticket description) easy to find?
How might we simplify the festival goers’ planning process?
How might we highlight the Austin Food & Wine Alliance?
SKETCHES
Visualizing user flows
We sketched the main four features we defined in our user flows. We prioritized the global navigation because it would increase navigation fluidity. I thought it was challenging to visualize how the user would use their itinerary. We decided that it would benefit the user if they could check into events and reserve food/ wine to bypass waiting lines.
FIRST ITERATION
Low Fidelity Wireframes
We created low fidelity wireframes on Figma for the purpose of the usability testing. We wanted our users to focus on the tasks rather than confuse them with visual design. In the process, I learned that designing the the hamburger pull-out menu rather than using a side pop-out menu would potentially decrease friction.
USABILITY TESTING + IMPROVEMENTS
Listening to our users
Our team tested our low fidelity prototype with 3 users to assess the validity of our designs and then we reiterated our designs based on their feedback.
How did users feel?
Confused on how to reserve a wine from the event map
Unclear about their itinerary and how to add a chef to it
Loved the easy ticket checkout process
What we changed…
Increased the fidelity of our wireframes
Removed the Itinerary from talents and pushed into the general navigation
Updated the filter section on the event map as a pull up menu
Reorganized the “All chefs” page so users could read different profiles and search for chefs
HIGH FIDELITY PROTOTYPE
Final prototype walkthrough
NEXT STEPS
Imagining the future
Work on UI- adhere to ios and android native app guidelines
Expand the map option- include other amenities like parking, restrooms, accessibility, etc..
Retest our visual designs- ensure that it complies with accessibility rules
Conduct more usability testings- try it on a sample group of Austin Wine & Food Festival attendees
What I learned…
Trust the process. During the sketching phase, I was a little worried because I wasn’t exactly sure how the final prototype was going to look like. I learned that being confident and trust that my design skills will bring me through the design phase. Ultimately, it turned out great.
Usability testing is key. I reminded myself to always put the user in the mind first and design for them. The feedback from the usability testing really helped my team reiterate and improve designs we may have otherwise overlooked. For example, we became aware of how hard it was to see the itinerary and create the user’s own schedule.
