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. It’s a matter of finding the right ways to supply the right answers for the people and contexts involved.

Overview of design process for redesigning the website.

What’s the Aim for Improving the Mobile Website?

The mission of Aspen Ideas Festival is to link some of the most forward thinkers in the world with civic-minded leaders from across many disciplines. To accomplish this, it must continually engage a broad audience who might not be familiar with the organization or its annual festival.

I prioritized audiences and decided to focus on 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. Because content organization lacks coherence, 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?

To narrow my focus, I conducted usability testing with 3 participants, beginning each session with a brief user interview. After I synthesized the results, a few broad themes emerged.

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 between promoting the organization and helping people become more familiar with the quality of people who attend and/or speak at Aspen Ideas Festival.

Turning Frustrations into Opportunities

It would benefit the organization if people can find inspiring content that moved them to attend while allowing people who already bought a pass to access more urgent information related to trip planning. Achieving the ideal experience, we would need to…

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

People expect content to meet them where they are instead of having to dig for the right content. Focus on providing 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.

The mobile website should simplify choices people encounter, especially if efficiency is a factor in completing certain tasks like looking up the festival schedule. Help people learn how the site is organized by offering relevant choices that makes sense where they are.

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

People need to feel assured about the kinds of people they will meet, but once they are, they want to evaluate how attending the Aspen Ideas Festival would benefit them. 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

By conducting a content inventory and audit, I identified different content types that could be assembled into larger content modules. This allowed me to take inventory of all content building blocks and understand what each one needed to accomplish.

Spreadsheets that show a content inventory and content audit, and content modeling for various content types on the website.

Although it’s no replacement for a well-defined content strategy, content modeling helps me think through questions like:

  • How many should we display a content type? Should we display the most popular, most recent, or something else?
  • Where should each content type automatically appear? Under what conditions?
  • How should content types be related to each other? How will it benefit the audience?
  • Are we missing any content types that we might need to create? Which objectives will it serve?
  • What metadata do we need to tag each content type to enable the system to be automated?

Defining Content Reuse

While I defined the attributes of each content type, I also 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.

Creating the content system map helped me visualize how content is reused throughout the site without the vanity of visual design. It formed the basis for wireframes and user flows while being able to quickly see a subset of content that matched users’ need.

Example: A content model for a topic category shows how content types could be assembled to display content users were looking for (video, audio, blog post) as well as promote content that supported organizational goals (2018 Aspen Ideas Festival).

Example of assembling content types into modules.

We can put the content model in a mobile wireframe to communicate the relative order of importance of each content type. I repeated this process to create page templates for the redesigned website.

Example of how content types are visually organized and expressed within a page template.

Tailoring Content to User Journeys 

Since one of the biggest frustrations was overwhelming number of navigation choices, I separated the user journey into distinct scenarios to highlight main (expected) actions.

  • 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 

The information people needed on the site was lost in the noise; too many relationships between information created a flat hierarchy which made it difficult to learn how the site was organized. 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. I documented my decisions on a sitemap, complete with content models that made up a page.

Sitemap of redesigned site for Aspen Ideas Festival.

Wireframing Without Lorem Ipsum

Designing the content models first helped me sketch wireframes that prioritized content that fulfilled both user needs and organizational goals.

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

Using real content in wireframes ensured that content presentation matched the mobile context and supported the content strategy. I also 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 design is a collaborative effort, I would need to bring relevant stakeholders into the process to learn about the audience, set clear priorities, and work through tough questions.

Prioritizing Design Work

Because of the time constraint (3 weeks), I prioritized work based on business goals, first-time user needs, and effort/difficulty. This is a hypothetical work plan but it forced me to consider the technical lift of accomplishing the design work.

Roadmap to improve Aspen Ideas Festival's website.

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. Ideally I would have done this already before designing so priorities are clear and I am aware of any constraints.
  • 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.
  • Design rest of the mobile website pages with an aim to translate them into desktop versions.

More Projects