Austin Film Festival Website Redesign

A smoother registration experience

Type

UX / Information architecture

Duration

Sep. 2019 - Dec. 2019, 3 months

Team

Jiajun Dai / Qiu Han / Ningyue Shang

My Role

  • Conducted user research and competitive analysis to uncover the problem and generate insights.

  • Took charge of the wireframe and the HiFi prototype and verified the design through user testing.

Background

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. Visitors can view events detail, buy badges and plan their schedule on this website.

“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.”

​—— AFF product manager

Our client has long been receiving complaints about the awful experience in the registration of AFF, which cost them a lot on customer service. Thus, they want us to help visitors easily and directly register the festival.

屏幕快照 2020-01-16 下午5.26.45.png
屏幕快照 2020-01-16 下午5.32.22.png
屏幕快照 2020-01-16 下午5.32.54.png

Original interfaces for homepage, schedule, badge guidance

Besides, the current website visual design is hard to leave a deep impression on visitors and make AFF stand out from competitors. Our client hopes that we can also help them improve their website identity based on their culture.

 

Redesign Feature Overview

Schedule
Schedule

Badge
Badge

Homepage
Homepage

Schedule
Schedule

1/3

Help users register Austin Film Festival efficiently

1. Optimized the navigation bar with clear information architecture.

2. Design a visualized schedule based on different information types

3. Improve the badge purchase process by providing a clearer comparison

4. Build a film writers' website identity 

Process

Group 397.png

Research

Stakeholder Interview

It's confusing because there are a lot of different ways to go to a page. Even for me, it's still difficult to find something specific.

-- Product Manager

There are too many repetitive and unnecessary parts under the festival and conference section that might lead users to the wrong place.

-- Marketing

Understand senior users

Google Analytics

We leveraged Google Analytics to collect quantitative data. By doing this, we got a better understanding about how people were using AFF website in general, which helped us see a bigger picture of the experience. 

Page View

Schedule and badge guidance are the most frequently visited pages in the “Festival & Conference” section.

User Flow

Users always tend to return to the homepage in the whole interaction flow. It seems that the website lacks a clear hierarchy.

Content 

Users can't get important information quickly on the badge page and the schedule page. It seems the content is confusing and drives users away.

 

Contextual Observation & Interview

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 exploratory user testing. 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 that are suitable for your time and interests.

Task2:   Assume you are a screenwriter hoping to attend panels with your 4 colleagues, buy the most suitable badge.

Task3:   Check your own schedule to see which events you are attending.

Understand new users

Synthesize

Persona & Journey Map

Identify Redesign Challenges

During the whole journey, users keep suffering from the usability problems below, which we need to fix in the later design process.

Chaotic Information

Hierarchy

Repetitive and Excessive

Information

Insufficient Affordance

The overall design goal is to help users register Austin Film Festival efficiently.

To achieve the goal, we decide to prioritize the design tasks based on the scope and the importance.

1.  Re-organize the information architecture of the Film Festival section

2. Improve the efficiency and the affordance of the information, especially the badge and the schedule page

3. Redefine the visual identity of the website

Design & Iteration

- Redesign the Information Architecture -

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. 

Original Information Architecture

By walking through the website, we see there are many duplicated sections, which makes users confused about their situation. The Festival and Conference section (the blue frame) is scattered under different tabs. 

Card Sorting

We invited 6 users to do the card sorting, hoping to identify the pattern in how visitors expect to see the website content to be organized. 

What did users do in the card sorting?

  • Synthesize the overloaded content

  • Prioritize the features

  • Change the ambiguous names of the tabs

Content Strategy

We generated a clearer category, but that's not enough. We modify the content based on both user needs and business goals.

Problem

User

Too many repetitive and unnecessary parts

A lot of different way to go to a page

Business

Want users to register the film festival more

Promote their annual film festival

Solution

Delete the repetitive pages/sections based on card sorting results

Lead users to look for the info from the new global navigation bar and delete the third level menus

Add a direct link (banner) to the "Badge" page on the homepage

(Later link to "Full Schedule" based on user testing iterations)

Change the tab name from "Festival & Conference" to "2019AFF"

New Global Navigation

Group 400.png
 
 

- Improve the Efficiency and the Affordance of the Info -

Recap Heuristic Evaluation

Schedule HE
Schedule HE

Badge HE
Badge HE

Schedule HE
Schedule HE

1/2

Competitive Analysis

 gets good feedback

Schedule

The form of the schedule is determined by the volume of information and the type of events. 

Visualized forms attract users better.

A clear comparison chart can help users make better decisions.

Let users know the ticket policy at the beginning.

Badge

Information Consolidation 

Schedule (Filter)

As there are too many categories that users can not recognize all, we decided to simplify the filter. 

Type Filter

Only keep five categories based on filter frequency

Venue Filter

Group 30+ venues into 4 districts as users seldom filter specific venues

Before

After

Badge Filter

Users always go back and forth to check the schedule and the badges, so we add a new badge filter to show the corresponding schedule of each badge.

Badge (Guidance Table)

The original table is too long and chaotic. According to people's working memory, it's hard for us to remember more than five items at once. So we group these activities into 3 big categories.

Information Layout

After we confirm the information volume, we draw multiple sketches. However, our team members have different ideas about the layout so we decide to make some simple prototypes and invite our users to help us decide the one we will move forward with.

Full Schedule

Pictures and timelines help me better know about the events. Also, I can see time conflicts from the calendar.

Calendar

Badge 

It's clear for me to show the inclusions directly on the badge and it's easy to know the differences of each badge.

Group 402.png

Mi-Fi  Prototype & Iterations

We made middle-fidelity prototype for user testing because we thought it provides users enough information to finish the testing tasks. We conducted three rounds of iterations and improved our design correspondingly.

FULL SCHEDULE

Before

Version 2
Version 2

Version 1
Version 1

Version 2
Version 2

1/2

Iteration #1   Exchange the Position of Timeline and Venue

  • Users think it is inconvenient to go through the venues because they have to click the inconspicuous arrows many times. 

  • Users don't tend to scroll the venue horizontally.

Iteration #2   Stretch the Width of the Calendar

  • To show more content at once and make the filter more unified.

After

User Feedback

“ 24 hours a day. So I know I have to scroll more to view the whole day.

“ Scrolling vertically is much better than scrolling horizontally

Badge Guidance

Iteration #1   Make the Whole Card Clickable

  • Users think the button is confusing and hard to click. So we make the whole card clickable and noticing users by changing its color while hovering.

Iteration #2   Show Badges First

  • Client hopes to encourage visitors to buy badges more than passes

Before

2019AFF-Buy Badge (5).png

After

Version 3

 

- Improve the Website Identity -

" A writer's film festival, that may be the best idea ever. It's magical... It's the best film festival in the world."

--Lawrence Kasdan

We did several 2x2 matrixes to decide the style of our visual design. Our goal was to make it both simple and characteristic. As Austin Film Festival is the festival of screen writer, we decided to apply the vintage style with many elements like typewriter and serif font.

屏幕快照 2020-04-01 上午1.15.01.png

Inspiration

2x2 matrix

 

UI Kit

Final Design

Final Prototype

Schedule & My Schedule

Evaluation & Feedback

To evaluate whether we have achieved our goals mentioned in the research period, we invited 6 users to take the usability task again and created our metrics as criteria. The results are shown below.

I really enjoyed the overall experience with the prototype you designed. 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.

​—— From the client