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.

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. 

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!

Thank you for your attention

All of the contents are for non-commercial use 

Next

NEX Design Guidelines