Data visualisation

“5 Minute Guide: Graphic Design Principles for Information Visuallisation”

After collecting a large amount of valid data, a more flexible visual display of the data is necessary. Lev Manovich’s book outlines some basic visualization principles to aid in the design of beautiful data visualizations.

First of all, the essential thing for data visualization is colour. It is best not to use more than four colours in the same picture. The overall colour selection is based on uniform comfort. If it is a non-professional design life, you can consider colour assistance website for the colour selected. Unless you are a professional, we should avoid choosing a colour palette ourselves. For fonts, it’s best to use only two sizes. Otherwise, it will make viewers feel challenging to read.

Second, in data visualization storytelling, each different visualization option must indicate a different type of content. Don’t just add a lot of beautification of data understanding just for the sake of vision.

Finally, conducting research and finding references is also one of the ways to effectively improve data visualization.

Making Visible the Invisible

Aaron Siegel ’s video tells a lot of examples to understand better Making Visible the Invisible through these examples.

First of all, data is ubiquitous. Everyday food, food type, calories, etc. can become data. At the same time, data can also be the cover of magazines, population changes over time, etc.

Secondly, reasonable collection of valid data and analysis of data can better understand and modify the data.It is necessary to eliminate invalid data and interference data, so that the data can be more effectively displayed.

Finally, with the development of science and technology, dynamic data has gradually moved into the public eye. This display method not only has a certain degree of landscaping on the data display, but also allows viewers to understand the changes and trends of the data faster.

Reflective account

Steve Mann

Steve Mann can be called the legendary leader of the wearables. As early as the 1970s, Mann began his “wearable computing” research. It wasn’t until 2012 that Google released the “Google Glasses” that wearable devices entered the public’s field of vision, and the public recognized the value of Mann’s research.

He has been using wearables to help improve his vision. With the development of technology, wearable devices can enhance human capabilities. At the same time, wearable devices have changed from awkward and bulky to light and smart, and have become more convenient to operate. Wearable intelligent devices can rely on the human body’s natural actions.

But wearable devices can have specific problems. First, the higher the amount of personal data that can be obtained, the higher the amount of private information therein, and the risk of personal privacy leakage increases significantly.
Secondly, wearable devices are expensive and have a short battery life. The battery life of an ordinary smartwatch is about 24 hours. If more functions are turned on, the power consumption will increase, so that users have to recharge twice a day to use frequently. Finally, many smartwatch functions require a mobile phone to be able to use them, and sometimes consumers may feel that they are superfluous.

Alberto Frigo

From 2004 to 2040, Alberto Frigo has been photographing everything he has touched with his right hand with a camera in his left hand.

He quantified his life. The quantified life provided a digital means to reflect and guide his life and provided data support for a productive life. The popularity of self-quantification benefits from the upgrade of mobile phone software and hardware and wearable devices and data tracking can be more accurate and meaningful. This can better understand yourself.

There are also some problems with the quantified self. First of all, data security has always been a concern of people. In many cases, this is a personal privacy issue. The problem of data security has also brought resistance to unified data sharing.

Project #1: The Quantified Self

A photo is never an objective reflection, but always an interpretation of reality. I see data visualisation as sort of a new photojournalism - a highly editorial activity.

Design Goal

The project was designed by combining data visualization with traditional books, with the goal of spreading the concept of ‘quantified self’ better. For this project, I tried to use the form of charts and pictures to deepen the user’s understanding and feeling of the data.

Formulate personal brief

  1. I use my mobile phone for a long time, and the average daily length of a week in not less than 14 hours.
  2. I use my phone to read e-books anywhere and anytime.
  3. The average reading time per week is not less than 25 hours.

According to my daily use of mobile phones, I found that I have a long-term habit of using mobile phones to read. Therefore, I have summarized my habit of reading on a mobile phone and my use of fragmented time. I found that when using a mobile phone to read, I will share my thoughts and understanding of the sentences in the book, and will pay attention to reading together. People in this book understand the sentences and the whole book. So I determined the research data as fragmented time and common reading era.

Co-reading survey

