UX Mobile App Design for TrendingTime

A mobile application design that helps you monitor time spent on social media


Overview

Problem

People are unsure of how much time they spend on social media. They would like to know when and how much of social media they use so they can be more aware and productive. Some people feel that they spend too much time on social media and would like to bring down the time they spent.

Solution

TrendingTime is a mobile application that has been designed to monitor the time you spend on social media. It shows data based on daily and weekly usage. You can also set limits of the time you spend on social media and the app helps you follow these limits.

Note: This design does not argue against whether social media is good or bad. There are undoubtedly many advantages of social media, however through my findings, people want to avoid spending too much time on social media.

Project Duration

This project was undertaken in September 2017.

My Role

This project was started as a part of the 'Social Analysis of Computing course at UCI' as a 2 people group project. I later carried out the UX design for this application individually.

Design Process

User Research

I interviewed 5 people based on their social media habits. 2 of them were avid users of social media. Since this started as an academic project, I also referred to a book by Dana Boyd called 'It’s complicated'. The snippets below show a few important quotes by the users.


I then created an affinity map from the interviews and academic references. The map is shown below. From the mapping, the key problems emerged. Some people feel that they spend too much time on social media and want to limit this time. Some are just curious of how much and when they use social media so they can be more productive.


Key Findings

The key findings form the mapping were as follows:
. People who feel they use too much social media want to limit their time.
. They require external help for time reduction as they are not self motivated
. They do not realize they have spent too much time on social media once they are hooked
. People want to know how much time they actually spend on social media
. They want to know when they use social media for a more productive day
. There are particular times in the day (such as mornings) when people don't want to use social media
. Some people do not like it when their close family and friends use social media while spending time together.
. There are undoubtedly many good uses of social media , however people want to avoid too much use of social media.

The Personas

I then created two user personas. The first persona represents a user who wants to monitor her time on social media so that her day can be more productive. The second persona represents a user who feels he spends too much time on social media and needs help to limit that.


Competitive Analysis

I researched a few apps in the market that have a similar function. These were my findings:
. Quality time: whole phone usage, prompts for breaks, share achievements
. Moment: tracks whole phone, set limits, family: get off at dinner, guide to use phone less
. Menthal balance: gives a digital diet, tracks and scores compared to rest of the world
. Breakfree: Avatar, disable Internet, usage
I found that all of these apps were targeted towards the usage of the entire phone rather than being targeted to just social media. Some of theme go to extreme measures such as disabling the Internet. The one thing they lacked was a feature that allows the user to set a time when they do not want to use social media. They also lack the feature of the whole family coming together to control the use of social media by setting a cumulative time limit.

Storyboard

After the competitive analysis, I created a storyboard based on what I though the app would look like. The images below represent the same. The app will allow the user to track the time they spend on social media. The user can choose which apps to monitor. The history feature allows the user to look back at their data. The user can also set daily limits on the use of these apps. When this time is exceeded, the app pops up by pushing itself in the foreground, reminding the user to get off social media. Thereafter, the app pops every time the user tries to open social media during that day. This time limit can be changed through the app, to allow the user a flexible experience. The app also lets the user set certain time periods when they don't want to use social media. It also gives a reminder after prolonged use at a stretch (also flexible for the user). There is an additional family feature that has been introduced to motivate people if they want to cut down their social media use. The whole family sets a cumulative daily time limit on social media. If this limit exceeds, no one in the family can use social media. This should motivate people, since if they use too much of the time, the other's would get less time. I also thought of introducing a feature that helps users pursue other things such as reading instead of social media. I scrapped this idea later due to the feasibility.

Technical Feasibility

As a part of the academic course, we had already created a basic version of the app to test the feasibility. We were able to track the time spent on social media, and we able to push our app in the foreground when the user had exceeded the time limit. Below is an image of the same.

Feature Prioritization

I then created a graph to represent which features were important. The features highlighted in green were the ones selected.

Information Architecture

The Information Architecture of the app is given below.

Paper Prototypes

I then created paper prototypes. I tested these prototypes to understand the mental model of the user. I made a few changes before creating the mock ups. A major change was that the floating action button was given the functionality of changing the time limit rather than setting a target. A few icons such as 'see summary' were given a better visual affordance. The history page was also designed to represent the data in a clearer manner.

Wireframes

The images below show the wireframes that were created for the app. These were created using Adobe Illustrator.

On-boarding Screens


Home Screens


History Screens


Family Screens


Settings Screens


Splash Screens


Usability Testing

I tested the app on invision with a few users. I gave 4-5 tasks for the users to do. Here are the problems I found, and solutions I proposed:





Invision Prototype

This is the Invision prototype that was created

Visual Design

I then created a high fidelity designs for a few of the mock ups. I used Lato as the text and a red - green color palette. These colors give a sense of right and wrong and hence were selected. Red also creates a sense of limitations and awareness which is the purpose of the app. I also decided to call it 'TrendingTime' since trending is a buzzword in social media. Given below are a few screens depicting the hi-fi mocks.