Hannah Jiang

Get in touch if you want to chat about design or just simply want to say HI!


Image Alt


UX and Data Visualization

Client: Shell

Duration: Oct, 2016 to May, 2017

Role: Lead Designer
Status: Online

Link: Not available to the public

Tag: UX, Data Visualization, Information Architecture, Consumer Behavior


Shell required to build a website to present global market data and graphical insights to senior management. This project aimed to organize and display consumer behavior via global market data of Shell retail products. The research covers major markets across the world. Each consumer per market were categorized by gender, age group, family status, etc.

The challenge of the project was to analyze and categorize the raw data from the research team, and represent it in a way that is website friendly and easy to understand.

Information Structure

Firstly, I organized the data I received and drew a site map to show the different layers of information and the userflow. The image below is an example to show the structure of the “Fuel Segmentation” branch in the Chinese market.


After the information structure was approved, I created a wireframe of the site so that the client could get a better understanding of the layouts and interactions.

Visual Design

The below is a brand guideline based on, but not limited to, Shell branding principles.

Here is the final website design (original numbers are changed due to confidentiality agreements):