Screen TimeOut

Wellness & Productivity App Design
Duration
January - April 2021
project info
UX Class project, Team of 5
tools used
Figma, Whimsical
my Role
UX Design, UX Research, Visual Design

Overview

The Problem

Cutting down phone use has become more difficult as mobile phones have become increasingly essential to life. Consequently, smartphone users struggle to manage their screen time and balance productive and leisure phone use.

Our Solution

We designed Screen TimeOut, an app that helps users set, track, and stick to screen time goals.

Research

Interviews

We decided to make our primary users college students and young professionals. From this group, we conducted 4 in depth interviews and surveyed 50 individuals.

Main concerns:

  1. unhealthy relationship with phone
  2. cycle of deleting and redownloading apps
  3. critical uses (i.e. communication, connection, productivity, organization) balance out the negatives of smartphones.

Journey Map

While going through the user flow, we brainstormed how we might lift users out of the emotional rut. This was how we decided to give our app an encouraging, gentle tone rather than the harsh military tone that was previously considered.

User Personas

We imagined how a real person might struggle with reducing screen time.

Designing the Solution

Ideation

Design sprints & sketches

After substantial deliberation of what problems and solutions to prioritize, we did some design sprints to flesh out our ideas.

Affinity mapping & voting - we came up with HMW's and voted on which problems to prioritize.

Information architecture

We distilled our ideas into a few major functions and built out a sitemap to see an overview of the app structure. This helped us identify and work on areas that were less developed, as well as determine steps in our user flows.

Lo fidelity wireframes

We drew out sketches of ideas we had talked about and chose our favorites before moving on to mid fi wireframes.

All the while, we tried to keep the big picture in mind and consider whether ideas were worth pursuing under our time and skill constraints. For instance, after a discussion about scalability, we decided to scrap this idea for a habit tree that responds to habit tracking and visualizes the user’s progress. It was a reminder that the design process is not linear, and that some ideas may be dead ends.

Mid fidelity wireframes

We built out our ideas as wireframes in whimsical to get a sense of what the product might look like.

We initially got sidetracked by superficial details, and built out wireframes for less important details like settings. Feedback from peers and our instructor helped us realize that we needed to zoom out and triage the features of our app.

Final Design

Visual Design

I was responsible for the overall branding, including logo design, colors, and other visual components.

Logo design

The logo is a phone with a clock on it, designed using the pathfinder and pen tools in Figma. The isometric design is an appeal to the young adult target user group, while the iconography expresses the product's primary function.

Colors

We started off with just the top row in a relatively monochrome, soothing color palette, but later added yellow and pink to compliment the blue-green and make the app feel more fun and lively.

Typography

We used variations of Graphik and Hind. Similarly to how colors were chosen, fonts were chosen to signal a young, trendy, updated vibe to appeal to our target users.

Drop shadow glow

I created a "glow" effect from use of drop shadows, simulating a trendy neon light look and setting our product apart visually from others in the same space. I felt that the softness of the glow would mesh well with the gentle, encouraging tone we wanted to establish.

Flows demonstrating my work

Click here to view prototype

Onboarding

This was some of my favorite experiments in visual + interaction design.

I wanted to make it feel soothing (through colors, glow, and playful visuals) especially because later in the onboarding process users are faced with their screen time, which may not be the most positive experience.

Creating a custom reminder

Team contributions

Other parts of the project (my visual design system was used, but I didn’t touch these designs beyond early ideation)

Results

Final deliverable

Our final product was a prototyped design of the app. Unfortunately, due to time constraints of the class, we never got to test our prototypes on potential users.

Takeaways

This was my first time building a project from scratch without much guidance. As a team, one of our biggest pitfalls was failing to adequately define and focus on the core features. Reflecting on this, I realized the importance of periodically stepping back and considering the more general context of my designs. I enjoy working on the details, but through this project I gained a deeper understanding of the importance of structure.

I also learned how to better hold my ground in discussions with teammates. Too often, our group discussions were truncated and pushed until "later" in the interest of time. As a result, we ignored critical problems that took even more time to fix at later stages. While still keeping time constraints in mind, I think a more effective strategy would be to establish a clear intention and strong structure for a project before moving on to detailed work.

Check out more of my work!