scope


P.O._RiderMagazine 1.jpg
P.O._RiderMagazine 2.jpg
P.O._RiderMagazine 3.jpg
P.O._RiderMagazine 4.jpg
 
Background_Rider 1.jpg
Background_Rider 2.jpg
Background_Rider 3.jpg

Research


Heuristics Evaluation

What's not working with Rider Magazine? We investigated and learned that:

  1. Users could not easily identify the purpose of the website.
  2. Navigation was not easy to use.
  3. Design and layout made it difficult for users to enjoy being on the site; feeling it was outdated and had too many advertisements.


Google Analytics

Our client had 3 goals: increase user engagement, page views, and time spent on page. Our team reviewed their Google Analytics and the following emerged:

  1. Visitors spent most of their time on touring related articles.
  2. Google was the number one way most users came to the site.

These results told us how users got to the site and where there interacted the most so we took this into consideration for our user flow as well as knowing which pages to focus on for the redesign.


User Interviews

After completing our own heuristics evaluation and taking into account the analytics we received, we were excited to talk to users about their experience with Rider Magazine.

What did we learn? Users had issues with the aesthetics of the website. 50% of users couldn’t tell what the website was about!

72% of users thought that the articles needed additional real estate since the right-hand panel took up too much space and reminded them of a news site.

56% of users found the homepage to be "claustrophobic". With all the text, advertisements and the side menu, most people didn't know where to look first or what they were even looking at, which is how 50% of visitors felt.

With all the content on the homepage and throughout the site, 50% of users were concerned that Rider was too focused on advertising.

33% of users couldn't find the company logo, they first thought it was an advertisement. My team and I also couldn't properly identify the logo and soon found out from the Rider team that it was placed in a banner image, which made it easy to miss.

Our solution hypothesis was to remove all of these cluttered items but after talking to the stakeholders, we learned that Rider received revenue through advertising so this was not an option that we could eliminate. This just meant that we would have to be more creative and strategic with our redesign.


Competitive & Comparative Analysis

What are competitors offering in the motorcycle magazine and touring industries? We researched 5 competitor's features and found:

  1. Most sites had a clean navigation bar and footer; Rider magazine's users couldn't identify the proper footer and didn't care for the navigation bar moving with them while they scrolled through the page.
  2. Subscribing to the magazine was easy and clearly defined.
  3. Users understand what each magazine did.
  4. Logo was separate from the rest of the images on the page.

From this point, we felt we had enough data to move forward with a suggested design since most of the complaints from users were cosmetic. 


User Persona

Now that we learned about Rider's platform and user needs, we were ready to create a persona that exemplified the targeted audience for Rider Magazine:

  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.

Storyboarding

Before moving onto design phase, we wanted to understand our user’s thought process on how they find tours so we created a storyboard.

"Tom ponders the idea of taking a trip across the country on his motorcycle but he doesn't know where to start. He looks for advice online and comes to a suggested site that he recognizes; Rider magazine. Looking at Rider's homepage, he sees a suggested article, "35 Bucket-list Motorcycle Rides". From this list, he picks a route most favored by other reviewers and sets off into the sunset."

Rider storyboard sketch.jpg

Design


sketches

Design Studio

Our team of 3 facilitated a design studio sprint to accomplish two things: provide value to our users and meet the business goals of our client (increase traffic and engagement to site).

The design sprint resulted in new placement for all of the following:

  • Logo
  • Hero image
  • Subscribe button
  • Search icon
  • Section headers and images

Information Architecture

When we first conducted a heuristics evaluation with users, we found that most of them were confused by the organization of information. My team facilitated two card-sorting exercises, inviting participants to help in the recreation of the main navigation site-map and content for the homepage.

card sort_rider
section card sort
section wirefram

Low-Fidelity Wireframes

Before we searched and requested visuals from the Rider team, we thought it would be a good idea to present our low-fidelity wireframes to the team first. After explaining that the boxes and copy were just placeholders, the team still couldn't see the big picture. We learned that not every client will prefer to see a basic wireframe and that this was not an indication that they didn't like our design-thinking.


Prototype

After learning that they didn't care for low-fidelity wireframes, we quickly mocked up the high-fidelity wireframes and place them into a prototype. We took the prototype out to the public and asked random users that we came across on the street about their opinion of the new design before showing them the original. Users mentioned that the site looked clean and easy to use and could tell that it was a magazine site and not a motorcycle, e-commerce site.

Below is the desktop and mobile version of the redesigned Rider site which we presented and received great praise for.

prototype_rider

Summary

After presenting our final design in August 2016, Rider Magazine followed up with us in March 2017 letting us know that elements of our design decisions had been implemented. They explained that the full design could not be carried out by their current developers and that they also had budget constraints.

 

Previous:

Next: