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 given the commonality and transforming usage landscape of mobile device, 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. Thus, we decided to revisit and scope the problem space aiming to uncover the gap of existing solutions. We eventually re-scoped our problem statement to the final, distal goal of users to boost their 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


Find opportunities in the already crowded space

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

Why existing solutions have unsatisfied effect?

We analyzed existing solutions and their respective user feedback to understand what have been done and why it is effective or futile.

We then synthesized the findings together with 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


Unclear outcomes

Users can’t link the solution to its outcome that motivates them to keep engaged with the solution


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


Model the causal pathway of problem and goal

Causal diagrams 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).

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

Iterate with design critique and user feedback

Model user flow from ideas and its impact on user behaviors

We brainstormed for possible design features and categorized them into stages referenced to the causal pathway, and analyzed how some of them could possible work well in tandem. 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.

Iterate quickly with wireframes for concept validation

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. Therefore, 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.

Design Change 2
Adding scaffolding components for task prioritization

In our first iteration, users only have to select 3 todo’s for a day. From the design critique, we learned that even though it requires less cognitive load, it would not benefit the goal of building good planning habits. 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.

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).

Align the team with style

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 concentration 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 drifts away to leisure use of device. Unlike the preventive blackout time as existing solutions, progress alert 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 allows users to consciously plan and tweak their plans for better planning habits, as lack of “good plans” that are achievable within the planned timeframe would cripple the motivation to complete tasks. It 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 by having a better understanding about their focus patterns.

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.