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.
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
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
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
User journey map
Mapping out the user journey to find out what makes users feel frustrated during the user flow and discover potential features
Opportunities
Based on the research, I came up with several ideas that could help solve the problem and improve the user experience.
User flow
The flow chart follows the original structure but adds features such as filter and calendar to help users make choices.
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.
Sketch of calendar design
By doing a wireframe sketch, I tried to find out what features and layout were suitable for the design.
Ideation
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.
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.
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.
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.
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.
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.
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
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!