Developing a mobile-first content strategy during a website redesign

Redesigned website for Aspen Ideas Festival displayed on mobile phone.

I redesigned Aspen Ideas Festival’s website to optimize for mobile content strategy, producing a set of wireframes and a high-fidelity prototype based on user research. This is a personal project.

CHALLENGE

Aspen Ideas Festival is the nation’s premier public gathering place for people across the globe and disciplines to engage in deep, inquisitive discussions around current challenges and issues. To serve its mission, the organization needs to continually engage new audiences with diverse interests.

How can the site inspire civically-minded people to explore rich conversations around issues they care about and encourage them to attend the annual ten-day event?

Challenge: Create a coherent navigation system that enables prospective attendees to discover new content while integrating purchasing opportunities for conference passes.

Timeline: 3 weeks

SOLUTION

The redesigned mobile website lets first-time visitors explore content that’s tailored to their needs and reasons for visiting. 

How might the mobile website move from a repository of content to engaging new audiences through strategic content reuse?

Old Website

Redesigned Website

Click on the image below to open the prototype in your browser. It’s made with Sketch and Marvel. Play around with the interactive prototype for Aspen Ideas Festival’s website!

High-fidelity interactive prototype for Aspen Ideas Festival's website on a mobile phone. Click through the image to interact with the prototype on Marvel.

New Information Architecture that Serves Relevant Content

Through simplified navigation, people can view a collection of recorded sessions that match their interests while helping them discover related content.

Redesigned mobile website for Aspen ideas Festival that shows a user flow for browsing recorded sessions.

Whether it’s home page or topic pages, people see what they want to see first, not everything at once.

Redesigned mobile website for Aspen ideas Festival that shows a user flow for browsing content by topic and year.

Since content is interrelated, different types of content can show up on different pages, depending on the user journey.

Redesigned mobile website for Aspen ideas Festival that shows a user flow for browsing past festival speakers.

During research, people used video and audio recordings of sessions to judge the quality of the conference. The new mobile site gives recorded sessions the space they deserve while helping people discover related content to inspire them to attend.

Reining in Information on Disparate Pages

Not only was navigation confusing, people had to look for similar information on different pages, which compounded the problem. For festival attendees, program and registration information is now easier to find without needing to check multiple pages.

Redesigned mobile website for Aspen ideas Festival that shows a user flow for learning about the current year's topics and sessions and registration information.

Timing is everything when people plan their travels. With the new site, attendees can reach hotel and travel content without digging through other information.

Redesigned mobile website for Aspen ideas Festival that shows a user flow for planning the trip to Aspen and navigating the city.

The new mobile website also incorporates organization’s branding to give it an updated look and feel.

DESIGN PROCESS

At its core, the UX process is a questions-asking-and-answering process.

Overview of design process for redesigning the website.

What’s the Aim for Improving the Mobile Website?

I prioritized the first-time attendee experience because they would benefit most from the redesign and it would make the most business impact.

The organization maintains an archive of past festivals and promotes the upcoming festival through its website.

Problem hypotheses:

  1. There is no sense of priorities on the site. Everything seem to have equal weight and therefore first-time visitor might find the site overwhelming to digest.
  2. Navigation takes a lot of guesswork. As a result, people unfamiliar with Aspen Ideas Festival can’t find what they need and feel that the site cumbersome to use.

What Are the Main Friction Points of the Mobile Website?

I conducted usability testing with 3 participants, beginning each session with a brief user interview.

Theme 1: Content Organization

People’s content needs change as the event date nears. The current mobile site isn’t organized to anticipate these needs.

Participant quotes from usability testing that describe pain points while planning to attend the conference. Content was spread out and wasn't organized intuitively.
Participant quotes from usability testing that describe pain points while planning to attend the conference. Important information on the page was hard to find.

Design imperative: Ensure content is mapped to the right part of the user journey.

Theme 2: Findable Content

People found it difficult to learn how the website is structured because it offered too many choices. Navigation didn’t align with their mental model of where they expected the content to be.

Participant quotes from usability testing that describe pain points while navigating the website. The labels and menu organization were confusing.
Participant quotes from usability testing that describe pain points while navigating the website. The taxonomy was ambiguous.

Design imperative: Offer clear and relevant choices for people to complete desired tasks/goals. 

Theme 3: Content Priorities

People valued information about the host organization’s motivations and values to evaluate whether the conference aligned with their beliefs. They used the session recordings to gauge its overall quality as this was one of the factors in buying a pass.

Participant quotes from usability testing that describe their content needs. Information about the organization – its purpose and beliefs – was a deciding factor in choosing to buy a conference pass.
Participant quotes from usability testing that describe their content needs. Videos of past speakers were a deciding factor in attending the conference. There were opportunities to integrate purchasing calls-to-action near session content.

Design imperative: Balance promoting the organization with helping people become more familiar with the quality of people who attend and speak at Aspen Ideas Festival.

