Brooks
Running Tips - Blog Redesign
Updating and Rebranding Blog as Running Tips
Brooks is an athletic brand that’s been around for over a century. For the past 17 years they’ve narrowed down their product offering to focus on running. They’re currently on a mission to “marry brand moments with the eCommerce funnel.”
The Project
BACKGROUND
​
As part of my Capstone project at SVC, I chose to work with Brooks on their blog redesign.
When Brooks came to us they said the blog wasn’t getting much traction. Page views were way down compared to the rest of the site. The branding was misaligned and there was little cross traffic bouncing over to their product pages.
They saw what their competition and peers were doing in this space, and felt they were missing out on an opportunity.
THE CHALLENGE
​
They had a vision of the blog, Where it could be a destination for running tips, a platform to connect with their community, and in turn help drive sales.
​
Their vision revolved around these three key themes:
​
Running Tips
​
Community
​
Sales
​
My two group members and I had 9 weeks to help Brooks realize that vision. My focus during that time was primarily on research, prototyping, and testing. I needed to determine what should go on the page and why.
​
Here is the design process we used:
THE PROBLEM
​
After listening to the Brooks pitch, I boiled the problem down to two themes or parts:
​
Increase Engagement
Remove distractions by giving the user a familiar format, that fit their mental model, so they could focus on the content.
​
Increase Conversion
Ensuring the blog is easily discoverable, useful, and always leads to great product.
FIRST IMPRESSIONS
​
I saw that Brooks was already putting a lot of effort into the product side of their site. It was updated with their latest brand guidelines, and had a modern feel.
​
I decided to do a quick comparison to see how far off the mark the blog site was.
​
Here's some quick comparison snapshots:
There’s some obvious blemishes, but nothing too bad. A little outdated visually. It would have been easy to make this a visual design project. I could have just used their existing brand guidelines to slap a new skin on the blog, and call it a day.
There’s some obvious blemishes, but nothing too bad. A little outdated visually. It would have been easy to make this a visual design project. I could have just used their existing brand guidelines to slap a new skin on the blog, and call it a day.
​
I wanted to dig deeper though, specifically in the information architecture. I just didn’t think the visuals alone were going to magically drive engagement and conversion. To begin my research I had to start with some basic questions.
When approaching a problem like this I typically start by taking away as many assumptions as I can, given the timeframe.
​
I started asking questions like:
​
What was the mental model users brought to the blog?
​
What kinds of words or phrases do people use when searching for an article?
​
If a user is seeking tips, are they paying attention to the product ads, or putting on the blinders?
I felt like those questions were objective enough to start putting together the research goal. After going back and forth with my team, we finally settled on one.
INITIAL INTERVIEWS
​
I conducted three interviews to asses the state of the current blog. I wanted to get some external feedback while looking inward towards the existing site.
​
Here's some key takeaways:
​
Don’t be Subtle
Users want product suggestions to be bold and not hard to miss.
Brand Consistency
All sections, including the Comment section, should be on brand and follow same design guidelines.
Tailored Experience
Participants frequently wanted different article sub categories than what was offered.
Clarity is Key
Links, ratings, and modules need to stand out, and their purpose needs to be clear.
COMPETITIVE ANALYSIS
​
The logical next step was to go see what everyone else was doing.
I began conducting some competitive analysis to root out best practices that we could apply towards the site.
Here’s some key takeaways:
Using those takeaways, and keeping the two themes in mind, increasing engagement and conversion, I started to work on the assets needed to meet those needs.
Here’s what my team and I settled on.
The main purpose for all of these items is to engage the user. On the current site they were either failing, based on heuristics, or were absent.
Some are expected, like Author Bio and Breadcrumbs. Some are added perks, like Icons and Reading Durations.
For conversion, these items make the content findable, useful, with a clear path to product.
Prototypes
Let’s put it all together. Starting off, here’s the new article cards on the blog landing page. Followed by a full breakdown of an article page.
Here’s the Article Page in action. You can feel the difference visually, but I think part of that is because, with these refreshed assets, the prototype just fits your expectations.
CARD SORT
​
One of the last pieces of the puzzle was to figure out the sub category names. There were hundreds of articles and they all needed to be findable.
​
I did this with card sorts. (Optimal Workshop)
First I took 30 sample articles and performed an open card sort. The middle column shows the results of that sort.
Then performed a closed card sort using those results, to narrow it down to these six category names on the right.
​
Here’s those categories embedded on the Blog landing page.
TESTING
We tested three different user flows using the prototype, with positive results.
​
​
Rating system was working, and influencing clicks. Looks like a few design tweaks might be needed. Card size was also brought up. Positive reactions to product placement.
Still some confusion around the category names though. They were working but people still wanted more personalization.
NEXT STEPS
Reduce the card size
Make it less claustrophobic. If the card size can be reduced, the user will be able to see more content as they scroll.
More research and testing
To get a better handle on those sub categories, more data is needed.
Recruit more authors
​
Right now, Brooks only has one content writer on staff. This can be expanded, and can also include guest posts from athletes.
Discoverability
This should read blog awareness. All this work has been done on the blog. How are people going to find it?
OUTCOMES
We ended up getting a call back to come present our finding to Brooks' executive design team.
​
They loved our ideas, and plan on using them as a jumping off point when they eventually go ahead with the redesign.
