MFA Thesis: IdleTime Process Book

Page 1

Yihan Hsia MFA Thesis project

Discover >

1


2

< IdleTime


Discover >

3


4

< IdleTime


MFA Thesis project 2014–2016

Discover >

5


6

< IdleTime


Discover >

7


MFA Thesis project: IdleTime Yihan Hsia Academy of Art University Fall 2014­— Fall 2016 Instructors: Phillip Hamlett, Bob Slote, Anthony Jagoda, Carolina De Bartolo

8

< IdleTime


Contents Ch.1 Discover 1.1 Background & problem 12 1.2 General investigation 16 1.3 Focus group 22 1.4 Online survey 28

Ch.2 Define 2.1 Five top insights 38 2.2 Defining a goal 44 2.3 Related Facts 48 2.4 Similar competitors 54 2.5 Target audiences 56 2.6 Strategy charts 58 2.7 Materials matrix 60

Ch.3 Design 3.1 The first approach 64 3.2 Logo development 72 3.3 Illustration development 80 3.4 User experience 84 3.5 User testing 132

Ch.4 Deliver 4.1 Brand Identity 154 4.2 The IdleTime Application 168 4.3 The IdleTime Website 178 4.4 The Facts posters 188 4.5 Promotion video 194

Discover >

9


10 < IdleTime


Chapter 01. Discover 1.1 1.2 1.3 1.4

Background & problem General investigation Focus group Online survey

In this chapter, I will describe the background of my thesis and my investigations through an online survey, focus group and reading materials such as books, website articles and videos. During the process, I found some interesting insights to support my thesis statement.

Discover > 11


12 < IdleTime


1.1 Background & problem Personal motivations for slowing down vary, but often stem from a sense that all of the more in our lives has not made them better. Overwhelm, stress, and a sense of disconnection are common symptoms of trying to deal with too much in a fast–paced, commodity– filled, and highly technological culture. Slow Living addresses the desire to lead a more balanced life and to pursue a more holistic sense of well being in the fullest sense of the word. This is the initial reaction for most people when they being told to slow down. Chances are you would really benefit from more of it. The first thing is to put your smartphone and any technological device away, try to cook a good meal for you self, or read an novel for an hour without any bother. You may feel anxious when you do them in the first time, and you may feel like you are wasting time. The reason is that we are so used to the speed and fast world. Once you do it, you will find out that time become your friend because you have more flexibility to use it. Slow Living means structuring your life around meaning and fulfillment. Similar to “voluntary simplicity” and “downshifting,” it emphasizes a less-is-more approach, focusing on the quality of your life. Slow Living addresses the desire to lead a more balanced life and to pursue a more holistic sense of well-being in the fullest sense of the word.

Discover > 13


I would like to promote the idea of softer life style, and educate people how to slow down their steps in order to have a better life. This is my starting point.

14 < IdleTime


Slow down. Be present. Be mindful. Reflect. Reconnect.

Discover > 15


1.2 General research

16 < IdleTime


Books

The Power of Slow: 101 Ways to Save Time in Our 24/7 World 2010 by Christine Louise Hohlbaum ISBN-13: 978-1250058591 In Praise of Slowness: Challenging the Cult of Speed 2005 by Carl Honore ISBN-13: 978-0060750510 Mindful Tech 2016 by David M. Levy ISBN-13: 978-0300208313 Slow Is Beautiful 2014 by Tsuji Shinichi L’art de la simplicité 2014 by Dominique Loreau

Discover > 17


18 < IdleTime


Websites

psychologytoday.com Psychology Today by Sussex Directories, Inc. zenhabits.net zen habits: breath by Leo Babauta digitaldetox.org Digital detox by Digital Detox LLC mindful.org mindful by Foundation for a Mindful Society www.ted.com TED Talk by TED pewinternet.org Pew Research Center by Pew Research Center gallup.com Gallup by Gallup, Inc. huffingtonpost.com The Huffington Post by TheHuffingtonPost.com, Inc. scientificamerican.com Scientific America by SCIENTIFIC AMERICAN, A DIVISION OF NATURE AMERICA, INC. techland.time The TIME Mobility Poll by TIME, in cooperation with Qualcomm

Discover > 19


20 < IdleTime


Discover > 21


1.3 Focus group Goal Uncover insights through the conversation with target audience. Date 11/04/2014 Participants 9 young adults

I created a house event and invited my friends to discuss about my thesis topic. I treated the meeting just like a casual home party because I want to make my guest comfortable and relaxed to share their experience about their life paths. I also designed invitations and brochure to get guests into the topics. It was fun and during the meeting, everyone was willing to tell others their feelings toward their personal daily lives.

22 < IdleTime


Discover > 23


Participants & their thoughts

24 < IdleTime


“We want to do million things in one time, and that is impossible.” “Don’t force yourself to slow down, it will come naturally if you are involved in it”

“Having my own time and doing what I like help me control my emotion, which leads to a calm mind.” –Joy Pa,

“I just want to get everything done. It makes me feel secure and calm.” –Jack Chu, game designer

web designer

–Rolfuson Chung, game designer

“For me, slow lifestyle doesn’t mean that slowing down my daily schedule, it means slowing down my mind.” –Aria, illustrator

“Spending time on finding a right way is more important than try to finish it fast.” –Louise Tsai, graphic designer

