Austin Food and Wine Festival
Duration: 12 Days
Team: Shae, Joe, Kendra, and me
My Role: Comparative Analysis, UI Design, Usability Testing
Tool Box: Figma (Design and Prototyping) Miro (planning) pencil and paper
Objective:
To redesign a website to make it mobile responsive and include more information about the associated non-profit.
Challenge:
To produce a more informative experience to the local businesses the event serves, without distracting users from the glory of the event.
Solution:
A user centric solution that show promote the mission of the Austin Food and Wine Festival
Describe your image
Describe your image
The Process
![research, black and gold[Converted].png](https://static.wixstatic.com/media/56f0d2_308eb8496d624f5e97b17efe9959b0a6~mv2.png/v1/crop/x_110,y_132,w_769,h_709/fill/w_140,h_129,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/research%2C%20black%20and%20gold%5BConverted%5D.png)
User Interviews and Research
Planning and Creating the Design
Usability Tests and Iterations
![research, black and gold[Converted].png](https://static.wixstatic.com/media/56f0d2_308eb8496d624f5e97b17efe9959b0a6~mv2.png/v1/fill/w_103,h_103,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/research%2C%20black%20and%20gold%5BConverted%5D.png)
User Interviews and Research
1. A Review of Auston Food and Wine Festival
The first phase we approached as a team, was a thorough review of the current website to find the areas that needed the most improvement. I noticed the design felt like an afterthought; elements were small, pictures were awkwardly cropped, and the home page had too much dead space (F1). When switching over to the mobile site, we noticed that the image of Austin's skyline was actually a picture of the festival with the skyline behind it but on the desktop the festival was cropped out. The logo is hidden in the top left corner and is difficult to tap. Many of their call to actions are too small for fingers (F2)
F1. Desktop
-picture fades out before seeing the festival
-awkward spacing between video and ticket button
-confusing page names
F2. Mobile
-logo is too small
-more awkward spacing
-info page is just a solid wall of text that appears to be an endless scroll at first
-banner image still fades awkwardly
2. Exploring Competing Events
I compared and analyzed the websites of other events happening in Austin, while another team member took a look at larger national events. I immediately caught that while the original site did have a lot of the information available, however it wasn’t easily accessible. Information such as; directions, venders, and ticket options were mislabeled, buried in text, or hidden in an area that you wouldn’t first consider checking. Other event sites included festival maps on their mobile site so attendees could physically navigate the festival grounds (F3).
F3. High Sierra Festival
-ability to download to view offline
-map is designed to match feel of the website
-"home" is placed in a weird spot on navigation bar
3. Identifying the Problems, and Planning Solutions
Taking what we learned through user interviews. We confirmed that navigation was the key issue that needed to be addressed, users never watched the video on the homepage, and the naming conventions confused users. We created the persona for Timothy Pierce, a 32 year-old, self-professed "foodie", who enjoyed trying new food and learning culinary techniques. Timothy was created as a way to synthesize our users goals and frustrations while building empathy.
Goals
-want to know who is showing off their food
-what events are happening during the festival
-to know where there favorite vendors or shows will be
Frustrations
-spending too much time looking for information
-ticket prices are hidden and information about options are scattered.
-uncertainty about general event details
4. Creating the New Design:
While half of the team started constructing the navigation and our low fidelity wireframes, I worked with another team member on the visual design of our elements and components. I focused on creating intuitive icons and call to actions that people would immediately recognize. I felt the navigation bar needed help so I placed the logo in the center increasing its real estate allowing the user to know they are on the right site. To replace the awkwardly cropped photo of the event and Austin, I used the city skyline to create a pleasant graphic for the background of the website.
Background Design
- Simple background design inspired from photos of the festival
- Colors reflect the summer sky above the festival
- Cityscape depicts view of downtown Austin from park
5. Billing Information:
Finding information on tickets and ticket prices was one of the bigger pain points we discovered in our research. Tickets were organized into three packages, but the information on what was included in each package was spread out of the details page. To see pricing you had to leave the site for an external ticketing service.
Calling upon inspiration from gaming websites, I reworked the way the ticketing information was displayed. I designed a graph which immediately allowed the users to know what they get with each option and how much they cost. I decided to give the All-In package center placement and show what the other options are missing to encourage users to make a purchase.
Ticketing Display
- Ticket pricing information readily accessible
- Highlighting preferred ticket packages
- Alternative packages still visible but greyed
Hamburger Menu
-Robust menu
-Navigates to key areas mentioned in the interviews
-Social media links are easily accessible
6. Navigation Menus
For the mobile design we wanted to keep everything consistent. With less available space I decided to place all the navigation into a hamburger menu. Our research showed us that users mostly use the mobile site while they are at the festival and would want easy navigation. I added more options to allow users to quickly find exactly the information they need. I gave priority to options the users at the festival would want to see first while navigating the festival.
Trying to design an attractive and robust hamburger menu took a few iterations. After reviewing some other mobile sites for inspiration I opted to organize the destinations into a few categories, include social media links at the bottom, and keep the menu black and white.
7. Finding a Place for Partners
The final step of our goal was keeping users informed about the parent company Austin Food and Wine Alliance. The organization wanted the users to be aware of what they do and provide a link to their website.
Our first iteration had a dedicated page with a link in our top navigation. The name was so long we opted for shortening it Alliance or AFWA. However both names lead to confusion from the users. Olivia, one of our testers said that she was confused about the relationship between the alliance and the festival.
In later iterations I experimented with placing the Alliance in the information section, on the home page, or adding the link to the bottom navigation. Users had a hard time navigating to it, or felt the page was too distracting from their goals.
My solution was to put all of the sponsors on the same page, place the Alliance at the top of this with a brief blurb about who they are and their relationship to the Festival. Users can follow the link to the Alliance's website if they want to know more.
View the Prototypes:
User Feedback and Changes :
A teammate and I conducted usability tests. Based on the feedback from our test users we corrected some inconsistencies in our designs, adjusted navigation titles, and standardized the button size. I compartmentalized the festival information so not to overwhelm the users, and allow them to find the exact information they were seeking.