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.
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.
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.
UX Research | Strategy
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.
To know where improvements needed to be done, a heuristic evaluation to uncover usabilty problems in the design was conducted.
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.
Multiple users were asked to explore ridermagazine.com and here are some things they said about their experiences while navigating the site.
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.
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.
After distilling the user’s pain points and defining the business goals, the next step was to sketch the initial wireframes.
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.
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.
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.