“In that 5 minutes break, I don’t think anything about my work, anything.” –Zoey Lin, graphic designer

Discover > 25


26 IdleTime > 01 Discover >


Discover 27 > 27


1.4 Online survey Goal To investigate modern people’s thoughts about the pace of their lives. Date 02/28/2015—03/06/2015 Participants 97 people invited online To gain more thoughts from different people, I conducted an on-line survey to reach wider audiences. Besides my friends from 20­to 30 who is main the internet users, I also asked my elder friends to take the surveys and spread it among their social networks. I got 97 people taking my survey and observed the difference between comments from different ages.

28 < IdleTime


Questionnaire General Questions 001. What is your age? 002. What is your gender? 003. What’s your job? 004. Which country are you from? 005. Do you have kids? Do you live with them?

Questions about lifestyle 006. What takes the most part of your life? 007. Please describe the pace of your life in general. 008. How often do you take a rest during a workday? 009. What activities makes you feel calm and relaxed? 010. What places make you feel calm and relaxed? 011. Do you agree that “slowing down” can improve the quality of modern people’s life? 012. Do you want to slow down the pace of your life? 013. If you want to but can’t slow down, what may be the reasons? 014. If we separate slowness into inner perspective and outer perspective, what kind of person are you? 015. Tell me about your understanding of “slow life,” please describe not only the lifestyle but also emotional performance. 016. Do you believe slow life can happen in this modern world? why? 017. Tell me about your impression of “slowness.” (For example: I think slowness is a bad thing, because it... or I think slowing down is good because it...)

Discover > 29


Highlighted results

Q: Do you agree that “slowing down” can improve the quality of modern people’s life?

No, I don’t agree I am not sure.

3.3%

15.2%

Yes, I agree.

81.5%

30 < IdleTime


Q: How often do you take a rest during a workday? (Taking a rest in here is defined as a conscious behavior.)

More than two hours

Every two hours

Only when I need to go to bathroom

Every each hour

Others

10

20

30

40

Discover >


Q: Please describe the pace of your life in general.

Normal

32%

Slow

10.3% Very slow

1%

Fast

42.3%

Very fast

14.4%

32 < IdleTime


Q: If you want to but can't slow down, why might be the reasons?

I am too busy and don't have time

I am afraid of being judged by other people I don't know how to slow down

Other

10

20

30

40

50

Discover > 33


Highlighted answers Q: Tell me about your understanding of “slow life”, please describe not only the lifestyle but also emotional performance.

“Be it not just a pause of action and mind, but at times even lead to a detour in one's thinking process. “Slow” is an applicable term as in contrast to the drumming pace dominating the lives mostly of those heavily exposed to business and commerce.”

“For me, I believe that slow down my life means to spend time for myself, talk to the people who I love, and embrace the quality.”

“Slow life means that we can have good control of our daily lives.”

34 < IdleTime


Q: Do you believe slow life can happen in this modern world? why?

“No. Modern life purposefully puts you into debt so you constantly have to work. This leaves little time for relaxation/slowing down, and the times we do have to slow down are marred by stress.”

“I think people are trying to do that but it seems a bit hard to make it happen. Right now people are more demanding about prompt reply and always put their personal needs in priority.”

“Why not? This is a world where people have benefited from standardized procedures, regulations and even thinking models. People believe in what has proved useful and effective, thus, people believe in the good of being quick, saving time, and doing more. When over-simplified, one might think that fast is good, so slow is bad. In my opinion, living a slow life is not adopting an entirely opposite approach to the good notion of fast, however, slow life is merely not entirely fast. There is a whole spectrum of possibilities between the extremes of fast and slow, and who can prove that they are all improbable ways of living? As long as you have a choice.”

Discover > 35


36 < IdleTime


Chapter 02. Define 2.1 2.2 2.3 2.4 2.5 2.6 2.7

Five top insights Defining a goal Related facts Target audiences Similar competitors Strategy charts Materials matrix

After researching widely, I picked several important insights and even chose three out of them to develop my design strategies. Since slowing down is a vague definition, I tried hard to set a realistic goal and statement of my thesis. This chapter describes my decisions about further thesis directions and target audiences.

Define > 37


2.1 Five top insignts I chose five top insights from my wide researches. Each insight shows different point of views around my topic. I also considered about the design opportunities of each insights and how can I leverage my design capacity on them.

38 < IdleTime


01 Distractions such as digital devices and trivial thoughts keeps people not being mindful and present. We live distracted lives and our ability to focus, create, and accomplish suffers significantly. It is increasingly clear that distractions are not going away on their own. Being connected all the time means we’re subject to interruptions, we’re constantly stressed about information coming in, we are at the mercy of the demands of others. Instead, the responsibility is ours to live attentive, intentional lives in a world of distraction. This is a goal we must continue to seek. Source: The Power of Slow by Christine Hohlbaum

Define > 39


02 Creative ideas happen when you stop checking your phone. “You come up with really great stuff when you don’t have that easy lazy junk food diet of the phone to scroll all the time.” — Sandi Mann New Tech City’s Bored and Brilliant is a week of challenges that will guide you to less phone time and more creativity. The average mobile consumer checks their device 150 times a day, and 67 percent of the time, that’s not because it rang or vibrated. Forty-four percent of Americans have slept with their phone next to their beds. Sandi Mann, boredom researcher of the University of Lancashire of the U.K, said Idle minds lead to reflective, often creative thoughts. Minds need to wander to reach their full potential. Source: www.wnyc.org

