Satyen Ram
Daily Hive Mock-Up.jpg

Daily Hive 2.0

Case study of my work at Daily Hive.

Daily Hive 2.0

The new and improved Daily Hive mobile screens (2019)

Introduction

In early 2018, I was tasked with spearheading the UX redesign of a much-loved local news blog based in Vancouver, BC. Described in its own words “Daily Hive is a Canadian-born online news source, established in 2008, that creates compelling, hyperlocal content.”

I was in charge of UX, and worked in collaboration with the team at Colony Digital that was working on the branding and UI design.

While initially considering business objectives as an integral aspect of my role as a UX Designer, my trajectory shifted significantly during my tenure at Daily Hive. I completed the Brainstation UI course, expanding my skill set to encompass UX Research, as well as UX and UI Design. This evolution naturally transformed my role into more of a Product Designer position

Objectives

The goal of the project was to update the UX, UI, and branding of the site which had not been updated since 2008. Since then, the site had increased its users exponentially. The legacy WordPress site was not fit for purpose. The user experience was clunky, and the branding and user interface was dated.

Target User

Daily Hive is a Canadian-based digital media company that primarily targets young and urban-dwelling individuals who are interested in local and national news, as well as lifestyle and entertainment content. Their target audience is generally described as millennials and Generation X individuals who are active on social media and are looking for fresh and innovative content that resonates with their values and interests.

Daily Hive's content covers a wide range of topics, including food, events, local news, travel, lifestyle, and entertainment. The company's focus on providing up-to-date and relevant content for their target audience has helped it establish a strong online presence and become one of the leading digital media companies in Canada.

Research and Analysis

I had many months to work on the discovery phase of the project. I spent this time to research the information architecture of the site. I also had a detailed look into various different areas, including the navigation, the homepage and article pages. I began my research by looking at Millennial-focused competitors of Daily Hive and their respective news sites, blogs, and online magazines. These included:

Vice

Thrillist 

Vox 

Quartz

The Guardian (UK)

Eater

Mic.com

Toronto Life

I used these sites to gain an understanding of navigations, grids, hierarchy, page layouts, card designs, interactions, and ad layouts that would work for Daily Hive’s new iteration. I especially liked the mobile navigation of Thrillist because it was the most efficient and simplest navigation I experienced from all the navigations I viewed during my competitor research. My hypothesis was that it was the most usable mobile navigation. It also worked very well with the information architecture of the site as the articles on Daily Hive were tagged by section. Next, I needed to back up my hypothesis with hard data gained from testing on real users.

We went for a mobile-first approach as google analytics showed that 75% of users were on mobile phones

We went for a mobile-first approach as google analytics showed that 75% of users were on mobile phones. I started by testing the mobile navigation. With the help of some RED Academy UX students, I was able to user-test the legacy navigation using rapidly mocked-up paper prototypes. I A/B tested the legacy navigation versus a new slide-out navigation that was inspired by Thrillist.

Paper prototype for A/B testing the old navigation against our proposed navigation

The results showed that the new mobile navigation reduced the number of clicks from 3 to 2

The goal of the pilot user study was to gain a high-level understanding of the usability of the homepage, article page, and primary navigation. I also wanted to identify any usability problems within the design early in the design process before development started.

We tested with 5 users as research has indicated that this number of users will pick up about 85% of issues.

For the user test, I asked the users to complete the following:

  1. Navigate to Daily Hive homepage as you normally would

  2. Find an article you would like to read

  3. While you are reading the article, find and read a related article

  4. Share the article

  5. Sign up to the DH newsletter

  6. Bookmark an article to your DH bookmarks

  7. From the homepage, navigate to a channel

  8. When in the channel, navigate to a category

  9. Navigate to a different City

Here are some phrases that were used by testers to describe the prototype after completing the user testing for the navigation :

  • Straightforward

  • Intuitive

  • Easy to use

  • Makes sense

The results showed that the new navigation reduced the number of clicks from 3 to 2 for users that wanted to access an article from the homepage. In the new navigation, users could also understand intuitively what the menu icons were for which was reassuring for the design team.

I also conducted user interviews with various users that had previously used the site and read Daily Hive articles. The purpose of these interviews was to get qualitative data, so I could start to get a sense of why, when, and how they were using the site. I wanted to see what their motivations were for using the site, what they liked about it, what they thought could be improved, and any other feedback they had on features or functionality. I could then make data-led suggestions to stakeholders for how we could improve the site.

An early version of the user flow showing how the new slide out navigation would function for users navigating from the homepage to a channel and then to a category.

The previous mobile navigation was extremely confusing for users. The hamburger menu had a search feature, categories, and a select your City link. Channels were placed within another link in the top right of the navigation.

The final more intuitive mobile navigation was simplified based on user feedback. The hamburger menu opens a single slide-out navigation that includes Channels, Cities, Account settings, Search, and a home icon. Categories were moved to a sub-navigation within channels and article pages.

Final Design

 

Impact

 
  • Redesigned Daily Hive navigation was a small part in the redesign of the Daily Hive website played a key role in Daily Hive's acquisition by ZoomerMedia for $16.4 million.

 Get in touch.