After investigation, I learned that this reading method is called co-reading. This reading method has opened a new era of reading. Co-reading is between online social and real social. Through the reading app, we will bring strange relationships closer, find like-minded book friends, and at the same time, strengthen the reality by sharing books and ideas. Communication between friends. The use of fragmented time is more reasonable, from extensive scattered reading to deep immersive reading.

Confirm Theme

Mobile reading in the co-reading era and utilization of fragmentation time.

Data Collection

I collected data on the use of mobile phone reading for co-reading and fragmented time usage from 26 Jan 2020 to midnight on Sunday 02 Feb 2020.

Secondary Research & PACT

I conducted a survey on common reading habits and the length of time I use mobile phones to read, which can help me better determine the target audience.

Through the second study, the public’s reading habits and scattered time were clarified, and the content of PACT was confirmed.
Person: People who are used to reading on mobile phones.
Activity: Make better use of debris time.
Context: Co-reading is more reasonable.
Technology: brochures and big data analysis.

Determine the display method

After sorting out the data, I do brainstorming to determine the type of data that the user is interested in and the relationship between the data, and established the way the data is displayed and the type of chart through the graphic idea.

Visual Display – Data poster

I divided the graph into two, and the left shows the emotional changes during reading. On the right I use four different chart types to show the percentage of reading time, the number of readings per day, the daily cost of reading, the number of times a friend shared a book, the number of ideas and comments shared, and the number of likes.

After Crit

After the tutorial with the tutor, I got some valuable proposals. Considering the diversity of users and the way of publicity, to make the data display more transparent and let more people understand the benefits of co-reading, I chose to use the form of books for a more complete design.

Book display – interactive book

I broke the book’s inherent display form and designed the book to have two interactive ways. The first is to follow the original interaction method of the book, the second is to disassemble the book, and each page can become a new poster. I think this can add a certain amount of fun and counteract the boring nature of pure data.


I learned to quantify myself through reasonable data statistics and analysis, and tried new book interactions.


D –Describe objectively what happened.

The first semester consisted of 5 projects, 10 blog tasks, sketchbooks, and two assignments from the lecture. I did my best to complete all the tasks. I have learned a lot of new design thinking and useful design techniques, and I have mastered them through continuous practice and achieved proficient use.

Project 0, My way, I used a steam wave style poster in the communication design to show my journey. Project 1, Conditional Design. Through Conditional Design, I learned user-oriented design thinking, logical thinking and other thinking and design methods, and showed the entire process of the project and my animation in the form of brochures and stop motion animation. Design thinking. Project 2, Everyday People, I collected actual data in a survey of Winchester’s tourism industry. I showed the Persona, Empathy map and user experience map of two types of users in a comparative form. Project 3, Occasional Rain, I chose the cyclists and motorbike rider group as my target user to design the weather application. I have learned techniques such as wireframe, prototype, sketch, principle. Through user testing, I made a second improvement to the weather app design. Project 4, How long is now, the last project is a summary of all the knowledge of the semester. I tried to apply the knowledge and technology I learned to this project, and I also tried to reference more advanced techniques, such as VR and AR technology, To enrich the project’s experience. I also try to quote Donald A. Norman’s “Emotional Design”.

In these 10 blog tasks, I read the articles and materials in the blog task carefully and recorded my understanding and personal opinions, which helped improve my thinking ability. Sketchbooks keeps track of all the ideas and projects I have learned.

I – Interpret the events.

My undergraduate major is interaction design, so starting with Project 0, I tried to use different display methods.

First of all, I studied in a non-native language environment. To overcome this difficulty, I downloaded all the materials that the teacher showed us in the classroom from the Internet, carefully read them, and extracted the key points to mark them. In this way, we have a deeper understanding and grasp of the previously learned knowledge and the newly acquired knowledge.

Secondly, I want to learn about the code. I joined the coding club and found related books in the school library for self-study. In terms of courses, through repeated practice and reviewing the way of PPT, I try to integrate the knowledge points and techniques taught by the teacher as much as possible.

The last thing is about the design process. These five projects have their folders, which is convenient for organizing and categorizing. I stored the projects, books, papers, and instructional videos that I referenced during the project in the folder so that the process of each project, the reference to the final output is more precise and logical. For example, in Project 3, Occasional Rain, I referenced David Hogue’s Interaction Design, which is an instructional video on the Lynda website. Then I combined the feedback from the user test with the instructional video, made changes to the interface in the project, and tried to upgrade the user experience. It means that I can gain more knowledge by combining theory with practice.