40 < IdleTime


03 Unhappy people feel more rushed, yet watch more TV and than happy people. TV is gradually replaced by smart devices now.

68

mins

17

mins

Time perception can have a significant impact on well-being. For instance, in a quality of life study by the General Social Survey drawing on data collected for 34 years and 45,000 participants, sociologists John P. Robinson at the University of Maryland reported television viewing was most frequent in unhappy people, indicating that TV consumption overall has no lasting benefit. Clearly, what we do with our time has a long-term effect on our level of happiness. Since smart devices came out of markets, watching TV is gradually replaced by reading and checking smart devices such as smart devices or tablet. A study from Northwestern University revealed that the more time people spend on their phones, the more likely they are to be depressed. The average use for a depressed person was 68 minutes, compared to just 17 minutes for someone who has better mental health.

Define > 41


04 Technological advances as a possible explanation for our collective sense of urgency. According to British psychologist, Dr. Richard Wiseman, the overall pace of life has increased by 10% worldwide since the mid-90’s. In some places, it has even increased by 20%. And in the case of Singapore, it has increased a whopping 30% in the last decade and one-half. Wiseman points to technological advances as a possible explanation for our collective sense of urgency. The immediacy of communication has informed our time perception. At present, ‘now’ has become the new yesterday. As a result, we are left time-crunched, stressed, and overwhelmed. Despite the rise in stress-induced illness, we continue to pound the path in a furious race to our imaginary finish line. Source: Psychology Today

18 v=

Ac 42 < IdleTime

tu

al

d

a ist

6 ,0

nc

e

0

i 0m

8 :3

4 ,4

/s e

0

c

m 1k

=2

3

5 8,8

6m

i


05 Even some digital users admitted that they are addicted to their smart devices, they don't know how to deal with it. Usually, people won’t consider themselves addicted to smart devices. However, through my interview with one of my friend, she is seen as heavy phone users, she stated even she knows using phone overly affects her mental and physically healthy, it is hard for her to quit this habit. She said, “Because it is so easy to access my phones, and things are going on it all the time.” She tried not to pay too much attention to it, but once she noticed that she tried to ignore it, she pays more attention to it. She also said she prefers to connect people by texting instead of calling them or meeting in person. She couldn’t explain the reason. “It naturally becomes like that.”

How can I use you wisely?

Define > 43


2.2 Defining a goal Because the term"slowing down" is too abstract and vague, which can mean many different things, it is hard to define the goal of my thesis project. Without a clear goal, design solution will eventually fail. So I used abstraction laddering to find the right point of view and tried to restate my thesis topic and go in a solid direction.

44 < IdleTime


Technology constantly competes for our attention and urges our time perception. Why?

Fast-pace decreases the quality of life. Why?

Slowing down the pace of our lives.

How?

Being mindful and present. How?

Use our smart devices consciously and wisely. How?

Be aware of our digital behaviors and set up the environment with fewer distractions and do things really matters.

Define > 45


Goal: To encourage people to use their smart devices more consciously and wisely. 46 < IdleTime


Define > 47


2.3 Related Facts 1. Forty percent of Americans prefer to engage with people online than in person. Performics released the results from their 2012 Study, which asked nearly 2,000 Americans social media users about their use of social media across devices. 49 percent of would rather text than call a person. 40 percent feel more comfortable interacting with people online rather than in person. These new participants are comfortable increasingly replacing real-time communications with social media interactions. Source: Performics Hello!

...

40%

~!@

#

~!@

#

Hello!

2. Fifty percent of teens feel they are addicted to their mobile devices. According to the poll, which was conducted for Common Sense Media, a nonprofit focused on helping children, parents, teachers and policymakers negotiate media and technology. A larger number of parents, 59%, said their teens were addicted. The poll involved 1,240 interviews with parents and their children, ages 12 to 18. Source: CNN.com

Save me!

50%

48 < IdleTime

%^ &*

~!@ ()_ # %^ +@ &* #% ^% ^# % %

%^ &*

~!@

#

~!@

#

Sen

%^ &*

d

%^ &*


3. One third of Americans tend to do multitasking with their mobile devices. To better understand attitudes about mass mobility, TIME, in cooperation with Qualcomm, surveyed 4,700 people online and 300 by phone in eight countries. One of the results shows that there are one third of American participants tend to do multiple tasks with their mobile devices. 32% of them use mobile devices while driving a car, 35% while playing with children, 37% while attending a party, 36% while eating at a restaurant and 61% while watching TV. Source: TIME Mobile Poll 2015

32%

35%

36%

Define > 49


4. Younger users more likely to use their phone for preventing boredom, avoiding others and getting somewhere.

Percent Of smartphone owners in each age group who used their phone for the following reasons at least once over the course of 14 surveys spanning a one-week-period. 18­—29 30—49 50+

Avoid being bored

Avoid others around you

Find a good way get somewhere

82

55

15

33

32

93

47

37

57

Nothing to do... So bored...

Source: Pew Research Center: US Smartphone Use in 2015

50 < IdleTime


5. Text messaging is the most widely-used smartphone feature but voice/video calling remains popular.

Percent Of smartphone owners in each age group who used the following features on their phone at least once over the course of 14 surveys spanning a one-week-period. 18—29 30—49 50+

