SXSW Website Header.jpg
 

OVERVIEW

Redesign a current feature and create a new feature that meets business and user needs.

 

In this two-week sprint, my team focused on analyzing the iOS app, and what best meets the needs of SXSW’s target audience. We went through the entire UX design process -- Empathize, Define, Ideate, Prototyping (Mid-Fi and Hi-Fi), Usability Testing, Iterations, and Next Steps.

We redesigned the filter function on this app and created a new 3-step quiz all to help users curate their SXSW experience.

My Role: UX Researcher; Content Strategist; Visual Designer

SXSW Website - App Screens.jpg
 

EMPATHIZE

In this step, we demonstrated and researched the business and user needs.

  • BUSINESS NEEDS

The SXSW Go App is used for festival attendees to view the schedule and exhibitions, read details about the hundreds of offerings and save events of interest.

 

Based on our research, the business developed this app to:

  1. Centralize festival details and information;

  2. Increase app downloads;

  3. Promote brand partnerships;

  4. Increase revenue from in-app ads; and,

  5. Enhance the festival experience of the attendee.

  • CURRENT REVIEWS

Reviews.jpg

Users give the app 3 stars.

 

We read the reviews and a resounding majority focused on the use of the filter function and the unsatisfactory changes to it that made their experience with the app and at the festival more frustrating.

Reviews.jpg
  • UI AUDIT

The filter function was not used for every listing.

UI Audit 1.jpg

The iOS & Android versions of the app used different elements like using the word "cancel" or "X".

UI Audit 2.jpg
  • COMPETITIVE ANALYSIS

Popular conference and festival apps all used an icon to signal users to save events of interest.

competitors.jpg

We also noted some similarities and differences in our feature analysis.

0 Feature Analysis.png
 
 
 

Our hypothesis based on research: 
We believe that by implementing a robust sorting, filtering, and organization functionality in the SXSW app, users will have an improved, optimized and personalized experience.

DEFINE

Using research findings, we identified insights user needs, patterns in a persona and opportunity areas.

 
  • USER INTERVIEWS

We spoke to 8 people from different backgrounds and they all said the same thing.

  1. They go to SXSW to network.

  2. They plan ahead.

  3. They want to know where the bathroom is.

That may seem simple, but it is usually the small things that can make a good experience great. We discovered more pain points during our user interviews and organized them in an affinity map.

  • AFFINITY MAPPING

We formed 11 groupings from the user interviews and helpful insights to inform our ideation.

  1. I went to network.

  2. I prefer to have things planned out ahead of time.

  3. I like to know where things are in relation to where I am.

  4. I wished I had utilized the app more.

  5. I like going to conferences with a variety of content.

  6. I want to know about associated/unofficial events.

  7. I prefer live performances over livesteaming.

  8. If an event to be worthwhile, I will return multiple times.

  9. I love discovering new music.

Group 1 Jam Board.png
Group 1 Jam Board (1).png
  • PERSONA

SXSW attracts so many different people so we developed multiple personas. For this case study, allow us to introduce you to Brittany.

Brittany.jpg
  • HOW MIGHT WE

We discussed the ways we can help Brittany find a yoga class at SXSW and save it to her schedule.

  1. How might we enable Brittany to utilize the app to find a wellness event?

  2. How might we give Brittany a means to personalize her schedule and save money?

  3. How might we provide Brittany with a way to discover related trending events

 
 
 

Our problem statement for this persona: 
Brittany needs a way to find a free yoga workshop
because she is tired from traveling long hours to SXSW and she’s budget-conscious.

Brittany would lo e.png
 
Brittany would love.png

IDEATE

We ideated toward a solution through multiple sketches and wireframes.

filter v2.jpg
quiz v2 -1.jpg
  • SKETCHING

The team went through rounds of sketching to get our ideas on paper.

They weren't perfect, but we mapped out some concepts based on our UI Audit, current app reviews, competitive analysis, and user interviews. Here are a few things that come up in the design studio.
 

  1. There are over a hundred exhibits. Let's put the number at the top of the list so the user is aware of their options.

  2. A card grid menu UI element is very popular on mobile apps. Visuals and large card buttons help users see the option and enough finger room to select the choice they really want.

  3. The filter function on the Schedule Page gave us all we needed to form the buttons on the quiz. Using the same information keeps copy close and will make developers happy.

MidFi - App Screens.jpg
  • MID-FI WIREFRAMES

We combined the best of our ideas and provided grayscale versions of our design.

In order to form the categories for the card grid, we facilitated an open card sorting exercise for the 118 exhibitions at the Wellness Expo. Twenty of 41 participants completed the study. It took the participants a median time of 13 mins and 52 secs to complete the study. Participants created a total of 136 categories, with a median of 7 categories each.

  1. Self-care

  2. Yoga

  3. Fitness

  4. Medicine/medical

  5. CBD

  6. Foods, and

  7. Counseling

  • MID-FI ITERATIONS

To save time and money, testing our mid-fidelity prototype was the best option. 

Four users worked through two tasks: (1) taking the 3-step curation quiz and (2) finding a yoga class using the new filters. They all gave us great insight to implement into the hi-fi version. We heard them and made some changes.

  1. Instead of using the arrow, we created a text button signaling the user to continue the quiz.

  2. We included a pagination element so the user knows the progress of the quiz.

  3. There were a lot of categories, so we chose the high-level labels and made them bigger.

  4. The filter icon was also confusing to them, so we changed it to a text label. (Similar to how iOS uses the word "cancel" instead of the "X" icon.

  5. They were confused by the star icon so we replaced it with a "heart" icon -- an industry-standard on mobile applications signifying favoriting or liking an option.

Midfi iteration.jpg
 
 
 

LETS ADD SOME COLOR

SXSW Website - App Screens.jpg

PROTOTYPE

We effectively narrowed down our solution by designing a clickable, full color prototype.

Ready to try it? Follow the instructions below to see how our features work.

NEW QUIZ FEATURE

  1. Select "Take the Quiz"

  2. Select "Future of Music." Next Step.

  3. Select "Meet Up." Next Step.

  4. Select "Music Publishing." Next Step.

  5. Congrats! You can now see Recommended and Popular Events based on your selections.

REDESIGNED FILTER FEATURE

  1. Select the menu icon.

  2. Select "Exhibitions."

  3. Select "Wellness Expo."

  4. Filter your options and select "Yoga."

  5. Like the "Funk It Wellness" event.

  6. Select the"Yoga with Adriene" event.

  7. Add it to your calendar.

  8. Congrats! You've found great events you love and curated your SXSW experience

 

TESTING

We implemented our design solution guided by direction from users and responded appropriatly to their valuable feedback.

  • HI-FI USABILITY TESTING

First, we tried unmoderated remote testing to gather as many users as possible.

Although we had 68 users test out the hi-fi prototype, we learned very quickly that this testing method was not helpful. Our tasks were very specific to the persona we created and not their personal preferences. Therefore, a majority of testers abandoned the exercise, which was not helpful for our purposes.

Hi-fi Testing.jpg

Then, we executed moderated remote testing and gathered more valuable feedback to take back to the design and development team.

Hi-fi 2.jpg
 

NEXT STEPS

We thought through some next steps based on our findings and vast research.

Next Step 1.jpg
next step 2.jpg
 

BONUS

I defined the design system for the SXSW Go App project because it was not publically available. Check out the Building Blocks, Pattern Library, and Style Guide information below.

DS 1 Building Blocks.jpg
DS 2 Pattern Library.jpg
DS 4 Style Guide.jpg