multimedia arts      ·      visual communication     ·      archive     ·     info

Mark

Muted Time






Always on Display and Theme Design
Collaboration with OnePlus

2021
Figma . PhotoShop




· concept ·

Muted time reduces time anxiety and motivates productivity by breaking the concrete presence of time on mobile phones. The design blurs the presence of time and visualizes the insight of the user’s unlocking frequency.


The design consists of an Always on Display, icon package and charging animation. Designed for OnePlus.







context




· target group ·
Students; people who need to work with time management and/or deadlines.


· what is Always on Display? ·
Always On Display is a feature that mainly available on Android systems. You can choose multiple clocks or "clock faces", display contextual info such as your reminders, music player, and of course, notifications.

OnePlus has been taking advantages on the feature to create more customized and insightful AoD for users.









interview








︎

︎

︎

NAME

Steven W.

Jenni Z.

Jun W.


AGE
25
22
20

INDUSTRY
Communication Design
Architecture
Echnomics & Communication

ACADEMIC YEAR
Grad School
Senior
Junior

LOCATION
London
San Francisco
Shanghai




How is the relationship between you and your mobile phone?



︎ 
Sometimes I feel my mobile device is a tool for me to improve the quality of my life. However, there are moments that I think the allure of my cell phone makes me strongly addicted to it. Instead of saying that we control our cells, I’d like to say that cell phones control us in the same way.

︎ It’s like a shadow of mine. Follows me wherever I go.

︎ I think it is the closest friend of mine. Although a lot of times I wish to stay away from it for a while, but it is so hard to do so.



How do you wish to improve the “relationship”?


︎ I wish that I would reduce its significance on me and my life.

︎ Exposed to the era of digital devices, I would like to keep a “distance” from my phone rather than addicted to the world of the phone.

︎ If I could be able to get rid of it when I want to relax, that would be great.




How does smartphone impact your daily life/academic life?



︎
COVID-19 lead us all study online. Therefore, those apps include Zoom step into my academic life. Mobile device becomes a very useful tool for students.

︎ Smartphone seems to be the connection between me and the world. But now it occupies most of my time. I seem to be supervised by my phone, it is telliing me what to do all the time.

︎ All electronic devices have become a tool to support my daily needs and academic needs.



What about the phone that troubles you the most?


︎ Sometimes, playing phone takes all your time, and the time just pass through your fingertips without noticing. Especially during nighttime.

︎ I can’t help myself to check my phone, check the time all the time, check messages. I feel overwhelming by the feeling.

︎
Constantly check the time and notifications. Making me feel like there is nowhere to hide from the time.










issues





︎
Sleep Disorders
INSOMNIA
Checking your phone stimulates the brain so we are more active and awake,” says Dr. Walia. “Even just a quick check can engage your brain and prolong sleep.”

TIREDNESS DURING THE DAY
Nighttime smartphone use can mess up your sleep cycle.

DECREASE SLEEP QUALITY
The blue light from the screen suppresses melatonin. Melatonin is a hormone responsible for controlling your sleep-wake cycle.

INCREASE FEELING OF ALERTNESS
Checking your phone right before bed can lead to distracting emotions, thoughts and anxiety. To have the feeling of always being available even during nighttime is not good for mental health.



︎
Time Anxiety
SMARTPHONE INCREASES THE LEVEL OF STRESS AND ANXIETY
Having devices in our hands all of the time keeps us in a state of alertness that can be draining over time. The amount and type of information is not often filtered for urgency or importance.

TIREDNESS DURING THE DAY
The more we focus on the limited time we have, the more limiting our time feels.

REDUCED PRODUCTIVITY WHEN CONSTANTLY CHECKING TIME
Brain and thoughts constantly getting distracted. Anxiety keeps increasing along with productivity going down.










user persona



︎ Rahul Rana 






MAJOR
Computer Science
AGE
24 yo
LOCATION
San Francisco, CA
FAMILY
Living with girlfriend