100 98 92

Texting messaging

Internet use

80

?

www.

93 91 94

Voice/video calls

91 87 87

Email

SNS

77

55

Video

Music

97 90

!

21

75

46

31

39

91

64

Source: Pew Research Center: U.S. Smartphone Use in 2015

Define > 51


“Electric communication will never be a substitute for the face of someone who with their soul encourages another person to be brave and true.” —Charles Dickens

52 < IdleTime


Nice to see you! Hello!

Define > 53


2.4 Similar competitors There are many applications, websites, even services that help people to use their smart devices more consciously. However, each of them has different features, I visited these websites and downloaded some applications to be my references.

Moments Moment is an iOS app that automatically tracks how much you use your iPhone and iPad each day. If you’re using your phone too much, you can set daily limits on yourself and be notified when you go over. Pros: It has Family mode that parents can monitor their children's phone usage. Cons: The user interface is confusing and visually dull.

Checky Checky answers a simple question: how many times a day do I check my phone? By giving you insight into your phone checking habit, Checky helps you become more aware. Pros: Single function makes this app simple to use. Cons: Numbers of checking phones sometimes doesn't reflect users' digital behavior. It is not a strong insight to change digital habits.

54 < IdleTime


Forest Forest is an app growing trees while you are not using your phone. Once you want to use it, the growing tree will die immediately. Pros: It is great to connect gaming with quiting, the visual illustration is also adorable. Cons: It is too cute so that it doesn't urge people to stay away from their devices.

Flipd Flipd makes all of your apps disappear when you use it. There is no way to get them back. Pros: It is a strict app for people who want to quit their phones. Cons: There is not flexible area people can adjust based on their personal daily routine.

Offtime Offtime allows you to customize your connectivity in different situations such as family time, work time, my time and so on. The app’s intuitive analytics make it easy to identify your habits and take action to change them. Pros: Customized mode function is useful and smart. Cons: It may get too complex to use these features since there are too many things going on and may get user spend much time on it.

Define > 55


2.5 Target audiences Primary People who are overly connected to their smart devices and lack self control. Secondary People who are overwhelmed and tired of digital clutter.

56 < IdleTime


Define > 57


2.6 Strategy chart Topic area The digital behavior of modern people’s digital behavior Goal To encourage people to use their smart devices consciously and wisely. Target audience Primary: People who are overly connected to their smart devices and lack of self control. Secondary: People who are overwhelmed and tired of digital clutter.

58 < IdleTime


01

02

03

INSIGHT

INSIGHT

INSIGHT

Unhappy people feel more rushed, yet watch more TV and play more games than happy people. They didn’t use their free time wisely.

Distractions such as digital devices and trivial thoughts keeps people not being mindful and present.

Addicted digital users aren’t aware of the negative effects brought on by improper behavior. Even they admitted, they don’t know how to deal with it.

»

»

» STRATEGY

STRATEGY

STRATEGY

Create personal bucket list to motivate people to put down their devices and to connect with people in real world.

Provide an environment with fewer distractions to people so they can be mindful and present.

Notify how unconscious digital behavior effects users mood and daily life badly and teach them how to deal with it.

»

»

» DELIVERABLES

DELIVERABLES

DELIVERABLES

An application that allows people to create their “bucket lists” and track their mood when accomplishing these lists.

An application that helps people to not be distracted by digital devices.

A series of illustrations to depict how digital behavior shapes our lives differently and to provide tips to stay away from smart devices.

A website to provide application information and a download link.

Define > 59


2.7 Materials matrix

iPhone application IdleTime is an application that helps people understand their digital using patterns and encourages them to use their smart devices more consciously. (3 points)

App promotional video An promotional video to introduce IdleTime application’s feature and teach people how to use it in their daily lives. (2 point)

This video will be put on website to provide more details to users.

60 < IdleTime


LEAVE YOUR DEVICE. LIVE YOUR LIFE!

Campaign Advertising posted on public and social media ads to promote the website and IdleTime application. (1 point)

This is the entry to introduce IdleTime to public audience.

Website IdleTime website provides the information of IdleTime app, facts of digital behaviors of modern people, and tips for people who want to stay away from their smart devices. There is a motion graphic video to promote IdleTime app as well. (2 points)

The content of the posters will also be on the website.

Facts posters A series of posters that depicts how different digital behavior shapes people’s daily lives and tips to stay away from smart devices. (2 points)

Define > 61


62 < IdleTime


Chapter 03. Design 3.1 3.2 3.3 3.4 3.5

The first approach Logo development Illustration development User experience User testing

Once I decided my design strategies, it is time to think about its look and feel. In this chapter, there are my visual explorations and identity development. For my deliverables, I will show the structure of the application and website. I also invited some friends to use my first prototype of the application and give their opinions. The user testing helped me to refine the user experience.

Design > 63


3.1 The fisrt approach At the beginning of the design process. My original idea is creating an app-controlled product that can filter signals around the users. So people can be more mindful and get good rest. I would like to show the process of the first stage of the project. It includes the IDLE app, the Home IDLE product, a promotional website and an app opening video.

64 < IdleTime


The IDLE app The main function of the IDLE app is to manage the settings of the Home IDLE product. It includes only three functions: Call lists, Scheduling, and Settings. People can edit the call lists to pass some emergency calls. People can schedule their IDLE time regularly. People also can set up more preferences in the Settings.

