Improving the Editorial Experience for a Mobile Website

I redesigned Aspen Ideas Festival’s mobile website, producing a set of wireframes and a high-fidelity prototype to illustrate improvements based on findings from user research.

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.

Aspen Ideas Festival’s website is a hub for various media, showcasing recorded sessions, past speakers, podcast episodes, blog posts, and content related to current year’s conference. To serve its mission, the organization needs to continually engage new audiences with diverse interests. But without coherent navigation and content prioritization, it’s at risk of alienating potential attendees and speakers.

I was tasked with improving the Aspen Ideas Festival’s mobile website and produce concepts to illustrate the redesign. With less screen space to display content, the challenge was in prioritizing content that served both the organization’s mission and audience needs.

Timeline: 3 weeks

 

SOLUTION

How might the mobile website move from a repository of old content to engaging new audiences through strategic content reuse? How can the site inspire civically-minded people to explore rich conversations around their interests and encourage them to attend the festival?

The redesigned mobile website lets first-time visitors explore content that’s tailored to their needs and reasons for visiting. Click on the image below to open the prototype in your browser! It’s made with Sketch and Marvel. Otherwise here is the link: https://marvelapp.com/6b24f7g

 

 

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.

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

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

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.

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

To be more transparent about what the organization does (and why), the redesigned site makes this information more visible in its presentation and information architecture.  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. This challenge was no different.

What’s the Aim for Improving the Mobile Website?

Desk research revealed that 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.

As an organization, it maintains an archive of past festivals and promotes the upcoming festival through its website. I explored the desktop and mobile site to form a few hunches for user research.

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 discover focus areas, 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.

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.

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.

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

Overall, the mobile website needs better pacing and direction. An ideal experience would be for people to feel increasingly inspired by the content they see while allowing them to set the pace for how they want to explore the site.  More urgent information should be easily accessible.

To achieve the ideal experience…

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.

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.

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 expects 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 chunks (content models). This allowed me to take inventory of all content building blocks and understand what each one needed to accomplish.

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?
  • Which content types are we missing that we 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?

Setting Priorities with Content Strategy

At the same time, content types need to be defined and assembled in a way that supports both organizational goals and audiences’ needs. A content strategy outlines how content will be used to achieve this.

Goal: Attract new attendees to the Aspen Ideas Festival by presenting curated content that helps them identify topics they care most about and discover people like themselves who are working on the same issues.

Key Messages:

  • Premier public gathering of forward thinking people
  • Global, cross-disciplinary attendees that loves to go deep on an issue you care about
  • The breadth of topics covered is unmatched and is accessible through our recorded sessions

Defining Content Reuse

While I defined the attributes that made up each content type, it’s helpful to outline a high-level system to show how content types fit together – and see if/when relationships support the content strategy.

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

As an 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).

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.

Tailoring Content to User Journeys 

While I assembled content models, it was important to connect them to the right part of user journey. 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.

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 exercise revealed that people thought about the content in the way of past, present, and what they need to do right now.

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

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.

Wireframing Without Lorem Ipsum

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

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.

 

IMPLEMENTATION

Since design is a collaborative effort, I 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 the project had a time constraint of 3 weeks, I prioritized work based on business goals, first-time user needs, and effort/difficulty. This meant that not all pages could be redesigned nor finalized without stakeholder and technical input. This is especially true for phase 3 (designing content models), which needs more technical lift.

Rationale:

  1. Aspen Institute will not be releasing a mobile app for the event until spring/summer 2018 so the website needs to be tailored to the constraints of the mobile user.
  2. Simplifying the information architecture for the mobile site and optimizing page templates for mobile experience would also benefit the desktop site.
  3. By relating modular content independent of screen size, the site can prioritize the right content at the right time while supporting business priorities.

Assessing Technical, Business, and Organizational Constraints

For this redesign to achieve its aims, it needs to consider the constraints of CMS architecture, author and editorial workflows, and engineering resources. Ideally, I would have received input from marketing, engineering, and business stakeholders to set clear priorities and any functional requirements.

 

NEXT STEPS

  • Validate the necessary content types. 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