Austin Film Festival Website Redesign
A smoother registration experience
OVERVIEW
Austinfilmfestival.com is the official website of Austin Film Festival (AFF), mainly serving as a platform for the public to register the annual Film Festival and the professional Writers Conference. In addition to that, it provides other features, such as playwriting competitions and summer camps. However our client has long been receiving complaints about awful usability of the website and has to maintain their service by increasing labor costs. Therefore we did research to find out problems and redesigned the core section “FESTIVAL & CONFERENCE” of the website to bring a smoother registration experience.
MY ROLE
-
Led user research and usability test regarding Google Analysis and user interview. And conducted competitive analysis and user testing for product iteration.
-
Created sketches, wireframes, lead visual design and made interactive prototype to present the outcome.
-
Conducted 3 rounds of usability testing to refine product design
Client
Austin Film Festival
TOOLS / DURATION / TEAM
-
Pen + Paper, Figma, Miro, AI, AE
-
Duration: 3 months
-
Norah Shang, Jiajun Dai, Han Qiu
PROBLEMS & OUTCOME
According to the client, they often receive complainants from users, especially those who plan to attend the festival, stating that they have difficulty getting access to the information and features they need. Thus, the client wanted us to help them find out problems in the most important “FESTIVAL & CONFERENCE” section and improve user experience. Besides, our client also hope to improve visual design and make AFF stand out from competitors because of the lack of brand identity.
“
Our web visitors complain that finding something specific is difficult on our website. And there are so many things that are unnecessary and take them to the wrong place.
It would be better if our website has more identity. Now it looks very generic.
--From Market Manager
“
Original interfaces for homepage, full schedule, badge guidance
Facing these problems, we redesigned AFF website, bringing a smoother registration experience to users and enhancing its public profile by integrating it with the culture and vibe of AFF.
Redeign interfaces for homepage, full schedule, badge guidance
01
IDENTIFYING PROBLEMS
Time is limited for us, so the key point of our research is to find out most important problems.First, we looked carefully into the Google analytics report of the website to get a broad sense of where the problems lie and how severe they are. We also talked to manager and staff from the company's and to better understand the data. After that, we conducted usability testing with our users, making them walk through the process of how they learn about festival events and registrate for the festival, in order to learn more about what problems they had and why these problems exist.
What is Festival & Conference
Where & How
Learning from Data
At the beginning, I leveraged Google Analytics to collect quantitative data. By doing this, I got a better understanding about how people were using AFF website in general, which helped me see a bigger picture of the experience. When I combined results from usability testing and data, I found out the problems I should focus on for the redesign.
Analyzed by Jiajun & me
_.png)
Takeaway
# Drilldown
# User Flow
# Page View
Schedule and badge guidance are the most frequently visited pages in the “Festival & Conference” section.
Users always tend to return to the homepage in the whole interaction flow. The navigation might needs a clearer hierarchy.
The schedule page and the badge guidance page contain important information but their content is confusing and drive users away.
What & Why
Learning from users
Based on the client’s needs and the results of google analytics, our redesign would focus on the “FESTIVAL & CONFERENCE” section, especially the serious problems of badge and schedule related webpages. Therefore, we made research plan and wrote test scripts related to our redesign scope.
Since AFF website is for the general public, all those interested in movies and film festivals will be our target users. We conducted 8 sets of observations and interviews. First, in order to observe how users interact with the original “FESTIVAL & CONFERENCE” section, we asked participants to do three related tasks on the website. Then we interviewed them what they were thinking about in each step of the task, and the reasons for their specific behaviors.
-
Task1: Explore the website to learn about events which are suitable for your time and interests.
-
Task2: Assume you are a screenwriter hoping to attend panels with your 4 colleague, buy the most suitable badge.
-
Task3: Check your own schedule to see which events you are attending.
Testing Insights
“
“
“
“
“
“
“
“
“
“
“
“
02
SYNTHESIZING FINDINGS
Personas & User Journeys
I synthesized the responses from the user testings and survey. With these evidence, I developed personas and a user journey map. I defined our target users as a college student major in screenwriting, hoping to join 2019 AFF and is especially interested in film conferences. Then I concluded pain points from his user journey.
Who Are We Design for
Drafted by Jiajun
What are the Pain Points
Research Output
Wrap-up: Key Takeaways
Shown below is a summary of the important insights from former research and analysis. Remaining them in my mind all the way down, I made much effort to synthesize user problems and associate my design decisions to these implications. I prioritize the goals based on severity of problem.
User / Client Problems
Get lost because of chaotic navigation and information hierarchy
Can't get what they want quickly for inefficient information display
Inproper way of using features/ functions because of insufficient affordance in interaction.
Lack of brand identity
Redesign Goals
Adjust the information architecture to make
the website's structure clearer and in consistent with users' mental model
1
Simplify redandunt information and use more efficient structure to present information
2
Improve the affordance and ease-of-use to establish a more fluent experience.
3
Improve visual design and develop its unique style.
4
03
Design
Redesign Goal #1
How might We Make Information Architecture Clearer
The most urgent problem of AFF website is the chaotic information architecture since that all of the participants get confused by the website's navigation and cannot reach their target webpages. So I visualized the current IA and marked the duplicated sections in yellow. Let’s see what is going on.
Current IA
Dreafted by Han
It shows that there are many duplicated sections in and we are actually using not much content. I selected tabs related to FESTIVAL & CONFERENCE with blue frame. Then our tasks comes to:
-
Synthesize overloaded content
-
Sort the content and prioritize top features / functions
-
Change the confusing / ambiguous names of the tabs
Card Sorting
We invited the previous group of panticipants to do card sorting, hoping to identify patterns in how visitors expect to see the website content to be organized. After this step, we verified the new global navigation bar.
We changed the name of the tab ‘Festival& Conference’ to '2019 AFF', as the most important part of the website. There are five sections in the revised IA which are ‘About’, ‘2019 AFF’, ‘Competition', 'Summer Camp' and ‘News & Events’. We combined ‘What We Do’ and ‘Buy’ into the five section as they have lots of duplicated content.
New IA
Then we got our new navigation bar. We refined and detailed the user flow of registering for ann film festival. There are three basic and essential tasks in a registration process —— view general information, check schedule and compare badges. From previous research we knew that checking schedule and comparing badges are relatively troublesome and confusing, so we might put more effort into these two sections.
User Flow
Redesign Goal #2
How Might We Arrange Information Efficiently
Our research data shows the average time for our users to view the specific webpages is relatively long, and there are high quit rates on the these webpages, which means information is not conveyed to users in an efficient and effective way. I was thinking that for each feature, we might have different choices for information organization based on the type and volume of content. Therefore I analyzed several well-known festival websites to compare effects of different page structures and forms for different features. I hightlighted the forms which got particularly good feedback.
Competitive Analysis
Analyzed by me
Takeaway
Double navigation is clearer to use when there are too many tabs and frequent jump between tabs.
Navigation
Introduction page should include
less distracting information
or users might be scared away.
Introduction
Schedule
The form of the schedule is determined by the volume of information and the type of events, most user prefer visualized forms.
Users hope all options to be shown side by side, and the inclusions and privileges of each badge should be classified for easy comparison.
Badge Comparison
Information Structuere of
Badge Guidance
I organized essential elements of this page to explore possible layouts based on the takeaway from competitive analysis. Here I met a challenge: Every possibility seems like a potential solution, so how could we choose the right one to start with? I involved our participants into the discussion, showed all the wireframes to them, and listened to what they thought about it.
From the discussions we learned that when they want to buy a ticket, they will pay more attention to a specific badge, so the badges need to be separate parts with explicit information on it. Also, when people compare choices they are more comfortable to move their eyes left-and-right. According to the finding, I decided to move forward with the horizontal-column layout .
The one I decided to
move forward with
Designed by me
Information Structuere of
Full Schedule
The same challenge with the Full Schedule page. From the discussions we learned that they care about whether the time of their target events conflict with each other, so it is useful to visualize timeline and venues. Also, they thought pictures are useful when they roughly learn about an art/media event. So, I decided to move forward with the Calendar layout .
The one I decided to
move forward with
Card
List
Calendar
Attractive and neat
Highest utilization of page space
Visualize timeline and place,
Prevent time conflicts of events
Place
Time
Designed by me
Information Consolidation
wireframe
I created a wireframe based on the user flow above, including the most important pages in the '2019 AFF' section.
I just show the primary navigation bar on homepage. And in case users have difficulty find the badge page, we put a CTA button for pruchasing on homepage.
I created a floated checkout box on this detailed page to let users easily see the prices for different amount add-ons and discounts. And there is explanation for policies and includings on the left side.
I changed the General Information section of 2019 AFF from full of texts, news, CTA buttons and quick portals to be a category of three kind of events of the festival, to let users have a general idea of what is conference and party.
We also sorted all the factors of the events and created a clearer filter for the schedule. We hope to use color to distinguish each kind of events.
Homepage
Buy Badge
Badge Detail
Checkout
General Information
Event Introduction
Full Schedule
Filtered Schedule
My Schedule
According to users' mental model and the huge volume of events, we split the schedule into eight days of event.
Dreafted by me & Han
04
Test & Iterate
Redesign Goal #3
How Might We Improve Affordance and Ease-of-use
With the wireframe, conducted a rapid testing session. Based on the users' words, I made two rounds of iterations in order to improve the . I listed 3 important ones below and other changes are reflected in hi-fi interfaces.
Full Schedule
Iteration #1 More Effective Layout
Iteration #2 Make Filters More Understandable
-
Inconvenient to go through the venues - they have to click the inconspicuous arrows many times.
-
Don’t need to show time and location again on card
-
Filters should be placed in the same place and not scattered
Dreafted by me
Badge Guidance
Iteration #1 Make It Easier to Read
-
Too much information and lack visual focus
-
Don't understand they can click ’buy‘ to view details
-
Don’t know the meaning of the dates
Iteration #2 Client’s Strategy
-
Hope to encourage visitors buy advanced badges
Dreafted by me & Han
My Schedule
Iteration #1 Enhance Proper Interaction Affordance
-
Didn’t know the filters and date selectors are clickable.
-
Thought the venues are clickable
Iteration #2 Show more detailed information on each
card of 'My Schedule'
-
Need to know the exact starting and ending time of each event
-
Don’t have to click all the dates to go through ‘My Schedule’
Dreafted by Han
Badge Detail
Iteration #1 Make the Discount Rule Clearer
-
It is not clear that the student discount will be applied for one badge or for total
-
Don’t know if they can apply the discount and the coupon at the same time or not
Iteration #2 Strengthen the Correlation Between
Badge and Schedule
-
Hope to view the corresponding schedule of each badge but not clear where to go
Dreafted by me
Homepage & Intro Page
Iteration #1 Quick Portal to ‘Full Schedule’
-
Users hope to learn more about the schedule on homepage, but don’t know where to go.
Iteration #2 Improve the Wording
-
The meaning of the button ‘Register Now’ is ambiguous. (join now)
Dreafted by Han
Redesign Goal #4
How Might We Give It A Suitable Visual Style
As a redesign project, it is important for us to make the visual style of AFF website in consistent with its public profile, and, at the same time maintain the original style or operating behavior of exsisting users.
We induced the art style which aff uses in their media materials (Ads, posters,and other materials on social media), we found that black and gold is the primary color of AFF. Also, as a festival especially for screenwriters, former designers apply a lot of vintage elements such as typewriter and serif font. We made our visual guide based on these findings.
Hifi Prototype
Dreafted by me & Han
Please hover over the pictures to see the comparison of initial version of website.
Homepage -
Use big background image to enhance AFF's public profile.
Click anywhere to jump to 2019 AFF introduction page. Quick portal to schedule.
Badge Guidance -
Use the style of old-time film ticket to create atmosphere of the badges.
Place film passes below other badges as our client hope to promote the more advanced badges.
Badge Detail -
Designed the checkbox to make the price clearer for who are confused about add-ons and discounts.
Make it clear that one add-on is for one ticket, and different discounts cannot be applied on the same ticket.
CTA button to guide users to schedule page to see the accessible events for this specific badge.
AFF Introduction -
A clean introduction page which tells first-time visitors the three different kinds of events of the annual festival
Full schedule -
A horizontally-scrolled timetable. With the two axis being 'time' and 'venue', we can prevent time conflict in planning personal schedule.
The timeline will start from when the first event of this day is held.
If the user filter date and venue area at the same time, the timetable will be able to be shown witnin 1.5 screen. Use color to distinguish different type of events
My schedule -
Abandon all the filters of my schedule, showing the schedule in one page.
Detail the event time on the card.
05
Evaluation & Reflection
Evaluation
Conducted by me & Jiajun
To evaluate whether we have achieved our goals mentioned in the research period, we take the task of 'choose and buy suitable badge' again, and created our metrics as a criteria. The results are shown below.
(0.24)
(2:35m)
(89)
Client Feedback
“
It is quite user-friendly and highly feasible. I also love the visual design, which really helps build a strong brand identity for us. We actually plan to revamp our website this year. I think we can definitely learn a lot from the problems you identified and the solutions provided.
Reflection
It is important to take all stakeholder's requirements into consideration.
Though we always emphasized on the 'user-centered' principle in UX design, it is important for us to consider all stakeholder's requirements in the real situation. And sometimes that makes a total difference in making design options. For example when we design the order of badge and passes, it makes sense to put the most basic passes at the top of the list, from a user's mental model. While from the perspective of our client, they hope to boost the sales of advanced badges, so we finally decided to put the cheapest passes at the bottom.
Get insights from data collected by advanced tools.
In the age of data-driven, we have more access to advanced tools which can provide us accurate and detailed dayta about user bahaviour. In this project I used GoogleAnalytics to pre-view the problems and pain points of AFF website. It is a more efficient way of explore 'where the problem lies', but we should also do tests and research on users to find 'what caused these problems'.
Think about accessibility. Design for more people.
One significant feature of our redesign is that we use color to help users understand different categories of events or badges. However, for people with visual impairment, for example colorblind, they will not feel much better as we didn't use colors with strong contrast. In the next step, I will think more about accessibility and find better ways of distinguish different categories.