Design > 65


66 < IdleTime


Design > 67


The IDLE Home product I asked my friend who majors in industrial design to help me build the 3D model of the product. All the model shapes were remained simple and clean.

68 < IdleTime


IDLE Website I built a rough website to introduce the app and provide an access to the app and store of the product.

Design > 69


The IDLE App opening animation For the first time user, I made an animation to show how to use the product and application.

70 < IdleTime


However, through user interviews and user testings, people mostly think that it is redundant to have another item around. Just turning off the smart devices can solve the problem. So I changed the point of view of my thesis project. The insight I got from this process was that to make people do such things spontaneously is more valuable than just providing the product. Instead of a complex product with many settings, I want to provide a tool simply helps people practice mindfulness and being present. Before that; I also need to address how the practice is related to people's digital behavior. I didn't change my central concept; I changed the design strategy.

Let's regroup everything and reform the project.

Design > 71


3.2 Logo development I changed the name of my project many times, even after I started designing the logo, I wasn't sure which one described my project the best. When I started logo design, I used IDLE. During the exploration, I decided to change IDLE to IdleTime because I think “Time� is the key point in my project.

72 < IdleTime


Brand naming ideas

Mind Nap

Offline

Downtime

Pause

Smarter

Wiser

IDLE

IdleTime

Ideal Idle

Breathe

Simplicity

SLOWDOWN

Minimal

Moment

Digital Declutter

Design > 73


Chosen direction

Idle time Idle time

74

< IdleTime

Idle time


When I was in my app interface design process, I incorporated the closing eye icon to indicate that the smartphone is on its relaxing/ idling/ inactive mode and the lock icon represents the locked screen. So I used the eye to be the main icon of my project. I spent some times trying different typefaces and modified my workmark. This section will show the design process.

Idletime Idletime

Design > 75


Wordmark development [ Clone Round Latin Bold ]

76 < IdleTime

[ Clone Round Latin Regular ]


[ tschicholdarchitype normal ]

[ Tondo light ]

[ Filson Soft ]

idletime

Design > 77


I chose tschicholdarchitype normal to be the original structure of the IdleTime workmark. Because it's unique type form is really playful and goes well with the closing eye icon. However, to make it more special I modified the letter forms, made the stroke rounded and thicker to match the stroke of the icon perfectly.

78 < IdleTime


Design > 79


3.3 Illustration development To communicate with my target audience, I decided to use humorous illustrations instead of realistic pictures as my visual system. People avoid reading dark messages so I chose a bright and friendly illustration style to depict my thesis project to be attention grabbers I also created two characters and used them across all of my illustrations.

80 < IdleTime


Design > 81


Character development Boy faces & figures

82 < IdleTime


Girl faces & figures

Design > 83


3.4 User experience Each of my deliverables has a goal to achieve. The facts posters is for people to reflect their digital behavior and lead them to the website. The website is for people to more facts, tips and the infomation of the IdleTime application. The promotional video is for people to understand the project and the app. The IdleTime app is for people to pratice being present. In In this section, I will show the user experience design process of the IdleTime app and the website. It includes user flow development and user interface design. I will also describe the ideas behind the facts posters and the production of the promotional video.

84 < IdleTime


To reflect—

To access—

The facts posters

The IdleTime website

To understand—

To practice—

Promotional video

The IdleTime app

Design > 85


86 < IdleTime


The IdleTime App

The IdleTime app is an useful tool to help people understand their digital behavior and use smart devices more consciously and wisely.

Design > 87


88 < IdleTime


Design > 89


App user flows chart(1) Sign up IdleTime

Facebook account

Tours

Create a new account

Schedule

Set up IdleTime duration

Choose the time period you want to idle regularly

Click key button

Set up unlocked lists

Choose how regular it operates daily/ weekly/ specific weekdays

Set up

Click start

Save

Save

Screen locked

The screen will be locked during your scheduled IdleTime

Start

Time's up

End

Input mood

90 < IdleTime

Another round


Reminders

Statistics

Bucker Lists

Set up reminders of using certain Apps for too long

Statistics charts let users know their digital behavior patterns

Create a buket list to motivate users to do what they always wanted to do.

Choosing how long after using the Apps the reminder appears ex. 15 minutes

Choosing what Apps operate the warning reminder ex. Facebook, Pokeman GO

Save

Once you use Facebook or Pokeman Go over 15 minutes, the reminder will pop out: “You have used fa for 15 minutes, did you benefit from using the App?”

Resent data

Average data

Daily phone usage and mood

Average time spent on your phone

Week (Phone usage ,mood and comparison)

Average daily use frequency

Average device usage,

Add

Check

Typing

Input mood

Save

Save from “I will” to “I did”

Choose if sharing to social media

3 most used apps

Once user understand their digital behavior, they can use ‘Schedule’ and ‘Reminders’ to change their digital behavior.

Design > 91


App user flow chart(2) Setting

Auto replay

Turn on/off

Edit

About

Achevement

Log out

Share

When users reach certain amount of accumulated Idletime, the user gets one achievement card. Share IdleTime app with friends through email, messenger or social media

Save Choose sharing tool

Choose contacts

92 < IdleTime


Facts

Tips

Terms & conditions

Infographic about how digital behavior shapes modern people’s lives

Tips on how to get away from your digital devices

