Fog.Up

Fog.Up is an integrated system of a mobile application, a digital screen protector, and a clip-on device that discourages people from overusing social media.

Oct 2017 | 5 weeks

Individual Project | Saber Zhang

Role | User research, ideation, interface design, prototype, video documentation

Software | Prototyped with Ai and Principle, made the video with Premiere and Ae, modeling by

Fusion 360

Objective: Out of Box Experience

The objective was to craft an Out of Box Experience (OOBE) for a new

service device that leads new users to useful actions that advance the experience/narrative, crafts a consistent overall experience, designs to facilitate behavior modification, and result in specific emotions.

Social media is so addictive

In this attention-driven economy, every industry including social media is trying their best to make people addicted to online content. We end up spending too much time on our phones through incessant scrolling and compulsive checking.

Need for limiting time

I conducted qualitative interviews with three college students who are social media users of two extremes to understand their relationship with social media. Enid uses social media excessively while Adam and Heng are infrequent users. During the interview, I asked them questions about the role of this platform in their lives. Then, I analyzed their mental model of social media usage.

1/4

By doing the research, I understood that:

High accessibility of mobile devices makes people get into a habit of checking their social media frequently.
Attention economy encourages social media companies to make their platforms addictive.
Social media drives anxiety. Based on my research, social media often perpetuates a vicious cycle of anxiety when its users do not derive the expected relaxation from their online activity.

How might we control the frequency of people checking social media by lowering the accessibility of their phone?

Make the limitation visible

Inspired by BJ Fogg's Behavior Model, I defined my goal of helping people stop the over-usage of social media as a Black Path Behavior (the permanent cessation of a behavior). To achieve a Black Path Behavior, we must remove or diminish one of the variables in Fogg's Behavior Model—trigger, motivation, and ability. Since many factors can trigger the behavior of checking social media, I limited my focus to decreasing the motivation and the ability to reach the social media.

Next, I developed 30 ideas on potential product solutions. Ideas were voted by my peers to measure the impact of each idea. I then mapped these out on the coordinates which measure the impact and achievability. The reloading glass idea was selected ( a glass that becomes foggy when the user reaches a high level of anxiety).

1/3

Final Concept Fog.Up

Based on feedback, the reloading glass idea doesn't limit the accessibility of the medium-phones. Eventually, I settled on the idea of making the phone foggy when users overuse social media. After researching existing technology, I found OLED screens can achieve the effect of becoming foggy when electricity passes through it. I reframed "overuse" as users' setting a time limit to be spent on each social media platform. Below is my demonstration of how the final concept works.

Narrate the experience

To understand how my users would go through the experience, I sketched out

storyboards. Then I designed the app's screen flow based on it.

Branding: Hermit in the fog

Since this product is used to relieve anxiety, I developed a style tile that conveys a feeling of refreshment and calmness.

Final screens & animations

To convey the feelings of refreshment and calmness, I made the animation light and subtle. Because the experience has more to do with the physical aspect of the phone itself, I chose to only show the assembly guide and the initial report.

Futuristic physical prototype

In the out-of-box experience video, packaging is essential. To make a box which prompts curiosity within users, I researched the existing package and made one myself. For the clip-on device, I first built the model in Fusion 360 to determine the size. Next, I used museum board to make the prototype.

Next step

Physical prototype that works

Based on my research, there is

transparent OLED screen that can function similarly to my concept. I am expecting to test this with real users and see if this concept actually works.

Learnings

Know the technology

Out of the thirty ideas I brainstormed, I came up with a few ideas without knowing if the technology actually existed. I ended up spending too much time researching the feasibility in the technical stage. Through this, I realized the necessity of keeping up with the newest technology and also news in other fields.

Prioritize tasks

For this project, we only had two weeks to make the video and develop both physical and digital prototypes. This time limit pushed me to map out and prioritize my tasks. I also needed to make a harsh decision on my concept to measure which one had more potential to execute and could clearly be explained in video format. This project makes me think about the importance of prioritizing tasks to produce the best result within a limited time.