Hourglass

Overview.

The smartphone brings convenience to our daily life. But it crosses the line from a helpful tool to one that undermines our personal well-being.

Hourglass is a smartphone case with the attached app, encouraging people to get rid of phone addiction and reduce screen time.

Role.

Individual project (Interaction Design, 3D modeling & printing, Video editing)

Duration.

Nov.2019 - Dec.2019

Platform.

iOS

Video

Photo | Becca Tapert

THE CHALLENGE

How to help people deal with the addiction to screens and improve their digital wellbeing?

THE OVERALL PROCESS

Introduction

Project context

In the course ‘Consumer Electronics Design’, we were required to create an innovative concept for consumer electronics. I spent a lot of time on exploration and brainstorming. I was not able to find a solid idea for a long period. During that time, my mobile screen time skyrocketed.

I felt anxious, turned my phone over and obliged myself to focus on the current task. Suddenly, a new idea popped up. Can I make the back of the phone meaningful to users? Can I design something to help people get rid of phone addiction and reduce screen time?

Concept

Why smartphone case?

Phone cases are ordinary, unobtrusive and have a high degree of freedom in customization. When people don’t want to be distracted by notifications, they will turn their phones over and can only see the phone case. I came up with the idea of designing a smartphone case that encourages people to flip their phones, thus limiting phone usage.

“I wanted to stop picking up my iPhone every time I felt even a moment’s mental pause.”

According to the Georgetown computer-science professor Cal Newport, “willpower, tips, and vague resolutions are not sufficient by themselves to tame the ability of new technologies to invade your cognitive landscape.” Thus, the intention of my design is not to let people control their mind or will power, but to give users nudge to choose a focused life consciously.

Brainstorming

Idea exploration

I started brainstorming ideas with low-fidelity sketches. The focus was on the information displayed on the phone case and on the mechanisms to attract users to turn their phones over. Finally, I chose to use the metaphor of hourglass to represent the concept.

First, an hourglass is a device used to measure the passage of time, which is consistent with the topic of this project. Secondly, the action of flipping the phone is reminiscent of flipping the hourglass. I would like to leverage this connection to help users to bring more awareness to their behaviors.

Peer testing

Evaluate the concept & early prototype

The first version of the phone case includes time, date, to-do list, and timer. The app consists of three parts -- to-do list management, case customization, and hourglass. For the phone case, I edited the image in photoshop to describe the concept rapidly.

In addition, I wrote Javascript and used the chrome simulator to test the flipping effect. This showcased my idea fast and enabled me to get something to play within one hour.

I conducted two rounds of peer testing to collect feedback on the concept and interaction. Through the testing, I realized that the primary principle is to avoid driving users to distraction. And things like information structure needed to be adjusted.

Feedback

Need a music controller on the case
Prefer analog hourglass than a physical one
No desire for customizing the background image
Add more gamification in the app

Decision

Reorganize the app structure
Go on with the analog hourglass
Delete unnecessary features
Set the hourglass as the focal point

Design Iteration

Version 2.0

I iterated the case and app based on the feedback collected in the peer testing. Moreover, I assumed that the group mode would also be an effective way to motivate users by keeping pushing each other, so I added this feature in the new version. The pages went black because I want to make the hourglass stand out more and keep the visual style of the application minimalistic and consistent with the case design.

Usability Testing

Test the interactive prototype

User profile

Age between 22 - 30
Use phone over 1 hr per day
Not participated in previous peer testing
Have intentions of overcoming phone addiction

Test procedure

Total (30 mins)
Briefing (5 mins)
Scenario 1 - 4 (5 mins / per)
Reflection (5 mins)

process book.001

process book.002

process book.003

process book.004

process book.005

process book.006

process book.007

process book.008

process book.009

process book.010

process book.011

process book.012

process book.013

process book.014

Feedback

The calendar is not that important
Some wording confused users
Love the group mode
The app navigation is not clear
Would like to see hourglass on the case as well

Decision

Delete unnecessary features
Modify wording
Add titles on each page
Enhance connection between the app and the case
Design the onboarding process to help users explore

Information Architecture

Updated APP structure

Information Architecture

Updated APP structure

Onboarding flow

The onboarding flow introduces users to the main features of the case and app. It explains the core benefits and how to achieve benefits via the system.

Single mode

Group mode

Users can use this system on their own or stay focused with friends. By creating/joining a group, they can set the total screen time for themselves and friends and keep fishes together. Through usability testing, this mode is welcomed by most of the participants. Social connectivity is an important part of helping users reduce their mobile phone usage time

Create a group

Visual Identity

Typography and color palette

Interactive prototype

Have a try ;)

Conclusion

Takeaways

Resist the urge to design in hi-fidelity too soon

With software like Sketch and Figma, I could create high-fidelity prototypes just in several minutes. However, it could be dangerous to rush into this so quickly. On the one hand, without thinking through the information architecture and the voice of the app, such decisions might not wash. On the other hand, it lies good chances to understand the users’ mental models at the formative stage. Testing with wireframes ensures that users are not influenced by the visual design so that they can focus on the interactions.

Sheer brainy pleasure I got from learning new things

Video has an incredible power of increasing engagement. To better express my concept and realize the effect I’d like to demonstrate, I learned how to create liquid sloshing around in a container in Cinema 4D. By watching tutorials and reading manuals, I managed to achieve the effect I’d hope for. I got a sense of fulfillment from this work, which drove me so far as a designer and a life-long learner.