Privacy Policy

Design > 93


App interface development In this section, I will display the interface design development of the IdleTime app. As the process went on, I changed the visual expression several times based on class critique and feedback from people outside. I also refined my user flow in its details so the contents of interface were changed along the way.

94 < IdleTime


1st version

Design > 95


2nd version

96 < IdleTime


3rd version

Design > 97


User flows I developed six user flows to describe how the IdleTime app works in different functions. I will also display the finalized interface design in these user flows.

User flow 01: Log in/ sign up and see tours

98 < IdleTime


Design > 99


User flow 02: Edit unlocked lists and use IdleTime

100 < IdleTime


Design > 101


User flow 03: Schedule IdleTimes

102 < IdleTime


User flow 04: Set reminders for certain apps

Design > 103


User flow 05: Add a new bucket list item: ”Learning pour-over coffee”

104 < IdleTime


User flow 06: Check the accomplished bucket list item: ”de Young Museum”

Design > 105


User flow 07: Review statistics

106 < IdleTime


User flow 08: Manage settings

Design > 107


108 < IdleTime


IdleTime Website IdleTime website provides the information about the IdleTime app, facts about digital behaviors of modern people, and tips for people who want to stay away from their smart devices. There is a motion graphic video to promote the IdleTime app as well.

Design > 109


110 < IdleTime


Design > 111


Site map

IdleTime Homepage

App promotional video

App features introduction 1. IdleTime 2. Schedule 3. Reminders 4. Statistics 5. Bucket lists

Download link

Facts

Fact illustration (1)

Fact description (1)

Fact illustration (2)

Fact description (2)

Fact illustration (3)

Fact description (3)

Fact illustration (4)

Fact description (4)

Fact illustration (5)

Fact description (5)

Fact illustration (6)

Fact description (6)

Download link

112 < IdleTime


Tips

About

Download

Tip(1) Wear a real watch and get an alarm.

Project statement

Download link

Tip(2) Turn off your push notifications

Contact area

Tip(3) Unfollow people who aren’t your real friends.

Tip(4) Unsubscribe from unwanted mail lists.

Tip(5) Delete apps that waste your time.

Tip(6) Call people, just call.

Tip(7) Go out for dinner, and leave your phone at home.

Download link

Design > 113


114 < IdleTime


Design > 115


116 < IdleTime


IdleTime facts posters

A series of posters that depicts how different digital behavior shapes people’s daily lives and tips to stay away from smart devices.

Design > 117


Content development Then I came up an idea: for each moment, I will create two different scenes, one is using smart devices unconsciously, and another is using smart devices wisely. These sets form a normal day of a person. After all, life is composed of these small moments.

118 < IdleTime


To create content for facts posters I started to think about different situations that poor digital behavior affect people's daily lives. Not surprisingly, there are many things people would execute with digital tools. If people don't use them mindfully, it will lead to bad results. There were so many such situations so that I made them in daytime order. Then I came up an idea: for each moment, I will create two different scenes, one is using smart devices unconsciously, and another is using smart devices wisely. These sets form a normal day of a person. After all, life is composed of these small moments. People can understand the concept directly. I also create one main character to tell the story.

Design > 119


120 < IdleTime


Design > 121


I also did more research on the facts and studies are related to each situation and reinterpreted them in illustrations of my style. I came up this idea when I started to put them on the website. For the posters, I used question headline to make people curious about the answer. Although I did place the short answers at the bottom, people have to go on the website to see more descriptions and other situations.

Poster

122 < IdleTime


The completed illustration on the website

More descriptions on the fact happening in the illustration

Design > 123


124 < IdleTime


IdleTime Promotional Video IdleTime promotion video presents the concept and features of IdleTime app. Animating makes characters alive with humorous sense. People can understand IdleTime easily in a short time by watch this video.

Design > 125


Story development

126 < IdleTime


Design > 127


Storyboards & script As technology advances, communication between people becomes more convenient and faster. However, an overload of information and instant notifications distract you more easily and keep you away from being present and mindful. In addition, people are creating this habit of scrolling without any significant purpose. Using your smart devices unconsciously consumes a lot of time and can even lead to addiction problems. Although technology is invented to enhance the quality of people’s lives, how you use it makes a big difference.

128 < IdleTime


IdleTime is an app to help you use smart devices more consciously and wisely. It locks your screen for certain apps to make you take a break when using your devices too much. It helps you to schedule off-screen times to build a better daily routine. It sends reminders when you accidentally overuse certain apps. It tracks your phone usage and mood, which allows you to understand your digital behavior. It allows you to create a bucket list to motivate yourself to accomplish what you always wanted to do. Leave your device. Live your life. Create your IdleTime today.

Design > 129


130 < IdleTime


Design > 131


3.5 User testing After a long design process, it was time to hear people's opinions. After I designed my user interface and user experience, it was important to get people to use my app and see my website. I set up several tasks based on those important functions of the IdleTime app and told users to complete those tasks. I also revisited those interviewees who were heavy smart devices users and had them test my app because they were my main target audiences. Having people look and test my work was uncomfortable.However, I got so many useful comments and found some blind spots of my project.

Tasks 1. Set up IdleTime and edit unlocked lists, start to use IdleTime. 2. Schedule IdeTime regularly. 3. Set up reminders for 15 minutes for specific apps. 4. Review statistics, describe your understanding of those charts. 5. Add a new item to bucket list: “Learn pour-over coffee.” 6. Check a finished bucket list item: “de Young Museum.” 7. Manage settings

