Frame 86.png

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

“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 awful experience in the registration of Austin Film Festival. They have to maintain their service by increasing labor costs. Thus, they want us to help them find out usability problems and improve user experience.

屏幕快照 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 brand identity.

Process

Research

Google Analytics

At the beginning, 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 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.

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

Synthesize

Persona & Journey Map

Identify Redesign Goals

User/Client Problems

1. Get lost because of chaotic navigation and information hierarchy

2. Can't get what they want quickly for inefficient information display

3. Improper way of using features/ functions because of insufficient affordance in interaction.

4. Lack of brand identity 

Redesign Challenge

1. Adjust the information architecture to make

the website's structure clearer and in consistent with users' mental model

2. Synthesize redundant information and use more efficient way to present information

3. Improve the affordance and ease-of-use to establish a more fluent experience.

4. Improve visual design and develop its unique style.

Ideation

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. 

Original Information Architecture

By walking through the website, we see there are many duplicated sections, which makes users confuse about their situation. The most important part, Festival and Conference (the blue frame), is also scattered under different tabs. Thus, we want to adjust the current information architecture. Our goal is to synthesize overloaded content, to sort the content and prioritize top features / functions and to change the confusing / ambiguous names of the tabs.

We invited the previous group of participants to do CARD SORTING hoping to identify patterns in how visitors expect to see the website content to be organized. 

We got a more logical category. Based on the result, we renamed some of the tabs and re-arrange the first-level navigation bar. But, due to the time constraint of this project, we only designed the sub-menu under the Festival and Conference part. 

New Information Architecture

Based on the new information architecture, we created the new user flow under 2019 Austin Film Festival part. The user flow help us know the missions in the third level of the website.

User Flow

The filter menus are very long and chaotic. According to people's working memory, it's hard for us to remember more than five items at once. By asking users' and client's advice, we grouped items by different categories, which helped users find the information they need more quickly.

Badge Inclusions

Events Filter

Information Strategy

Problem

User

Too many repetitive and unnecessary parts

A lot of different way to go to a page

Business

Want users to register 2019 AFF more

Solution

Each page only appears under one tab

Lead users to find info from the main navigation bar

Delete extra entrances under other tabs

Promote the annual film festival

Change the tab name from Festival & Conference to 2019AFF

How Might We Present Information Efficiently?

Users can't quickly get the information they need on some specific pages because of the bad information structure. We thought maybe we could get some inspirations from other competitive websites by comparing the speed and the feelings of finding the same information. 

Competitive Analysis

 gets good feedback

Takeaways

1. Double navigation is clearer to use when there are too many tabs and frequent jump between tabs.

2. Introduction page should include less distracting information or users might be scared away.

3. The form of the schedule is determined by the volume of information and the type of events, visualized forms attract users better.

4. It's nice to have all options showing side by side, and the inclusions and privileges of each badge should be classified for easy comparison.

Sketches

Then, our team gathered together and sketched multiple solutions based on the takeaways from the competitive analysis. Our goal was to show the  information in an efficient and effective way but it seemed each idea can be a possible solution.

Information Layouts

We decided to involve our users into the discussion. We made a very quick prototype and asked them to do the same task three times. We considered both of the users' feelings and the information volume and decided the one we want to move forward with.

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.

Separate Ticket

Schedule

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

Calendar

 

Design Iteration

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 two rounds of iterations and improved our design correspondingly.

Version 3

HOMEPAGE

Iteration #1   Quick Portal to ‘Full Schedule’

  • Users hope to know AFF schedule at the beginning,  instead of buying badges. 

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 hope to encourage visitors buy badges more than passes

Version 3

Version 3

BADGE DETAIL

Iteration #1   Strengthen the Correlation Between

                       Badge and Schedule

  • Hope to view the corresponding schedule of each badge but not clear where to go so we directly add a link on the badge detail page.

Iteration #2   Make the Discount Rule Clearer

Version 3

Version 3

Version 3

FULL SCHEDULE

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 but they do to the timeline because we all know a day has 24 hours.

Iteration #2   Stretch the Width of the Calendar

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

MY SCHEDULE

Iteration #1   Differentiate My Schedule and Full

                       Schedule

  • Users are easily confused about their situations .

  • The normal calendar is more in line with the user's mental model.

How Might We Improve Company 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.

Inspiration

2x2 matrix

Final Design

Evaluation

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.