E – Evaluate the effectiveness and usefulness of the experience.

After the first semester, I learned a lot of new knowledge and techniques. Before studying in the UK, I had just one year of work experience as an interaction designer. When working in China, the business value is paramount. Although some working knowledge can be learned in this way, it is constrained and does not significantly improve the academic aspect. So I chose to study in the UK to improve my language skills while experiencing different cultural atmospheres, and I tried to focus on academic research. After studying in the first semester, I found that as my professional knowledge improved, my design ability and thinking also improved, which provided strong support for my design work.

How was this useful?

When I was in college, I experienced the thinking exercise of Chinese-style education in China. After learning about the interaction design industry for a short period in one year, I went to the UK to receive the thinking education exercise. This collision of different thinking is extremely helpful to my perspective on the problem Great help. The change of thinking mode can make me more comprehensive when I look at the problem, and at the same time, I can come up with some more innovative ideas when I think.

P – Plan how this information will be useful to you.

Through the first semester of study, I learned that user experience had played a crucial role in product success. I want to study further on how to improve user experience better and based on this to enhance the product and user interaction.

Nowadays, with the rapid development of virtual reality technology and augmented reality technology in the world, products will pay more attention to user experience than traditional interaction methods. After studying for a master’s degree, I plan to return to China to work on interaction design at a related company or studio.

How might this learning apply in my future?

In the next semester, I will try more different styles and techniques to achieve my design. With the advancement of technology, wearable devices will be one of the necessary products to upgrade the user experience. I want to combine design thinking with advanced virtual reality and augmented reality technologies to get better user experience.

Summer Task

I am from Taiyuan City, Shanxi Province. It is located in the northern inland region of China. In ancient times, it was called Jinyang, also known as Dragon City. It is a national historical and cultural city and a city with a history of more than 4,700 years.

Hukou Waterfall is the second largest waterfall in China and the largest yellow waterfall in the world. Standing not far from the waterfall, you can see the turbulent waves, and the momentum is very spectacular.

Mount Wutai is listed as a World Cultural Heritage and is one of the five largest Buddhist shrines in the world. Wutai Mountain has a vast number of Buddha statues, with more than 30,000 statues. Wutai Mountain is an ancient geological park with unique geomorphology and is a famous national geological park.

Taiyuan is an essential central city in the Midwest and is one of the cities with the most cultural heritage projects in China. The Taiyuan relics include the Jinci Gardens, Yongji Temple built in the Ming Dynasty, Lingxiao Towers, Longshan Grottoes, Mengshan Giant Buddha, Jikong Temple, Jinyang Ancient City Ruins, and Tianlongshan Grottoes, one of the top ten grottoes in China.

“The world’s pasta is in China, and Chinese pasta is in Shanxi.” Shanxi Province’s special snacks include knife noodles, ramen, knife noodles, rolling noodles, pickles, cat ears, ravioli and other pasta. Lao Chen vinegar is a traditional local flavour of the Han nationality in Shanxi Province. The invention of vinegar was also pushed to the Xia Dynasty, which is 4,000 years ago.

I chose to show this 2500-year-old city as much as possible with a 1-minute video, showing some of the natural attractions, night city views, and exceptional food.

Emotional Design

Emotional design is just a creative tool to express and give play to the designer’s thoughts and design goals. With the development of the times, this creative tool will become increasingly sharp. The book “Emotional Design” reveals three levels of human nature from the perspective of perceptual psychology, visceral, behavioural and reflective. It puts forward the importance of emotions and emotions in decision-making in daily life.

Viscera design-shape.

The more visual design conforms to instinctual thinking, the more likely it is to make users like it.

Behavioural level design-fun and efficiency in use.

Effectively completing tasks and having fun operating experiences are issues that behavioural level design needs to address.

Design for reflection level-self-image, personal satisfaction, memory.