132 < IdleTime


Design > 133


134 < IdleTime


User no.1 Gwen Lai Freelancer, age 31 Digital habits 1. She checks her phone after waking up and before bed. 2. She tends to do two things at the same time, for example, cooking and watching TV or eating and checking phone. 3. When there is nothing to do, she would just be checking her smartphone. Comments 1. It would be better if there are dates in "I did" list.

Design > 135


User no.2 Edward Liu Industrial designer, age 26 Digital habits 1. He is a heavy smartphone user. 2. He mostly likes to scroll social media, read feeds and watch videos. 3. He is easily distracted by his smartphone even if he isn't using it at the moment. Comments 1. The homepage of website is clear, but it would be better if there were more interactions on tips page. 2. He likes the reminder function. It will really help to alert him about how much time he spends on social media. 3. The visual design of the application is a little bit flat. 4. The function of IdleTime should be more clear. Maybe having a hint to help people know where to adjust the timer. 5. Recording the mood rate every time is cool. The statistics will help people know the relationship between them and their smart devices

136 < IdleTime


Design > 137


138 < IdleTime


User no.3 Joy Pa Web designer, age 26 Digital habits 1. She usually checks her phone while commuting. 2. She hates that people keep checking their phones during parties or meetings. 3. Instead of checking feeds and posts, she uses her smartphone to contact people when she needs to. Comments 1. It seems there are too many functions in the app. This may decrease usage if it is too complicated. 2. It's not clear how to use some functions. Maybe add some hints for the first time users. 3. The statistics data users see should be more clear. Device usage and IdleTime usage is messed up. 4. The emojis are really cute!

Design > 139


User no.4 Joyce Lin Industrial designer, age 26 Digital habits 1. She had no Internet service on her phone for a long time. She just upgraded her mobile plan to 4G service recently. 2. She rarely checks her phone because she thinks there is not much to read or see. 3. She uses her computer to watch TV programs, but she said it increases her work efficiency. 4. When she is with friends, she rarely pulls out her phone and scrolls even if her friends are all checking their phones. Comments 1. I like those fact illustrations. They are presented in a humorous way but related to a serious fact. There are many details in them. It is fun to look at them. 2. About the app, I think it is an interesting idea. Although I don't have such problems, I will definitely recommend that my boyfriend use this app because he spends too much time on his device! It annoys me if he keeps checking his phone when we are together.

140 < IdleTime


Design > 141


142 < IdleTime


User no.5 Louise Tsai Graphic designer, age 27 Digital habits 1. She only checks her phone when there is missed call or if she has an appointment with someone around that time. 2. She won't reply or check messages right after she sees notifications. 3. She rarely scrolls in front of others because she think it is not polite. She wants to connect with people at her side. 4. However, she spend a lot of time watching movies and TV shows on her phone, especially before bed. Comments 1. It is good to have hints for first-time users. It was confusing about how to set up the IdleTime duration. 2. It is better to use the same visual hint for setting up time for the IdleTime and the Reminders. The icon for Reminders doesn't indicate it is editable.

Design > 143


Strangers hunting I refined those issues pointed out on all of my deliverables after the user testing. To get opinions from someone have never heard what I am working on, I started talking to strangers in cafes randomly, and ask them to use my website and app. Here are their comments and reactions.

144 < IdleTime


Design > 145


“This website is clear and easy to understand. The comparison of illustration is fun to see. More details provided make it even more convincing. ” —Frank Fullem, sofeware engineer

Other comments 1. It is surprising there are animations in the tips page. 2. The visual design looks like it is for kids. More lifestyle photos would be better.

146 < IdleTime


“The illustration depicts the horrible reality in a cute way and makes me laugh. Although I don't think I will use the app, I believe many people need it to practice focusing and being mindful.� —Paola Romano, graduate student

Other comments 1. Great job on those illustrations! 2. I want to recommend this app to people, especially those who are sitting with their friends but keep facing their phones.

Design > 147


“It is interesting that people usually think they don't need this kind of ap. The truth is that you see many people are use technology improperly. Personally, I like the Reminders and the Bucket list function the most." —Alisha Hieb, college student

Other comments 1. The time buttons on facts page don't make me think they can be clicked. Maybe put some bar or underline them to give a hint to users. 2. The app interface is clear, but there are many functions in this app, I probably will only use Reminder and Bucket list.

148 < IdleTime


“This concept is great. Actually I just deleted my facebook account today. I think the Reminder is a great function because it reminds me to be present again.” —Dominic Baldin, senior SCM engineer

Other comments 1. The navigation bar is clean and nice. May show something more engaging in the homepage. A blank green is not that attractive to me. 2. I like the animations on the tips page. It makes me read through each one tips. However, it's a little bit too much scrolling for the facts page.

Design > 149


“It is all about focus. Be focus on everthing you are doing. No matter it is talking, playing learning, working, or even thinking, just focus.” —Stefano Maldini, traveler

150 < IdleTime


Design > 151


152 < IdleTime


Chapter 04. Deliver 4.1 4.2 4.3 4.4 4.5

Brand identity The IdleTime App The IdleTime website The facts posters Promotional video

