A consumer-health app design for better productivity and mindful screen time

Project Type

Team project for consumer-health technology class


I co-designed with Sophia Chiu to scope, research and design for the self-initiated problem space


Fall 2018 (3 months)


User flow, causal diagrams, wireframing, prototyping, design critique


Rescope the problem for real cause

Internet overuse has become an increasingly prominent issue, which can lead to reduced productivity and performance in academics and workplace. Even though there are many attempts to cut down the internet overuse, limited effect has been found. We decided to revisit problem space aiming to uncover the gap of existing solutions. We eventually re-scoped our problem statement targeting the final user goal to boost concentration time for better productivity.


How might we increase people’s productivity by boosting their concentration time?

Quick peek to the solution

An insight to productivity for habit building

Introducing Insight, a design concept that gives users an insight into their productivity by building focus habits, managing distractions, boosting task completion and be conscious of their productivity over time.

Design Process

Build the context with iterations

User research

Understand the problem space

We conducted literature review and guerrilla interviews (sneaked in questions in every possible chat - sorry friends!) to understand why internet overuse has become such a prevailing issue in modern society.

Easy access to technology
  • 94% of people aged 18-29 own a smart device themselves in the United States
  • Increased internet coverage
Psychological drives lead to addiction
  • Escapism
  • Boredom
  • Social neediness
Competitive analysis

Find opportunities in the already crowded space

We analyzed existing solutions, their features and potential design rationals, as well as user feedback to understand what have been done and why it is effective or futile.

Research insights

What are the design opportunities?

We then synthesized the research insights from interviews and background research, and concluded the possible opportunities for improvements.


Preventive solutions

Most solutions target solely on reducing device time


Withdrawal effect

Withdrawal effect, meaning the negative emotion such as irritation and anxiety elicited from being taken away from device, even cripples the effect of preventive solutions in the way that users will just ignore the warning


Unclear outcomes

Users can’t link the solution to its outcome which is the key element to motivate them to keep engaged with the solution

Discover breakdowns

Modeling for mind housekeeping

Synthesizing the research insights, we first modeled general patterns of existing solutions with preventive goals. It turned out that several behaviors suggested in the research, such as withdrawal effect, might break the feedback loop of usage awareness designed in the existing preventive solutions. Learning from our research, we decided to adjust our design rationale to support good focus patterns for sustainable productivity (promotion goal) instead of limiting users’ time on screen (prevention goal).


Unveal opportunities from cause and effect

To unveil the design opportunities, we iterated on the model and mapped out the causes and effects of different stages that rationalize the reason of low productivity in the current social setting. We concluded that low productivity is due to two channels: distraction management and task planning.

Rescope design objectives to align in co-design team

Clarifying the affecting factors of the problem, we re-scoped out design objectives with concrete outcome suggested in the interviews as the distal goal of the design, and pinpointed the proximal goals to be achieved to get to the final outcome.

Design & Iterate

Ideate features with product ecosystem

We brainstormed for possible design features, categorized and evaluated them referencing the causal pathway. We then mapped out the user flow with functionalities and their impact on user behaviors. This informed us of how different features made sense and worked together, and tied the design with the causes of the challenge we discovered.

Validate concepts through testing and design critique

We tested with users and went through several rounds of design critique with fellow designers and the instructor in class and iterated rapidly with wireframes. This helped us to identify major issues in high-level design decisions and usability issues of UI placements and copy.

Design Change 1
Wizard UI → Static page

Our first iteration of task planner was a wizard UI that brought users to set up their weekly tasks step-by-step. We changed this design because, from our testing, we realized that people tend to change their plans from time to time and it will be a repetitive process. We decided to go with a static page that enables more flexibility and reduces the burden to go through the process every time to make changes.

"I might change my plan many times a day."
Design Change 2
Adding scaffolding components for task prioritization

In our first iteration, the only thing users do was to select 3 todo’s for a day. We learned that even though it requires less cognitive load, it would not benefit the goal of building task planning skills for productivity. We decided to add scaffolding elements to help users prioritize based on the context of tasks, such as how demanding, urgent it is or what are the subtasks related to it. This could increase humans’ motivation by making conscious promises and conditioning of tasks while prioritizing.

"I may need different span for different tasks because some require more focus."
Design Change 3
Distraction alert

We iterated on the copy of the distraction alert several times to understand what interactions and level of positivity made sense in the design objective. We also tested on the frequency of alerts to avoid overloading the users of notifications (which departed from our goal).

Style guide

Align the team with style

We developed the style guide together with moodboard before going into prototyping to ensure consistency.

Final Design

Give an insight for better productivity

Scenario 1

Getting started as a first-time / short-term users

One-tap focus timer for easy start of building focus patterns

Inspired by Pomodoro technique, focus timer supports users to stay focus for a period time and break for sustainable work patterns. Nimble, accessible one-tap start encourages first engagement of new users.

Soft reminders to nudge the focus

Insight will soft-remind the users with progress alert when users drift away to leisure use of device. Unlike the preventive blackout time as existing solutions, the design of progress alert and break timer nudges users’ conscious evaluation of their focus performance.

Scenario 2

Long-term engagement for fundamental skills-building

Long-term planning to grow productivity over time

Task planner supports users to consciously plan and tweak their tasks with good planning habits, because the lack of “good plans” that are achievable within the expected timeframe would cripple the motivation to complete tasks. The design implies users’ conscious conditioning of prioritizing tasks by considering how urgent it is, how demanding it is, or whether it is broken down to an effective specificity.

Keep track of the progress and tailor the focus pattern

Focus report helps users identify their most productive hours over time, and allows users to adjust their insight settings. Being conscious about one's own focus time, users can choose their suggested activities (which shown in the break prompt as nudges) and the duration of focus patterns for their optimized productivity.

Further design

Cross device monitoring

Multiple types of technology has become increasingly prevailing at schools and workplace. We believe having an insight of focus patterns across different platforms will provide users a more seamless experience to build their focus patterns and a more comprehensive understanding about their device usage during their worktime.


Getting feedback from fellow designers

In this project, my team challenged ourselves to navigate the already-crowded space of digital wellbeing. We believe this is a real problem, also supported by our research, that happens to many people in the current society, and this belief encouraged us to dive deep to the gap of existing design and constantly revisiting our design.

One big takeaway from this project was how to articulate the design rationale logically to teammate and in design critique. This required not only iterations of the flow and design but also thinking of the best way of representing the logic behind to outsiders to gain constructive feedback.