Sundance Information Architecture Redesign

1. OVERVIEW

PROJECT DETAILS

Sundance Institute is a nonprofit that provides a space for artists from all over the world in film, theater, film composing, and digital media.

My task for this website was to improve the information architecture so that the content of the website is easy to follow for its users.

SOLUTION

I redesigned the Information architecture of the complete website experience of sundance institute.

Redesign Highlights

Intuitive and Fluent Navbar

Better user status visibility

Actionable labels and call to actions

Consistent and responsive design

Let's take a look at how we got here.

2. DISCOVERY

HEURISTIC EVALUATION

Before diving deep into the information architecture of the website I decided to perform a usability test by using Jakob Nielsen's 10 User Interface Design Heuristics.

Why:

no need of recruiting candidates and less time consuming

Get an overview of the websites user experience

detect minor issues that might go unnoticed during usability testing with users.

Some of the major opportunities that i discovered

missing current state or location

convoluted navigation and

The structure of the content is not consistent throughout the website

Text descriptions are too long and not scannable

CONTENT AUDIT

Now it was time to get my hands dirty. I performed a 3-week long content audit.

Initially, I got very intimidated by the crawl of the website which was 1400+ web pages that I need to analyze.
So I decided to filter the excel sheets and work on one section at a time. I also allowed a specific amount of time every day to manage to finish the audit within 3 weeks. Shortly after a week, I started finding patterns and structured pages which made the task less intimidating and also less time-consuming.

Why:

Analyze the scope of the website re-design.

Identify informations gaps between webpages.

Identify Opportunities for information architecture redesign.

Identify Content quality and its relevance.

Create an inventory of information available on website.

Challenges:

Due to a lack of website analytics data, the content audit was limited to manual evaluation

This is an academic project, so I did not have any opportunity to have meeting with the organization

I had to make a few assumptions regarding the goals and target audience of the websites.

The outcome of the analysis

Gaps in the contents intent

confusing navigation, inappropriate length and quality of content

Lack of information findability and flexibility to users

Old content

3. IDEATE

Now that we know the contents of the website, Let's get our hands dirty and ideate.

ORIGINAL SITEMAP

From my initial Heuristic evaluation, I understood that the navigation of the website was confusing and had misleading labels. So I created a sitemap of the current navigation to the website and found that it is very convoluted and can be optimized.

To begin, I needed to figure out how to approach the sitemap. I didn't have any documentation or user data to help me understand the website's goal and user needs. So I decided to take the bottom-up approach. Based on the information gained from the content audit, I created categories and subcategories and continued that to complete the sitemap of the website.

SITEMAP ITERATIONS

I iterated on my initial sitemaps to improve the navbar hierarchy after careful analysis of the content and website navigation by testing the initial site map with 5 other UX designers from the cohort. A common response I received was an overwhelmingly long list of options in the navbar, as well as vague labels.

4. WIREFRAMES & TESTING

INITIAL SKETCHES

I started sketching out wireframes on a notepad and then transferred then to a lo-fi wireframe on Microsoft Azure

Why:

Analyze the scope of the website re-design.

Identify informations gaps between webpages.

Identify Opportunities for information architecture redesign.

Identify Content quality and its relevance.

Create an inventory of information available on website.

IMPORTANT REDESIGN DESCISIONS

I started with redesigning the navbar and then approached individual sections of the navbar.

Old Navigation bar

The original website included a hover-based dropdown menu as well as an internal sidebar. Such sidebars place a cognitive burden on the user because they require the user to hover back on the navbar to see all of the options.
Also for better usability, Jakob's Usability Heuristic #6: Recognition rather than recall states that Information required to use the design (e.g. field labels or menu items) should be visible or easily retrievable when needed.

NEW NAVIGATION

As a result, I made the drop-down menu a static sidebar that is only visible on the current page. For example, in the LEARN & PARTICIPATE section of the website, the sidebar will be static as seen above.

6. FUTURE STEPS & LEARNINGS

What Next?

Create Design Guide and components I want to improve my ability to express design choices with the user in mind so that I can better convey my design decisions to myself, my mentor, and prospective recruiters.
Be insight- not process-driven. Despite weeks of research + development, my first version of this case study was full of unnecessary text at this stage instead of tying everything into the bigger question- “so how does this fit into the bigger picture”? Hence, I cut down the copy by more than 60% and focused on the major points in my project. Hence, going forward I believe focusing more on the insights will improve my storytelling abilities to others.
You didn’t fail- you just found 100 ways that didn’t work. From identifying faults in my UI to exposing more fundamental UX issues in my app, I'm grateful to have asked for input from my peers and mentor on a regular basis. Finally, I strived to have the app as good as possible, and I didn't let my own thinking keep me from evaluating if my own selections were genuinely best for the customer.