Berxi Blog Redesign
An exercise in helping readers find what they're looking for
The Problem Statement
As a reader, I want to be able to easily and quickly find content that is related to me, my industry or the current topic I am reading about.
Why our current state is not solving this problem
Our current focus is only on articles for healthcare professionals without the ability to seek content by any other industry. We have added more industries to our editorial calendar and therefore a need to organize this content is apparent.
Our blog layout is organized by content format (articles and guides)
Our blog does allow for curating experience by topics but these topic index pages are not organized by industry.
On mobile, the user does not see the available topics until the bottom of the main page
Netflix was a major source of inspiration. They ask the user to identify which profile they’d like to browse the Netflix app as and then curate the experience for that viewer profile. This sounds about right for us - If a person in the Real Estate industry came to our blog, we’d want them to see focused content for that industry.
Amazon was another source of inspiration. They use tags to filter reviews and comments so readers can find popular phrases that they might be looking for in reviews. This helps the user cut through a lot of the reviews to find the specific mentions that are important to them.
Overall, I surveyed the NYTimes, Huffington Post, Lemonade, Vice News, Netflix and Amazon and found how they organize content compared to our blog.
Content is organized mainly by topic or category
Experiences can be curated by language or country of user
Media sites use nav menu for topics in mobile
Apps are using 1-2 nav menus vs. web apps are using the browser nav
Tags are everywhere and are used to filter and most tags end up having their own index page to view content in that “tag” specifically
Entry pages use icons or links allow users to identify themselves and move to “curated content”
Taking in all this inspiration, I began sketching and drawing solutions. I worked though concepts with my stakeholders to understand if the ideas were suitable and doable within our product backlog. I also got input from my engineers to make sure what we were doing would be plausible. In the end, we’re trying to better understand our process and by working with the front end team early and often, it helped to generate constraints earlier on to prevent issues later.
I got buy-in around the concepts that were most interesting to the team. From there, I built two wireframe prototypes to test if users had a higher confidence level in “finding the content they wanted” by having the users complete 3 different tasks.
Scores were on a 5 point scale; For effort: 1 = low effort; 5 = high effort; For confidence: 1 = low confidence; 5 = high confidence
Personalize through the navigation (after Netflix)
Task 1 Effort = 2.86; Confidence = 3.7
Task 2 Effort = 3.35; Confidence = 3.1
Task 3 Effort = 3.00; Confidence = 3.3
Filter as a feature (after Amazon)
Task 1 Effort = 2.15; Confidence = 4.8
Task 2 Effort = 1.89; Confidence = 4.9
Task 3 Effort = 1.45; Confidence = 5.0
Findings from the user tests:
Users had trouble finding the filter button in the navigation header. This finding will mean we need to make the filter feature more visible in the experience.
Users enjoyed narrowing their focus when it came to finding an appropriate article.
Users positively commented more often on having tile selectors and icons with words. We believe this gives more personality to the experience and allows users to identify themselves visually.
Tags and related content are big navigation tools from an article. This will be a big feature request that we will need to implement.
Industry and Topic need to be together - users are looking at these the same, even though internally, we’re thinking of them as separate. This was a message better delivered by our users rather than me.
The “Filter” concept increased readers that identified as “only reads one article per session” to “very likely to read more than one article per session”. Although this is a glamour metric, imo, it was encouraging to see a positive directional result.
The final design took several iterations to get through as we were also going through a rebrand at the time of this project. Because of the rebrand, I got to experiment a lot more with our new color palette. The filter feature continued through to the final design, taking a prominent spot in the center of the page. We found that this gave us the flexibility we needed from an editorial perspective and by using tiles we help people with many different interests, find their desired content.
We added tags as a part of our navigation system to help users self filter without having to always go to a central filter feature. This was a big finding from the user tests and our competitive analysis.
Mobile prototype: https://invis.io/7QSPMCPE29U#/370931950_M-Hub
Desktop prototype: https://invis.io/WKSPDK5H3A6#/370856432_D-Hub
Project is now live - click here to view/use
The project went off pretty smoothly. By introducing concepts via illustration, it allowed the team to really focus on the experience, and not get caught up on the details of the design. This gave me the space I needed to work on a concept that worked for our readers. By sharing early and often with engineering, they were able to find the right technical solution as well to better support the idea for our readers.
Establishing who my go/no go - main decision maker earlier in the process would have been made this project a bit easier. As our process continues to evolve, we sometimes go overboard with whom we seek internal feedback from, meaning there are a lot of cooks in the kitchen. Going forward we will use a sponsorship system where we get roles established before a bigger project gets kicked off.