Data Visualisation

Make Data Matter in Visual

Visually represent complex data with aesthetics and clarity, using infographics to illustrate facts and tell compelling three different stories.
Duration
Oct 2022- Nov 2022
Tools
HTML, CSS, JavaScript
Type
Data Visualisation
Role
Visual Designer & Developer

Make Data Matter in Visual

Data Visualisation
Visually represent complex data with aesthetics and clarity, using infographics to illustrate facts and tell compelling three different stories.
Duration
Oct 2022- Nov 2022
Tools
HTML, CSS, JavaScript
Type
Data Visualisation
Role
Visual Designer & Developer

Overview

Bringing Data to Life

Directly to Final
👇

This project involved selecting , analyzing and visualizing data from BuzzFeedNews across three topics. Our goal was to convey these stories effectively through visual formats and showcase them within a portfolio website. In a collaborative effort, each team member crafted a distinct visualization. I also took on the role of integrating everything into the final portfolio website. Our work was nominated for Outstanding Graduation Project, demonstrating the ability to create impactful data-driven narratives.

Challenge

Our group used HMW to brainstorm and define the challenge.

  • How might we select and analyze a compelling set of socially relevant data from BuzzFeedNews' extensive open-source dataset?
  • How might we effectively employ visual design and data visualization to create user-friendly infographics that convey information comprehensively with minimal reliance on text?

‍

Solution

To overcome these challenges, our team devised the following solutions through research, analysis of trending social issues, brainstorming, prototype design, and mutual evaluation:

  • Select widely discussed and high-impact social topics such as LGBTQ, gun violence, and human rights.
  • Explore angles within these topics that are often overlooked or contain implicit issues.
  • Ensure that the choice of visual design closely aligns with the topics and seamlessly integrates with the chart types.
  • Enhance the user experience through interactive charts.

Discover

Pets keeping essentials

Initial research focused on identifying target users for the robot pet sitter through background research to better understand the user's needs in terms of pet keeping as well as measuring the importance of these needs within the target user group.
FOCUS AREAS
01
What groups have the greatest demand for pet robot sitters?
02
Which features are essential to raise pets?
03
What technology products exist for smart pet keeping?
04
What are users current pain points with existing products?
Background Research
Do you Know that?
197%
increase in the number of pet dogs and cats in China relative to 2017, expected to overtake the US by 2024.
10.8%
growth for pet cats in China in 2020, much higher than the negative growth of pet dogs.
24%
cat owners in China aged 16-25 years old. They have a higher demand for smart pet products.
500%
growth in consumption of smart goods for pets in China by 2020.
Source: 2021 China Pet Industry White Paper
Online Ethnography
Based on background research I identified Chinese cat owners as target users and conducted an online ethnography of them on Chinese social media and e-commerce platforms to understand the essential needs of cat keeping and which smart products and features they are using and how they are experiencing them.
A monitoring camera is essential for me to keep an eye on him, not only to accompany him but also to make sure he's okay.
Cats are not expressive and it is difficult for people to notice anything unusual. I often fail to find out in time that my cat is sick.
I rarely spend enough time with my baby, I use the automatic feeder but I am worried about his lack of exercise and company.
KEY INSIGHTS
01
All users used a combination of multiple products to feed, monitoring and accompany cats.
02
Users value the importance of remote control of the robot's switches and separate control of individual functions.
03
Many people think there is a lack of products to track their pets' health.
04
A feature that monitors pet health indicators and alerts abnormalities in time is much needed.
05
Monitoring cameras that can communicate in both directions make users feel better about accompanying their pets
06
Most users find the game feature very useful for relieving pet loneliness and alleviating their guilt of not being able to be there.
Competitive Analysis
Competitive analysis was conducted to determine the features, strengths, weaknesses and user feedback of the smart pet products currently existing in the market to inform MEOW's features and information structure.
Job To Be Done
Combining key insights from the preliminary analysis, Job To Be Done was conducted to rank the outcomes and satisfaction, and got some design opportunities to focus on. The results showed that health was the most important user concern and needed to be addressed, followed by the play and feed.

Define

Carving out a niche in an emerging market

Create user profiles and personas based on the insights gathered from the discovery stage to further understand the goals of the target users and what features and functions are most important to them, in order to narrow down and prioritise user needs and pain points to guide the ideation process and the design of the user interface.
User Persona

Ideate

Focus on the health function

Afterwards, having all these users' issues and needs in mind, I focused on addressing the "How Might We allow users know their pets’ health status" statements. Rough sketches and lo-fi wireframes were created at this stage.
Sketches
Rough sketches to help me quickly record my initial thoughts and brainstorm my new ideas and share my views with the group to select the best one for development and iteration.
Wireframes
Based on the sketches and the group's feedback, a wireframe and the first high fidelity screen which is Home page based on the wireframe were created to obtain further feedback and iterate in an intuitive way.

Test

Focus on the health function

Two rounds of user testing were conducted, including obtaining feedback from clients to determine where improvements could be made to meet users' expectations, needs and desires.
Testing Results
01
The status of robot device is unclear.
02
Some uncommon icons and unnecessary information can lead to user confusion.
03
Navigation from home to medical record and health index is troublesome.
04
Quick edit medical record and turn on/off the robot are not available.
05
The most basic monitoring functions are not highlighted enough.
06
The angle of monitoring cannot be controlled by the user.

Showcase

Data Visualization Goes Beyond Charts

Here's a presentation of the data visualization charts I've created. During the design process, I prioritized reducing user cognitive load by opting for simple bar graphs and exploring alternative representations beyond traditional charts. This approach aims to enhance data accessibility in a more intuitive and visually impactful manner.
No items found.
No items found.

Solution

Final Portfolio Web

Here's a live project website. Click on the images to explore more data stories and detailed content!
HOME PAGE
No items found.
Basic Functions
IB Center
Click to go to the web 👉.

Reflection

What I learned

Through this project, I acquired front-end web development skills, learning how to bring designs to life through code rather than just being a visual designer using Figma. Coding was both challenging and captivating, with each bug encountered leading to the search for solutions and the satisfaction of successfully bringing my ideas to life.

Furthermore, I learned that data visualization goes beyond creating simple charts; it involves crafting visually compelling and storytelling-driven representations. Examples like "Parable of the Polygons" (https://ncase.me/polygons/) and "Chit Chart" (https://www.behance.net/gallery/87757735/Chit-Chart) inspired me, showcasing the potential for engaging data storytelling.

Where to improve

Learning from "Parable of the Polygons," I realized the power of interactive data visualization. Allowing users to play and explore different choices, and experience the consequences of their decisions, enables them to understand the profound implications conveyed by the data on a deeper level.

More Case Studies

UI/UX Design
Meow
Web Design
The BCR
Video Project
Public Housing Lives Matter

Let's get in touch!