BIOGRAPHY
Rahul is a part-time student majoring in computer science, and a part-time developer at a tech company. He is renting an apartment with his girlfriend. He is always trying to balance and separate work and life.



NEEDS
>
Reduce anxiety about time passage
> Separate work and life
> To be able to fully relaxed when off work



INTERNET
︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎

SOFTWARE
︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎


APPS
︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎

GAMES
︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎

SOCIAL MEDIA

︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎

MESSAGING
︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎︎




PAIN POINTS
He can’t help himself to forget about works and deadlines even during weekends and holidays. He feels anxious about unfinished works so that he cannot enjoy his holiday with his girlfriend. Especially during COVID, it has become harder for him to separate work and life while he is working from home.










user journey map

 ︎ Rahul Rana



SCENARIO
It’s near the end of a semester, Rahul is trying to finishing up with his finals. At the same time, he wish he could have enough sleep and relax time in order to maintain energy.



GOALS

> Get works done.
> Enough sleep and energy.
> Reduce anxiety.













design process



· values ·

Cozy

Minimal

Calm




· moodboard ·
The collection shows the mood and atmosphere that Muted Time wants to bring to its users.





· inspiration ·

De Stijl

[means style in Dutch] was a circle of Dutch abstract artists who promoted a style of art based on a strict geometry of horizontals and verticals.” — Tate




The De Stijl responded to the chaotic trauma of World War I with a “return to order.” The artworks provides a strong organized and balanced sense of feeling. While it has so much strike rules, artists like Piet Mondrian still keep open-minded approaches. This motivates himself to invent new solutions, instead of repeating the same structures over and over again.

Being organized and well balanced, at the same time being flexiable are the keys of De Stijl to bring into Muted Time.









color palette


· choice of colors ·
Inspired by De Stijl, added on to it and modified to make this cohesive color palette, which also present the key values of Muted Time: [cozy, minimal, calm].










insight Always on Display



· concrete time ·
When the clock on the phone is available all the time, constantly checking time on the phone would increase time anxiety and reduce productivity.







*

Muted time reduces time anxiety and motivates productivity by blurring the presence of time and visualizing the insight of the user’s unlocking frequency.

*








01     [Muted Time Mode]
blurs the presence of time and shows the user’s frequency of unlocking the phone through the blurriness and saturation of the digital clock.

02     [Standard Mode]
shows a more readable time with slightly blurriness. The user could shake the phone to switch between modes




· animation sequences ·

01
The display starts with a slightly blurred and fading visual on each number. 

The irregular arrangement of the clock and the abstraction breaks the concrete presence of time on mobile phones.
02
According to the insight data of the phone’s locked period since the time the phone gets locked. The longer that the user doesn’t check on the phone, the blurrer and more colorful the time(numbers) would get. 
03
Every time the phone is locked, the numbers would spread into different positions and slightly changes the scales.















wallpaper / unlocking animation




· version one ·
From [Muted Time] Always on Display to a matching wallpaper with scaled down and more organized clock at the right top corner.




· version two ·
Following De Stijl movement’s “return to order” from chaos. The wallpaper shows rectangular shapes which blocks the presence of the clock numbers.




01
The wallpaper is visually connected with the always on display. The current color of the AoD is directed reflected on the wall paper.


02
If the user checks on the phone frequently and shortly after the previous unlock. The wall paper would also appears to be low saturated and faded.


03
The lightmode follows the same structure, and give a bright and fresh look.










charging animation




· ︎ ·
The percentage of battery is reflected by the color filled on the clock numbers.





· alternative variation ·
The charging state is visualized by the level of blurriness.












icon package design




· monochromatic ·
The icon package design follows the blurry feature and abstractions creating an immersive experience all throught the interfaces.



· light mode ·





· dark mode ·




· modes switching animation ·





· drafts / variations ·