OVERVIEW
Increased usability by 68% with new quiz feature and redesigned filter function
In an end-to-end UX design sprint, our team designed a solution for the user's challenge with the filter function and the thousands of entries for SXSW events.
We tested our redesigned filter function on this app and created a new 3-step quiz with unmoderated and moderated usability tests of our clickable prototypes.
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 festival and save events of interest.
Based on our research, the business developed this app to:
-
Centralize festival details and information;
-
Increase app downloads;
-
Promote brand partnerships;
-
Increase revenue from in-app ads; and,
-
Enhance the festival experience of the attendee.
The challenge: If users used it, they were overwhelmed by the amount of events they had to review to curate their schedule.
CURRENT REVIEWS
Users give the current app 3 stars even though they like the in-person experience.
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.
UI AUDIT / EXPERT REVIEW
The filter function was not consistent for every listing.
The iOS & Android versions of the app used different elements
like using the word "cancel" or "X".
COMPETITIVE ANALYSIS
Top rated conference and festival apps all used an icon to signal users
to save events of interest. This is an UI standard in the industry.
We also noted some similarities and differences in our feature analysis.
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 were interested in speaking to SXSW attendees who went within the past 3 years. We found 8 people from different backgrounds -- musicians, journalists, students, vendors, speakers and industry executives. To our surprise when we questioned them about their experience with the app and the festival, they all said the same thing.
-
They go to SXSW to network.
-
They plan ahead.
-
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
After 8 interviews, we collected over 100 notes and organized it into 11 groupings. The top 3 helpful insights to inform our ideation are:
-
I went to network.
-
I prefer to have things planned out ahead of time.
-
I like to know where things are in relation to where I am.
.png)
THE PERSONA WE FOCUSED ON
SXSW attracts so many different people so we developed multiple personas. For this case study, allow us to introduce you to Brittany.
IDEATE
We ideated toward a solution through multiple sketches and wireframes.
SKETCHING IN DESIGN STUDIO
The team went through rounds of sketching to get our ideas on paper. 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.
-
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.
-
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.
-
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.
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 forming 7 groups. Those seven became the menu you see on the left screen.
HOW TESTING IMPACTED THE DESIGN
To save time and money, testing our mid-fidelity prototype with four of the attendees we interviewed. The top 3 insights we considered as we moved from mid-fi to hi-fi are:
-
We created a text button signaling the user to continue the quiz.
-
We included a pagination element so the user knows the progress of the quiz.
-
They were confused by the star icon so we replaced it with a "heart" icon.
LETS ADD SOME COLOR
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
-
Select "Take the Quiz"
-
Select "Future of Music." Next Step.
-
Select "Meet Up." Next Step.
-
Select "Music Publishing." Next Step.
-
Congrats! You can now see Recommended and Popular Events based on your selections.
REDESIGNED FILTER FEATURE
-
Select the menu icon.
-
Select "Exhibitions."
-
Select "Wellness Expo."
-
Filter your options and select "Yoga."
-
Like the "Funk It Wellness" event.
-
Select the"Yoga with Adriene" event.
-
Add it to your calendar.
-
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.
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.
Then, we executed moderated remote testing and gathered more valuable feedback to take back to the design and development team.
DESIGN SYSTEM
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.
BRING THE AGILE PROCESS TO YOUR VISION