Turning Frustrations into Opportunities

To orient web content to serve both people who are in the consideration stage and post-purchase stage, we need to…

1) Ensure content is mapped to the right part of the user journey.

Provide enough/right information to satisfy why they come to the site in the first place.

2) Offer clear choices for people to complete desired tasks and goals.

Help people learn how the site is organized by simplifying choices that makes sense where they are in the site.

3) Balance promoting the organization while helping people become more familiar with the concept of Aspen Ideas Festival.

Present content in a modular manner so the site could better prioritize what people want to see first on a smaller screen size.

Design Strategy 

1) Understand what content currently exists on the mobile website and where it is located.

Then evaluate the quality of content and identify distinct content types that would support user scenarios found during research.

2) Outline user scenarios discovered during research.

Design a content system that help people discover content they need but weren’t looking for, suited for a limited screen size.

3) Understand how people expect the site’s content to be organized.

Create deeper hierarchies to accommodate people who want to browse vs. are ready to purchase a pass vs. need to look up information.

Taking a Content-First Approach

I conducted a content inventory + audit to identify different content types that could be assembled into larger content modules.

Spreadsheets that show a content inventory and content audit, and content modeling for various content types on the website.
Top: content inventory + audit. Bottom: defining content types and their attributes. Right: finalizing content types and indexes.

This exercise helped me think through questions like:

  • How are content types related?
  • Are we missing any content types?
  • What metadata do we need to tag each content type to enable automation?

Defining Content Reuse

I outlined a high-level system to show how content types fit together.

Content system map that shows relationships between content types and demonstrates strategy for content reuse.

How I applied this in practice: assembling content types into larger blocks for a topic category.

Example of assembling content types into modules.
Each content type is labeled with an alphabetical letter.

Next, I created wireframes to communicate the relative order of importance of each content type.

Example of how content types are visually organized and expressed within a page template.
In this example, I prioritized media content (videos, blog posts, speaker highlights) to draw potential attendees deeper into the sales funnel. This satisfied users’ need to experience the value of the conference while getting familiar with the organization itself.

I repeated this process to create page templates for the new, mobile-friendly website.

Tailoring Content to User Journeys 

One of users’ biggest frustrations was the overwhelming number of navigation choices. The proposed user journey separated their experience into distinct use cases so the content could be tailored to their desired behavior.

  • Browse
  • Register
  • Attend

These pathways prioritized core content that addressed people’s changing needs depending on why they came to use the site in the first place and when.

Journey map for browsing content on the redesigned website for Aspen Ideas Festival.
Journey map for buying a conference pass on the redesigned website for Aspen Ideas Festival.
Journey map for figuring out travel and conference logistics on the redesigned website for Aspen Ideas Festival.

Organizing Content into Clear Categories 

Card sorting revealed that people thought about the content in the way of past, present, and what they need to do right now.

Card sorting during a user research session to redesign the information architecture of the new website.

Competitive analysis of 6 similar sites revealed a few organizational schemes: time-based, topic-based, and task-based.

Spreadsheet to conduct competitive analysis to understand the taxonomy of similar conference websites.

I blended the three schemas at different levels of hierarchy to allow people to discover information they need with more ease.

Sitemap of redesigned site for Aspen Ideas Festival.
Topic-based schema includes categories like environment and science. Time-based schema includes current and past conferences. Task-based schema organizes information related to travel and lodging.

Wireframing Without Lorem Ipsum

Content modeling helped me prioritize information that met both user needs and organizational goals during the wireframing stage.

Sketching page layouts and organization for the redesigned Aspen Idea Festival's website.

I consolidated duplicate content and edited and re-wrote some sections to increase readability on mobile devices.

Mid-fidelity wireframes to show user flow for browsing content on the redesigned website.
Mid-fidelity wireframes to show user flow for buying a conference pass on the redesigned website.
Mid-fidelity wireframes to show user flow for figuring out travel and lodging logistics in Aspen, Colorado, on the redesigned website.

IMPLEMENTATION

Since I had no stakeholder input during the design process, my next steps are to get their feedback and figure out what could be implemented in the short-term, medium-term, and long-term.

Prioritizing Design Work

Due to the time constraint, I prioritized work based on business goals, first-time user needs, and effort/difficulty.

Roadmap to improve Aspen Ideas Festival's website.
In a hypothetical work plan, I considered the technical lift and the low-hanging fruits of improving the site experience.

Next Steps

If I were to continue working on this project, I would like to:

  • Get input from stakeholders, especially from engineering, marketing, and business leaders.
  • Validate the necessary content types with stakeholders and users.
  • Run tree tests to see whether people understand the labels and structure of the website.
  • Gather CMS requirements and investigate authoring workflows.
  • Validate business rules and metadata applied to content systems.
  • Determine the breakpoints for the responsive website.

More Projects