Information Architecture:
Tips Page Re-Design
scene
Brooks is the market leader in high-end performance running shoes and apparel. They are currently pushing to increase customer engagement across their web presence and strengthen their reputation as being a company that supports runners in more ways than simply crafting quality products.
role
As an 8-week Capstone Project, I worked with a team of two other designers. My primary roles were user researcher and designer of the wireframes for the mobile experience.
​
For this whole project, we focused on research and site architecture, with our final product being wireframes demonstrating out findings.
opportunity
As part of their current endeavor, Brooks runs a blog with a section for running tips. Currently, this section of their blog is difficult to navigate and under-utilized. Our goal was to create a more engaging and interactive navigation to drive traffic, engagement, community, and sales conversions.
act 1: research
While brainstorming how to fix this situation, we realized that we needed to know more about what runners look for in online information and what makes that information trustworthy and valuable for them. As a first step, I created a survey to gather this data that my team then forwarded to runners in our social circles. When I analyzed the data, what I found out about our participants was that:
70%
look for running advice online
50%
will click articles shared by family, friends, & acquaintances on social media
80% & 70%
trust Pro Runners and Running Coaches, respectively, for advice
80%
like to share information that they've learned
act 2: analysis
This data helped us see that:
​
-
Running advice was indeed something that could draw potential customers to the site.
-
Making the articles easily shareable was key to increasing their viewership.
-
Highlighting the expertise of the authors would increase the trust given to the information.
With this in our information in our pockets, one of my team members went on to conduct further interviews into useability. The other began constructing IA for the site using card sorts to determine appropriate search words and how best to funnel the information to get more specific articles.
COMPETITIVE ANALYSIS
While they did this, I focused on competitive analysis to discover how other successful article sites encouraged sharing and used filtering systems. The two that stood out were REI's Expert Advice and Medium.
rei's landing page categories
rei's filtering system
-
REI focused on making things clear and simple from the beginning, allowing users to choose categories directly from REI's landing page, both in the title bar and in the center of the page.
​
-
They also had clear side-bar navigation to help the user filter through articles based on more narrow topics within the category.
medium's share icons
-
Medium showcased share icons along the side-bar. These side-bar icons enable the user to interact with the article by sharing it, giving it "claps," or saving it as soon as they begin reading. This encourages the user to interact early and often instead of having the possibility of the user dropping off before seeing the interaction options.
INFORMATION ARCHITECTURE
I also spent some time looking at other running sites to find out what terms and jargon were being used in the industry that we could use in filtering content as intuitively as possible. What I found was that there was little consensus, with almost every site using different terms to describe something as simple as running ability (which we'll talk about below). We did find some consensus on things like "road" vs "trail" running, exercises, and training plans.
act 3: design
As my team members worked on finishing up research and IA, I turned my attention to the design of the mobile site. I drew inspiration from the current Brooks shopping experience for brand consistency, as well as the REI mobile “Expert Advice" site and Medium.
MOBILE LANDING PAGE, FIRST ITERATION
.png)
-
An image and some text about the site so that users instantly know what they have found.
-
Navigation, followed by an endless scroll of articles to facilitate browsing
SORT AND FILTER
I utilized a sort and filter navigation for the search, consistent with the Brooks commerce site. I choose to do this because it is a strong navigational tool for use in browsing and it reinforces that both the knowledge and the goods are coming from the same company. I did this to create a sense of trust and comfort for Brooks users via site consistency.
EXPERIENCE LEVEL SLIDER
While working on the navigation for the desktop site, my co-designer came up with a sliding scale for filtering articles based on experience level. Based on my research into terms, I recommended that we use "Rookie" and "Pro" as the terms on the poles of the scale. I chose these terms because they are light-hearted (and therefore on-brand for Brooks) and easily recognizable to the general public. However, the final client feedback pointed out that actual professional runners would not be accessing Running Tips, so I would now recommend "Rookie" and "Expert." We removed these terms from the mobile site for the sake of room. When this was tested on users, there did not seem to be any confusion.
act 4: iteration
After sharing our work with other designers, we got some really good feedback that we then evaluated and incorporated. This included:
-
Streamlining our mobile and desktop designs
-
Building out a separate landing page
-
Thinking about how our filtration system worked
​
FILTRATION SYSTEM
One of the most interesting problems to think through was whether we had an "and" or an "or" filtration system, and what that would mean for the user. After thinking it through fully, I recognized that it made the most sense to use "and" filtration in order for the user to get really specific about what they were looking for. We don't want them to filter for "road" and "trail" and get articles that mention one or the other —we want them to get articles that mention both.
The greatest part about figuring this out was that it forced me to think about what happens when one filters too far. I was able to repurpose a topic submission bar that my teammate had created but we had previously discarded. I added this into the wireframe that my co-designer had created.
OTHER FEEDBACK
I also received feedback that, if users are accessing Running Tips on mobile, they do not need to know what Running Tips are about. Instead, they want to jump right into accessing articles. Based on this, I chose to top the mobile landing page with the four main categories we were basing our filtering system off so the user could immediately begin drilling down. To keep the attention of users who weren't looking for anything particular, I then put in a carousel of popular articles that the user could either watch or flip through for ideas on things to read.
FINAL WIREFRAMES
The video is a walk-through of the mobile experience. In it, you are able to see how the navigation system works, as well as key components that I designed into the article and author page.
​
As part of focusing on authors to build credibility, I included an author "follow" button on both pages. The functionality of this would be a larger piece of work to build out so it is only a secondary part of our recommendation.
​
The author page features a bio on the authors to show their authority and their favorite Brooks products to help drive revenue. It also features their most recent articles to encourage user retention.
The article page has a product promo in the middle of the article that is preferably filled with a product that is mentioned in the article, such as a Brooks trail-running shoe in an article about trail-running. The share and save buttons are at the top on the header image to users can interact early and often, and there is a carousel of related articles at the bottom of the article to keep users on the site. Following the carousel, I placed more products that are similar to the product discussed in the article.
epilogue
We presented our research and wireframes to the clients, one of my favorite parts of every project. I was able to make the video shown above as well as one that showcases the "We're stumped!" use-case I showed above. About our work and presentation, the client had the following to say:
I was pleasantly surprised at the maturity of the work shared and the group's confidence in presenting their solutions. In particular, I was pleased to learn about how they investigated and tested how to better categorize our site content and establish a more useful navigation structure and site terminology. I look forward to referencing and sharing this work as we continue to evolve our site.
-Michael Grace, Brooks Running
In the next steps, I would like to further user-test our designs and carry them forward to higher-fidelity mockups to more fully flesh them out. I would also like to continue exploring and refining our information architecture. Other topics that I think merit more time are some of the bonus-feature ideas that we had, such as following authors, saving articles, and on-boarding users to customize their experience.