This chapter will display all deliverables of my thesis project, which including an application, a website, a promotional video, and advertising. I also included final visual standard guide to give the clear visual hint to target audiences.

Deliver > 153


4.1 Brand Identity Identity system plays an important role in a good brand. A completed visual identity system will be displayed in this section. These is also visual standard guide that others can follow if they use in their cases.

154 < IdleTime


Our logo The IdleTime logo is composed of an closing eye icon and a modified wordmark. The closing eye icon represents that the smart devices are in ‘idle’ mode. With the rounded corner shape, the wordmark gives friendly and warm feeling to viewers.

Deliver > 155


Logo anatomy Signature y

17y

y

y=1.2x

9y

8y

y=1.2x

27y

156 < IdleTime


Wordmark

x x

y= 1.2x = the diameter of

Note: x= the diameter of

Secondary signature 4x

16x Note: x= the diameter of

Deliver > 157


Clear space Signature x

x x = the height of the wordmark x

x

x x

x

x

Seconday signature x

x x = the height of the wordmark

x

x x x

158 < IdleTime

x


Wordmark x

x

x = the height of the wordmark

x x x x

x

Icon z

z

z

z

z

z z

z = the diameter of

z

Deliver > 159


Colors Primary colors 100%

75%

50%

25%

IDLE GREEN

LIVELY YELLOW

RELAX BLUE

CYMK (79, 6, 60, 0)

CYMK (7, 0, 78, 0)

CYMK (64, 0, 26, 0)

RGB (0, 171, 138)

RGB (245, 242, 84)

RGB (51, 204, 204)

160 < IdleTime


Secondary colors 100%

75%

50%

25%

MINDFUL GREEN

WARM ORANGE

ENGAGING RED

CYMK (29, 0, 64, 0)

CYMK (0, 35, 88, 0)

CYMK (0, 75, 85, 0)

RGB (186, 232, 128)

RGB (251, 176, 59)

RGB (255, 102, 51)

Deliver > 161


Typography I used Clone Rounded Latin for all typography in my thesis project because of it unique letter form. Its playful looks is appreciated and recognizable and bring lively feeling into the visual system of the project. The stroke is oblique with special angles and match my illustration styles. There are eight weights in the typeface set, and I only use Semibold, Medium and Regular. Semibold and Medium weight are used for website page, posters and promotional cards. Medium and Regular weight are used in smaller typography in the application and book.

Clone Rounded Latin Semibold Clone Rounded Latin Medium Clone Rounded Latin Regular

162 < IdleTime

Clone Rounded Latin Semibold Clone Rounded Latin Medium Clone Rounded Latin Regular


ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 1234567890~!?@ #$%^&*| _( ){ }[ ]<> Book Title Subtitle

Reverse Emphasize Highlight

Clone Rounded Latin Semibold ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 1234567890~!?@ #$%^&*| _( ){ }[ ]<> Deliver > 163


Clone Rounded Latin Medium

Clone Rounded Latin Regular

ABCDEFGHIJKLM

ABCDEFGHIJKLM

NOPQRSTUVWXYZ

NOPQRSTUVWXYZ

abcdefghijklmn

abcdefghijklmn

opqrstuvwxyz

opqrstuvwxyz

1234567890~!?@

1234567890~!?@

#$%^&*| _( ){ }[ ]<>

#$%^&*| _( ){ }[ ]<>

164 < IdleTime


Deliver > 165


Photography style Bright and light Except for illustrations, I decided to add real photo in to my design. I chose lighter photography with happy atmosphere which expresses the positive of lives. People in the photo seem enjoying their moments and be present.

166 < IdleTime


Deliver > 167


4.2 The IdleTime app

168 < IdleTime


Deliver > 169


170 < IdleTime


Deliver > 171


172 < IdleTime


Deliver > 173


174 < IdleTime


Deliver > 175


176 < IdleTime


Deliver > 177


4.3 The IdleTime website

178 < IdleTime


Deliver > 179


180 < IdleTime


Deliver > 181


182 < IdleTime


Deliver > 183


184 < IdleTime


Deliver > 185


186 < IdleTime


Deliver > 187


4.4 The facts posters

188 < IdleTime


Deliver > 189


190 < IdleTime


Deliver > 191


192 < IdleTime


Deliver > 193


4.5 Promotional video

194 < IdleTime


Deliver > 195


196 < IdleTime


Deliver > 197


198 < IdleTime


Deliver > 199


Leave your device. Live your life!

200 < IdleTime


Finally only us!

Deliver > 201


Thank you Thanks to every instructor who guided me during the thesis developing process, especially to Phillip Hamlett, Bob Slote, Anthony Jagoda, and Carolina De Bartolo. Thanks to all my classmates in classes who went through this long journey with me. This course was not easy, but we worked hard together and didn't give up. I can finish this project because of your kind support and helpful suggestions. Thanks to my families and friends who gave me your kind mind and always cheered me up when I feel frustrated. Without you, this thesis project wouldn't be completed.

IdleTime Duration: Fall 2014—Fall 2016 Designer: Yihan Hsia Contact: iamyhsia@gmail.com

Book title: IdleTime Typeface: Clone Rounded Latin Book Bindery: Blurb.com Copyright@ Yihan Hsia

202 < IdleTime


Deliver > 203


204 < IdleTime


Deliver > 205


Leave your device. Live your life! www.idletime.today

206 < IdleTime


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.