The level of reflection is affected by the environment, culture, identity, identity, etc., and will be more complicated. Only when an emotional bond is established between the product, and the user and the self-image, satisfaction, and memory are affected through interaction can the product’s cognition be formed, and the product becomes the representative or carrier of emotion.

Interaction Design

Interaction design focuses on “user scenarios” and “user psychology.” The design object is “user behavior,” and the goal achieved is “useable, easy to use, and want to use.” Experience, emotion, dialogue, and logic are the basics of interaction design. Good interaction design makes the user’s understanding of the interface and the behavior to get feedback in line with psychological expectations.

When shopping on the website, users can browse featured products, search for specific products, track order status, and more. Based on the accumulation in life and the hint of the icon, after the user confirms the interactive elements and information, the user can interact based on experience. However, for some users, when users do not know what they can or should not do, the possibility of interaction will decrease. Although they may interact randomly, they continue to find and try other products. So for conventional devices, overall tips and guidelines when new users log in are essential. Lookfantastic uses a large amount of text to explain the icon in order to avoid the ambiguity of the icon, which reduces the user’s burden. However, when filtering products, only the brand and product use part can be filtered. If the optional brand that the user wants to refer to account for Most of the time, the user’s choice time will increase, but if the interaction function that excludes brands is added, the user experience will be enhanced.

 Shopping websites often display information on the number of products in the filter that match the filter value. The website chooses to display different homepages based on the customer’s profile, and shoppers will be affected by suggestions. Some shoppers want to receive this information to help them choose faster and smarter. At the same time, the website will also perform corresponding big data analysis on users. In most cases, the unsatisfied customers are not complaining, but choose to leave. So big data customer relationship management is a vital link. Nevertheless, Lookfantastic does not analyze users’ big data. Although it will not affect users’ shopping choices, it will affect users’ shopping experience. When users are not sure what products they want to buy, appropriate big data analysis is for users. Recommending some products will help users choose.

Although the timely response of the app is the best, there are always times when the app cannot respond in time for speed. In this case, in order to reduce the user’s anxiety, the user must be made aware that the APP is running its request, and the real process is being processed. Therefore, the APP should provide feedback to the user so that the user knows what is happening in the app at the right time.

The infinite loop animation provides feedback that the system is busy, but does not provide any information about how long the user will wait. Conventionally, this type of progress indicator should be used for fast response (within 2-10 seconds). Allowing users to stare at the spinning wheel or infinite linear animation for a more extended period of time will increase the bounce rate of the website or cause people to close the app. Another type of progress indicator indicates how long (roughly or exactly) an operation will take. This type of progress indicator is called a deterministic model. They are the most informative indicator types when waiting for animation feedback, because they show the current progress, how much has been done now, and how much is left unfinished. A visual indicator of a process approaching completion makes users feel relaxed and makes them more willing to wait.

For a new interaction method, a simple button transformation may not accurately express the interaction method, so when the user interacts with the device, use a dynamic image to prompt how to touch, rotate, shake and interact with the mobile device. Micro-interaction animation, this intelligent micro-interaction animation enhances the characteristics of emotional elements. However, for infrequently used device interactions, the frequency and time of dynamic prompts should be redesigned after user research. Prevent users from becoming bored frequently when they are unfamiliar with the interaction mode and reduce the interaction behavior and prompts. The guide page is not an excellent way to interact because the user must read all the information patiently and try to remember to force the user to learn before using the app. A good interaction should guide the user to gestures before and after the operation.

One way to improve the user experience is to avoid painful memories for users but to let them naturally identify the features of the product. From a design perspective, recognition is better than recall, both in terms of interface and content. In order to allow the user to continue the previously interrupted operation, a historical browsing history or a search history may be provided. Search engines provide users with historical search history to help them find what they have searched for before.

Project #4: How long is now

Asking for permission is like asking to keep a rock someone just threw at your head.

Any advertisement in public space that gives you no choice whether you see it or not is yours, it belongs to you, its yours to take, rearrange and re use.

PDF Document

Graffiti application – owl

This app allows users to create doodles anytime, anywhere. Combined with augmented reality technology, graffiti is changed from flat to three-dimensional. I tried to apply most of the knowledge and technology to the project in the first semester.

User Research

PACT can better define the overall planning of the entire project.


