Yiwei Sang
Home/Work/About
Let’s Create Something Together
sangqiqi1001@gmail.com
Do we really understand sleep?
For this collaborative project, I worked as the sole interaction designer to create a website for a community focused on communication. I was responsible for brand definition, interaction design and creating the basic design system framework. I also contributed to the concept development and execution of the project by participating in critical thinking sessions, workshop planning, and video production with team members.
Role:
Sole UX/UI Designer, Visual Identity, Web Design, User Research, Film editing
Duration:
2 Months
Tools:
Figma / FigJam
Illustrator
Photoshop
Adobe Premiere
Project type:
Web UX/UI, Brand Design, Design system, Team work
A Hub for Cultivating Collective Narratives around Sleep through Ecological Storytelling.
Design Challenge:
This project centers on the theme of sleep and power, building a co-creation organization for creators and offering them workshop activities. Given that the topic of sleep power is serious and has a certain conceptual entry barrier, the main challenge is to help users quickly grasp the organization’s core concept and overall activity framework. The website must also create an environment where creators can easily join the organization and establish meaningful connections with each other.
Project Goal:
The aim is to engage users through storytelling, sparking curiosity and prompting them to reflect on the issue of sleep power. This narrative approach should naturally lead to deeper interest in the organization. The website should provide a clear, intuitive view of other participants, making it easy for users to connect and collaborate in real time.
The Design Brief
How do I build an entire project from 0 to 1?
Design Process
Throughout the project, a disciplined design process helped me to orientate myself quickly as there was still a lot of thinking about the design to be done upfront.
Framework
User flow
User research & Persona mapping
Brand & UI Concept
Simple user testing + iteration
Design System
High fidelity + detail optimisation
Build on framer
Sitemap
Discovery & Research
Information Architecture & UX Plan
Visual & UI
Development
Start Point
Project finished
ONE-ONE Interviews
We are expected to have different expertise, competence, ethical positions and political views.
The data from the six participants reflected diverse academic backgrounds and approaches to storytelling.
Participants emphasised the importance of research and experimentation in their creative process, with a focus on challenging social norms and advocating for representation.
It is hoped that more connections will be made with other participants and that they can work together to advocate for the creation of new paradigms.
User Profile
Through multiple user interviews, combined with the user profile carving method, through the acquisition of user behavioral information data, analysis, abstraction of specific labels, the user profile will be accurate.
Profile:
Master’s student in Design Theory
Age:
26
Background:
Currently pursuing a master's degree at an art and design university, Li Wen focuses on how political power influences design language and visual discourse. She is passionate about critical design approaches and often applies theoretical knowledge to real-world social issues.
Interests & Behaviors:
Frequently participates in civic initiatives related to urban space, public engagement, and media discourse
Uses spatial and visual tools to express social criticism
Deeply interested in the politics of sleep, especially how labor rhythms, urban lighting, and bodily autonomy are shaped by power structures
Profile:
Freelance Writer & Social Column Editor
Age:
29
Background:
Han Yu is a young writer who contributes to and edits social commentary for various publications. His main interest lies in how biopower infiltrates everyday life, especially in relation to sleep, body rhythms, and control. His writing is known for its sharp analysis and composed, critical tone.
Interests & Behaviors:
Regularly writes about the body, sleep regulation, temporal control, and capitalist structures
Draws heavily on Foucauldian ideas of power and the body
Engages in public discourse by using writing as a tool to provoke reflection on normalized systems
Design Guidelines
After getting to know the users and running workshops, I needed to think of a way to take abstract, rich and serious content and present it in a way that was easy to use and smooth to understand.
Storytelling
Visual impact
Ease of use
Consistency
Intuitive
Efficient
Website Sitemap
Designing this site map is the visual representation of the card sorting exercise. It laid the groundwork for building the site map. Here you can see the navigation will have multiple pages within each category.
Lo-fi pages
I started with a simple expression of my ideas with paper and pen, and digitised the page after many rounds of discussion and tweaking.
LOGO Design
In our project, we aim to create a space that facilitates a symbiotic relationship between participants and promotes a process of contamination between different sleep narratives. Therefore the logo is inspired by mycelium and expresses a sense of natural symbiosis.
Somnuscelium
Drawing inspiration from the root system of mushrooms to demonstrate symbiotic relationships
Somnus
Mycelium
"Somnus" is a Latin word meaning "sleep"
Typography Color
IBM Plex Mono
Italic
Aa Bb Cc Ee Ff Gg Hh li Jj Kk LI Mm Nn
Oo Pp @q Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
Bold Italic
Aa Bb Cc Ee Ff Gg Hh li Jj Kk LI Mm Nn
Oo Pp @q Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
H1/64pt
Main headings
H2/48pt
Subheadings
H3/20pt
Full text
H4/16pt
Notes
The colours have been chosen for their vibrant contrast and look visually striking, which can be used effectively in visual identity, web design, and the colour scheme is clashing and thought provoking.
#F3F0E5
#0254DC
#FFA71A
#E019EC
#12161D
Simple Design System
Refer to the IBM Design System to build a simple component system for easy website specification.
GRID
Desktop Width: 1920px
Gutter Width: 24px
Column Width: 105px
Number of columns: 12
Margin: 200px
Critical Design Process
The whole project has gone through a complete theoretical research as well as a discursive design section, and a short film of a very discursive nature has been shot. The workshop part of the project has been rehearsed and practiced several times and has been successfully organised at the University of Aalto.
Somnuscelium
sleep?
Google.com
Come experience and join the sleep revolution we are bringing!
Awareness through stories
In the homepage design, I wanted to build a complete chain of stories through scrolling interactions to help users understand what our organisation is all about. The contrast of cut and paste images and colours, and consistent back and forth descriptions all contribute to the dynamism of the user experience, while making the information easy to perceive.
Understanding through questions
The illustrations and layout of the website have been carefully thought out to present our task to our users with the help of a question-answer format.
Program - Workshop
Demonstrate the process and results of the workshop, get input from participants, and invite other creative workers to participate in the workshop.
Come and join
The main purpose of the project is to provide a platform for users to participate in co-creation, so a wealth of information is essential. Short labels help visitors to quickly capture key points, and different card designs clearly differentiate between different forms of participation.
Google.com
