digiLyfe
FOSTERING POSITIVE DIGITAL EXPERIENCE
Smartphones have become an essential tool for daily life. Our smartphone is our personal assistant; it makes our lives easier and more convenient.
The positive aspects of smartphone use are endless. But on the other hand, smartphones have also impacted our lives negatively. Sometimes they cause undesired interruptions. Sometimes we waste too time staring at our screens. And sometimes smartphones make us feel disconnected from our families, even when we’re all living under the same roof.
This case study is the story of how I designed “digiLyfe” – a mobile app that empowers users to live a more productive life using digital devices.
My Role
I am the product owner of digiLyfe. I designed digiLyfe as a part of Interaction Design Capstone Project at UC San Diego. I created digiLyfe from start to finish, working on research, ideation, prototyping and user testing. My peers were instrumental in heuristic evaluation, critiquing and providing feedback throughout the project.
THE CHALLENGE
Project background and description
In 2015, a friend of mine and her child visited me for three weeks. On the second day of her visit, my wife and I realized that she spent most of her time glued to her smartphone. We jokingly pointed it out to her, and she made an effort to minimize her smartphone use. Unfortunately, that lasted only for a short period.
She couldn’t stay away from her phone for more than 10 minutes, and often was unfocused while watching her child. She often stayed up late using her smartphone and woke up late each morning. Observing her sparked my desire to find a solution to what I consider a problem: smartphone addiction.
Problem Question
A year after her visit, I decided to dig deeper.
How can users embrace the positive effects of smartphone use while also mitigating the negative effects?
NEEDFINDING
Participant Observation
The first goal of my user research was to learn more about how people interact with smartphones. I observed six participants using their smartphones for several hours each and interviewed 15 other participants randomly. The observation environment was natural; each observation took place during the user’s day-to-day life. I conducted the random user interviews on the street for about 2-5 minutes each.
In-depth observations of participants using smartphones in their daily lives.
IDEATION
Insights, Defining & Brainstorming
My observations and interviews yielded useful and varying insights. I used affinity diagrams by grouping ideas based on their overarching themes. I later went through a brainstorming session of possible solutions to the user problems.
Definition of insights gathered from the observations and interviews then brainstorming ideas.
PROTOTYPING
The storyboard below helped me understand how my app can solve user needs without committing to a particular user interface.
Storyboarding
Storyboarding was useful in helping me empathize with users.
Sketching
The sketching phase was fun. I started from the point of highest emotion and excitement: the user data. I quickly sketched many concepts, helping me form a broader view of the system. Doing this early on ensured a more cohesive final product.
Hand sketches, showing the design of user data.
Paper prototypes exploring different pages and seeing if clusters of content would fit on the screen size.
Sketching - Iterations
After several design iterations, my sketches were more refined, with the main pages laid out ready for internal evaluation.
Paper prototyping helped bring designs to users for evaluation.
Heuristic Evaluation
Paper prototyping techniques helped bring the designs to life and evaluate them with peers finding the usability problems early in the iterative process.
Paper prototyping techniques helped bring the designs to and evaluate them with peers.
Mid-Fidelity Prototypes
I implemented my ideas in a cleanly formatted version of the earlier sketches while addressing the issues pointed out in the heuristic evaluation stage.
Wireframe - refined design ready for user testing.
User Testing
Before user testing, I defined the user tasks that I would be using to evaluate the app. I observed several participants perform tasks using the digiLyfe prototype. Participants verbalized their thoughts and concerns while performing each tasks. The user observation revealed several design issues that helped in the next stage of redesign.
The participants perform tasks on the mid-fidelity interactive prototype.
Re-design of the secondary navigation based on insights gained from user testing.
High Fidelity Prototype
COLOR EXPLORATION
The introduction of color added afforded differentiation between “time well spent” and “time wasted.” Color made it easier for the user to perceive the yin and yang throughout the design. The use of color also brought visual continuity and cohesion on all pages.
A/B Testing
I designed two solutions for secondary navigation. My hypothesis was that there was no difference on perceived affordance between grouping all navigation items at the bottom vs. having the secondary navigation on the content area.
To ensure the test was realistic, I created a fully functional mobile prototype.
I set up the A/B test on usertesting.com. The participants performed the tasks at the comfort of their home while videotaping the experiment.
UserTesting.com: screenshot from a video of a user performing tasks on the digiLyfe app.
Design B had a higher perceived affordance but also had numerous user errors due to the proximity of the navigation items. With Design A, the users did not recognize the secondary navigation quickly.
INTRODUCING… digiLyfe
The gallery below shows the iOS app for launch.
I designed the onboarding screens to help integrate new users to the digiLyfe app. The onboarding screens cover the key features of the app so that new users can acquire the necessary skills and knowledge to navigate and utilize the app effectively.
The Categorize Apps screen displays all the apps the user has on their mobile device. The user then classifies his or her apps as “Time Well Spent” or “Time Waster” apps. The two main categories are the foundation of all the data that is displayed.
App Usage conveys three levels of data:
- The visualization of “Time Well Spent” vs. “Time Wasters”.
- Comparison of apps.
- Granular, detailed data from a specific app. When a user taps on a specific section of the chart, usage data will be displayed. The user can temporarily lock a particular app from functioning.
The Progress screens display the user’s progression over time. The user can view the data at a macro or micro level. To minimize the learning curve, I used red and green colors. Green means “Time Well Spent,” and red means “Time Waster.”
The Control screens display tools that enable the user to manage and control time spent on digital devices. The user can set time daily limits on specific apps. The user is also able to set automatic time and location locks.
Microinteractions & Microdata
The user can interact with the charts to access granular data.
Email me: hello@MosesKamau.com | Let's talk: 310-955-0288 .