I created two personas for different users. Personas can quickly identify the actual needs of users, accurately find the pain points of users, and quickly summarize the results of user research to simplify the design.


Define ideas and functions.

USP – User selling points

Augmented reality and virtual reality
With the development of technology, people’s requirements for experience are becoming higher and higher. Immersive experience design has become one of the mainstreams of contemporary design. Currently, virtual reality technology and augmented reality technology can be better Achieve user demands for immersive design.

Interactive video
I combine interactive videos with graffiti learning to enhance user interaction with the product. Users can use their mobile phones to paint, which simulates the use of graffiti spray paint cans, while allowing users to save paint costs and the problem of painting venues.

APP Name

Based on the fact that most graffiti creations are performed late at night, I think of night owls, and I think of owls. The owl is thought to be able to understand human feelings and language, it is intelligent, and its head is very flexible.


The name of the app is owl, so I designed the logo with reference to the owl image.


Paper Prototype

I made paper models to test the workflow and several features. During testing, I found some problems with the app. For example, search functions should be added to facilitate users to search for video tutorials, etc. Second, more pages should be added for interactive display, and AR painting should also be added to richer immersive experience designs. Finally, considering the diversity of graffiti styles, I added the function of selecting graffiti styles to facilitate users to filter.

Digital Prototype

User Testing

Video of Dynamic Effects

Interface Display

Project #3: Occasional Rain

“The value of wireframes is the way they integrate all three elements of the structure plane: interface design, through the arrangement and selection of interface elements; navigation design, through the identification and definition of core navigational systems; and information design, through the placement and prioritization of informational components."

Weather App

Use a comprehensive design approach, such as PACT, wireframes, Prototypes, user-testing, etc. to test design ideas.

User groups : Cyclists and motorbike riders.

Before designing for cyclists and motorbike riders, I did some data research on this group.


Based on user research and my own riding experience, I created Persona, an app that lets cyclists quickly learn about the upcoming severe weather and rough roads.

Structure & Sketch

Lo-Fi Prototype and User Testing

I made that low fidelity paper prototype to test the workflow and main functions. Based on the feedback from the tests, I found that the design of the real-time and convenience of the weather reminder was not very good, so I redesigned it.

Video of Paper Prototype Workflow


Project #2: Everyday People

For the purpose of this project, imagine that you have been commissioned by Winchester City Council to carry out user research. This is part of an investigation looking at understanding and enriching user experience in and around the city.

Design Methodology

  • 5C model – Create, Collect, Collaborate, Concepts, Comprehend.
  • Project 1 is about doing research of tourism in Winchester.

Design Goal

Teamwork : What’s wrong with the tourism industry in Winchester? How can we promote the rapid development of tourism in Winchester?

Research – Collect

After discussions with the other five members of the group, we believe that the tourism industry can be divided into six parts for research: history, bars, restaurants, hotels, transportation and markets. I am responsible for the investigation of the market.


International student – Wendy

She often visits Winchester’s seafood market, but some of the hot products will be sold out after class.

Tourist from other cities and countries – Peter

Peter, 44 years old, he frequented the Winchester street market, and very much like Winchester Christmas market, because at the Christmas market you can buy a lot of unique souvenirs.

Tourist from other cities and countries – Chris Apple

A is 34 years old. He is in Winchester for the first time, so he doesn’t know the street market. He visited the markets because he saw them by walking on the street, but he didn’t care much about the street fairs.

Research in other parts – Other interviewers


International student

  • Fixed class time every week and choose short trips during breaks.
  • The economic budget at the time of travel is not very rich, and transportation and accommodation will be preferred, priority is given to local restaurants and higher rated restaurants for shopping and dining.

Tourist from other cities and countries

  • Fixed working hours and choose short trips during breaks.
  • The economic budget during travel is very abundant, and the convenient transportation mode is preferred, the accommodation environment is preferred, and the local restaurants and shopping evaluations are given higher priority.
  • More inclined to relax and monumental attractions.
  • Priority for attractions that are educational and meaningful for children.


Foreign students are users, and tourists in other cities are sub-users. I compare these two groups to quickly and easily find the pain points of users in the two groups.

Empathy map & User experience map