RIDER MAGAZINE

Redesigning ridermagazine.com to provide online readers with a modern, touring-inspired, look with a simplified layout and a restructured site map which facilitates easier navigation for a more engaging user experience.

Project Overview

The Problem

Rider Magazine is the largest all-brand motorcycle touring magazine in the US since 1974. However, their current website remains outdated, non-responsive and does not generate as much traffic as their physical subscription.

The Solution

Restructure the Information Architecture of ridermagazine.com for easy recognition and intuitive navigation. Give the site a modern make-over and update user interface to attract a younger audience base. Make the website mobile responsive.

My Role

UX Research | Strategy

How We Got There


ridermagazine.com

Discovering the Rider Brand

Designing for Rider magazine was a bit of a challenge because our team was composed of people who were clueless about the Rider brand, motorcycles and riding culture in general. My team’s first task in developing the design was to know as much as we could about Rider magazine. During the stakeholders interview, I asked the Rider team the "WHY" of the business. By knowing the three keywords that describe the Rider brand, I was able to develop a design strategy that aligns with these goals.


ridermagazine.com

The "WHY" and 3 keywords

Heuristic Evaluation

To know where improvements needed to be done, a heuristic evaluation to uncover usabilty problems in the design was conducted.

  • ridermagazine.com
  • ridermagazine.com
  • ridermagazine.com

Competitive and Comparative Analysis

Part of discovery is to evaluate how the client stacks up against its competitors in terms of usability standards and overall UX. In addition to direct competition, I also looked at competitors that have a relatively similar goal and elements with Rider Magazine that were worth reviewing.


ridermagazine.com

User Interview Highlights

Multiple users were asked to explore ridermagazine.com and here are some things they said about their experiences while navigating the site.

ridermagazine.com

The Design Process

Persona Development

With all the information that was gathered from the surveys and interviews, a persona was created that will represent the key audience segment for the site. This persona was the reference used when making decisions in the interface and user experience design.

  1. Users are married and typically over 55, but Rider was targeting a younger audience so a 40 year old was chosen.
  2. Most users are retired or make over $100,000 and typically spend money on gear.
  3. Majority of riders in the US cruise and tour on their bikes versus using it as just a mean of transportation.

ridermagazine.com

Storyboarding

Before the design was created, the focus was to understand what will go on in the user’s mind when they are looking for an inspiration for their next big motorcycle tour. A storyboard was created to illustrate a potential scenario and the user’s flow of interaction with rider magazine’s website.

ridermagazine.com

Design Studio

After distilling the user’s pain points and defining the business goals, the next step was to sketch the initial wireframes.


ridermagazine.com

Information Architecture

From the results of the user testing on the current website of Rider magazine, users were overwhelmed and confused by the organization of information. My team and I established a card sorting exercise to determine content grouping and to develop a new site map. From the results of the activity, the team decided to narrow down the main navigation menu from seven to five top level categories. We also moved “Touring” as the first category on the main menu since Rider wanted to inspire touring among users and not be mistaken as a motorcycle review site only.

  • ridermagazine.com
  • ridermagazine.com
Card sorting mapping Information Architecture
ridermagazine.com

Wireframes

The next step was to visualize the layout, placement of elements, site features and navigation of the website. After consolidating all the research findings, and insights a wireframe was created to illustrate the home and article pages. Since one of the major goals for the site is to be mobile responsive, the desktop wireframes were optimized for mobile devices.

One challenge during the wireframing phase was the placement of magazine features and ad content. The right balance between user preference and business goals needed to be struck. Users want to read articles without getting bothered by to much ads and pop ups. The original web layout has a four column grid with two of the grids mostly dedicated to ads. These were reduced to three to remove clutter and also removed the pop-up ads. The wireframes featured larger areas for photographs with the intention to showcase the beautiful motorcycle tour pictures that would draw site visitors to explore the page longer and read articles.


ridermagazine.com
ridermagazine.com
ridermagazine.com
ridermagazine.com
ridermagazine.com
ridermagazine.com


Final Design

Prototype

A high-fidelity prototype based on the wireframes was made. My team and I wanted to get feedback on how our design appealed to actual users so we invited random people to look at the prototype. One of the goals was to find out if users understood what and to whom the website is for. All of the users we approached said that the website is for people interested in motorcycles and motorcycle rides. None of them confused it for an e-commerce site. Users also said the design of the site looks clean and modern. Click the image below to view the interactive prototype.

ridermagazine.com