BBC history website redesign

On This Day is a micro-website that belongs to a leading brand of BBC website in the history content genre. Though it has interesting features for users to discover history on each calendar day, users feel frustrated by the misleading visual design and limited functions. 

 

This redesign focuses on proposing a visually appealing and organised user interface that helps users discover historical content and improve the visualisation of the brand.

presentation.png

My Role

Product designer

UIUX designer

(Personal project)

Duration

2 weeks

11-25 April 

Key Deliverables

  • User Research

  • Wireframe, Hi-fi design to Prototype 

  • Design guideline/ UI library

  • Responsive website

  • A/B test, usability testing

Tools

  • Google Sheets

  • Figma

  • Maze

1 define.png

Challenge

How might we help users better engage in a content-heavy website?

User experience

  • To make it useful 

Users can search for the historical event on a specific day.

 

  • To make it usable 

Help users quickly identify the historical event they want to discover among a large amount of information.

  • To make it desirable

Help users stay ​longer to explore more historical content.

Visual design

  • Hierarchical content

A clear, structured layout that helps users to identify different sections.

  • Visual appealing

Prioritise the context and use images to make the story stands out from the page. Optimise the colour and brand guidelines to create a more clean and modern brand identity.

 

  • Accessibility

All contents are legible and readable on a responsive website.

  • Consistency

Build a UI library that improves the visual consistency of components on different pages.

Discover the existing website

2 research.png

User research

 

By conducting a qualitative interview, I identified problems users have encountered when using the current website. I prepared 5 tasks based on the existing website's main user flow and asked 6 English readers (4  of them are based in the UK) to finish the tasks. Overall, the average success rate of this user performance baseline is 43%, which means that most of the time, users fail the tasks. You can find the detailed report below:

Key Findings

1. Users would like to have a choice to select a day

All interviewees had difficulty choosing a day they were interested in because of the limited selection of calendars. Also, users quickly lost interest when they couldn't find their favourite topics.

 

2. Users are more interested in the stories than the calendar number 

All interviewees had no idea how to choose a day when they could only see the number on the card calendar; they wanted to have some clues when selecting.

3. Users are confused by too many buttons on the same page

Most Interviewees were misguided to the wrong pages with too many buttons. 

4. Users can't find the info they need from the main pages 

Interviewees were overwhelmed by too many information cards and ads on the History Extra home page, so they spent too much time searching the On This Day section.

5. Users tend to search for a date related to someone's birthday or today in history.

Persona

I then create a persona to conclude what the user wants and needs

UX Persona.png

User journey map

Mapping out the user journey to find out what makes users feel frustrated during the user flow and discover potential features 

User journey.png

Opportunities

Based on the research, I came up with several ideas that could help solve the problem and improve the user experience.

 

oppertunities.png
oppertunities2.png

User flow

The flow chart follows the original structure but adds features such as filter and calendar to help users make choices. 

8 Ideation.png
 

Calendar design

Case study

Since the calendar design will be the main feature, I did research on different calendar design pages as inspiration.

Case study

Since the calendar design will be the main feature, I did research on different calendar design pages as inspiration.

3 Analysis.png

Sketch of calendar design

By doing a wireframe sketch, I tried to find out what features and layout were suitable for the design. 

4 Sketch.png

Ideation

5 Wireframe.png

Different schemes

I developed 2 different layouts of the calendar page and then chose scheme B as the main layout since it has a better balance. After a quick A/B test, I decided to go for scheme B.

6 Wireframe.png

Wireframe

Developed wireframe from scheme B to set up the basic layout and structure.

Iteration

Define the theme and visual iteration

After finishing the first version of the Hi-fi design, I did a quick user testing then found out the calendar design makes the user feel confused. Also, the balance of the colour palette doesn’t match the brand identity very well. I then adjusted the design theme to a dark version and did an iteration to include a day picker and filter into the same bar to create a more clean & simple UI.

7 Ideation.png

UI design

Identify and optimise the design guideline.

I replaced the original fonts by using BBC fonts wildly used in modern editorial content. A colour palette based on the basic brand guideline is created. Still, I rearranged the proportion of colours by following the UI colour principle and then played with dark blue to create a gradient as the background colour. 

9 Style guide.png

Building UI library

As the background goes with the dark theme, I mainly use white colour background on the card design to point out the contents. Created components while making Hi-fi designs to make sure the consistency of visual design.

UI-1.png
UI-2.png
12 Hifi.png

Grid system

Responsive web design

The web has a very different layout structure between web and mobile. The biggest difference between devices is the landing page and filter design.  

11 Hifi.png

Mobile Hi-fi mockup

The mobile app version will direct the user to the landing page of On This Day directly, which makes the structure different to the desktop version. The filter is an independent modal separated from the main pages; users can open the modal by swiping or tapping on the search bar at the bottom. 

MOBILE.png

Day picker

Filter

Home page

Main page

Desktop Hi-fi design

On the laptop mode, the layout has a hierarchical structure from top to bottom

IA.png

Design solution

A clean landing page focuses on the action

CTA button combined with a day picker on the historical card that helps the user choose a date from the very beginning.

Quickly search by using filters and cards

Use filters to search desired location or category of historical event quickly. Users can compare the contents of the different cards to make a choice.

Easily pick a story of a day

  • Using a day picker or recommended section, easily switch from one story of a day to another.

  • The cover photo and story show featured the calendar year of the day.  

 

  • Subscribed users can see the full content of the story.

Take away

Prioritise story

The main challenge of this project is to use the interface as a tool to encourage users further explore the historical contents. While researching existing designs, I found many opportunities to tell a better story by using visual and UX methods. These methods help me make design decisions that prioritise stories for a better user experience. 

Testing and refinement

I validated if the design solves the problem and which decision should be modified by testing in different stages. The plan is optimised with each iteration, and I enjoy the process while building the product step by step. There is no perfect solution, but I believe the design will only improve if I keep working on it.

It's not finished yet

I am doing another user test for the latest version of this design and plan to explore more potential features. Let's look forward to it and have fun!

Thank you for your attention

All of the contents are for non-commercial use