A mobile app that helps users plug back into their real lives by helping monitor daily usage while working through phone and social media addiction.
PROBLEM
Excessive social media usage and screen time have become prevalent issues, leading to various negative impacts on mental health, productivity, and overall well-being.
SOLUTION
DigiDetox empowers users to take control of their digital consumption and improve their quality of life and mental health.
The Design Process
Define + Empathize
Research + Analyze
Design + Testing
Iterations + Prototype
DEFINE + EMPATHIZE
The initial idea of creating a type of screen time app was the easy part. In this era, we spend a huge chunk of time on our phones so of course we feel like we need to give ourselves a break. The difficult part was designing something that people would actually use on a consistent basis. So many thoughts began to cloud our brains...
​
"Do we add gamification to this app?"
"Does it need to be colorful and flashy?"
"How do we keep the attention of a person who can only pay it for so long?"
​
For the sake of time, or lack there of, we began with a simple proto-persona to get the gears moving in the right direction.
After creating our persona, we conducted a total of four interviews. This allowed us to gather a well-rounded amount of responses from each person.
of interviewees felt that they lose track of time on their phones and feel their time has been wasted.
100%
Here's what we found:
5.5
hours on their phones.
People spend a daily average of
RESEARCH + ANALYZE
By creating a competitor analysis, our team was able to gather information from our direct and indirect app competitors. Doing this allowed us to visualize potential features and better define the route in which we saw DigiDetox going.
OffScreen
ScreenZen
App Blocking Options
Multiple Focus Methods
Streak Achievements
Screen Time Tracking
QuStudio
SuzyApp
Parental Control
Screen Time Limits
Online Filtering for Kids
Learning Activities
We wanted to dive a little deeper on our user, John Jacobson. In order to gain more insight on his goals, pain points and overall background, we created a user persona. This allowed us to jump into a storyboard design to better visualize our user's journey.
John Jacobson, a Financial Advisor at PNC Bank, returns home from a stressful day at work and looks forward to winding down.
John has a few light chores to take care of this evening. He decides, first, to spend a few minutes scrolling Instagram to catch up on missed updates from the day.
Shockingly, John realizes he's spent more of his time scrolling than he anticipated. Frustrated by this constant habit, he searches the App Store for help.
John comes across DigiDetox and is immediately impressed with its tranquil features and attention to mental health. Quickly, he installs the app and begins setting preferences.
John's tensions are eased now that he's started using DigiDetox. He's now able to gain more balance and even get a late start on those chores.
Finding A Flow
With the completion of our main research and analysis, our group was able to hone in on our user’s main goals and prioritize specific features.
We wanted to keep in mind the importance of mental health and be sure to make the “progress garden” the main essence.
DESIGN + TESTING
Once we were able to finalize our user flow, it was time to start wireframing! We knew we wanted the app to feel like a calm getaway for the user; something they could come to to unwind from their socials.
We began with some simple shapes and text to capture the user's journey. We decided that "Learn, Listen, and Live" would be our 3 main interaction points on the main page. At this moment, we were still figuring out how to drive this home with the "progress garden" achievements.
"I like the placement. Maybe add a screen before this one to talk about what the app is."
"I wish the meditation options were on their own separate page"
"I love that this is apart of the intro. A few more questions would be nice too."
"I like the different options, this screen seems a little jumbled though."
With the mix of feedback we received, we knew we had more work to do. We took into account all the notes given to us and went ahead with coming up with a style guide
With the mix of feedback we received, we knew we had more work to do. We took into account all the notes given to us and went ahead with coming up with a style guide
ITERATIONS + PROTOTYPE
To re-iterate the goal, the sole purpose of DigiDetox is to regulate a user’s social media use and help to improve their mental health by encouraging them to live more "in the moment".
We added three "getaway" options for users to choose from on the home page for how they separate from their social platforms. These options would give the user the choice of reading something, meditating somewhere, or being accountable in someway.
The user can "learn" and gain new insights from the world around them just by reading an article of their choosing.
The user is able to take part in guided meditation as a way to relax, unwind, and "listen" to the world around them
Users can really "live" in the moment by tracking their progress in real time. Seeing how much time they spend on social media can encourage them to unplug.
So we finally have the visual building blocks for what DigiDetox will be! Now what?
Since the "progress garden" would be our driving force for achievements in the app, we needed to start working on ideas for what that would look like.
We started with a quick visual draft of the achievement, then created a more detailed version. For our final iteration, we decided we needed something that was both time efficient and detailed so the user could get the full effect of the achievement in under 3 seconds.
"What if we add more detail to give it some 'realness'?"
"What if we keep the detail but make the animation quicker?
"PERFECT!"
So we've iterated on our progress garden and now have a final design and animation to add to our high fidelity prototype!
​
As a group we were able to work together equally on different aspects of the prototype. We made sure that the final product had the necessary ebb and flow and kept up with the initial "zen focused" qualities we were wanting.
​
As shown below, the mid-fidelity prototype we began with was able to flourish into the tranquil, user-friendly, high fidelity design we were hoping to end with.
FINAL PROTOTYPE
KEY TAKEAWAYS
Finding a universal way to negate phone usage is a huge undertaking, to our team the features presented felt intuitive and easy to implement for the general user but are far from perfect. Here are a few big takeaways from this group case study that we would have loved to implement with more time.
Showcasing the garden beyond just one plant in the progress garden.
Integrating "bonuses" so when a user gets a bonus there is additional info given on how to grow the real-life plant they achieved!
More time to iterate on animations in order for them to flow better through the app
my responsibilities
Competitor Analysis
Interviews + Testing
Storyboard
User Flow
Low-Fi Wireframing
Logo Design
Visual Design + Prototyping
User Persona