Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

screenLESS

screenLESS helps you to reduce screen time.

Create Timetables to control how much time you spend on your phone. Discover different Remember notes that reminds you to put your phone aside. Own your time and attention back!

Observations

On the street, in public transport or at family gatherings you can see people looking at their mobile phones. Cell phones have become such powerful and versatile tools that, for many people, they feel literally indispensable. The urge of being up to date makes people completely loose the feeling of how much time they actually spend looking at their screen. The youth stares an average of 49 hours per week on displays like phones or computers*. Depression, low self-esteem, and social isolation are all potential hazards of too much smartphone, tablet and social media exposure.

* Link

lekeke.jpg
lekeke.jpglekeke.jpg

How Might We

Almost 40% of all consumers and 60% of 18-to-34-year-olds admit to using their phones too much*. Considering that screen time control is a real need our project focus in the follow question.

How might we help users to reduce screen time?

* Link

Interviews

We interviewed nine people between 30-45, living in Berlin. Since Corona did not allow us to meet them in person, we mainly met them via Jitsi -talk. Smartphone usage is for many people a pretty sensitive topic and also filled with shame, therefore we had to be careful and respectful.

First we wanted to get to know the people better and understand who they are and what they do. Do they have children? What kind of job do they do? What is their everyday life like?

Only then we asked them about their mobile phone usage.                        Which device? What do they use the mobile phone for? Which Apps? When do they use it most during the day? Did their mobile phone behaviour change after the Corona crisis?

We also asked if they could estimate how long they would use their mobile phone each day? Do they have difficulties putting the mobile phone away? Have there been any attempts to shorten that time?

Finally we wanted to know if they already used apps that track screentime and if they could imagine using an app like ScreenLESS.

After completing the interviews, we have transcribed them and prepared a summary for each person including age, occupation, feelings, frustrations, motivations, favourite apps, device, approximate usage time per day and a statement. Below you can see some of the profiles categorized by screen time.

INTERVIEWEE ONE.png
INTERVIEWEE ONE.pngINTERVIEWEE ONE.png
himi.jpghimi.jpg
INTERVIEWEE SIX.pngINTERVIEWEE SIX.png
INTERVIEWEE SEVEN.pngINTERVIEWEE SEVEN.png
INTERVIEWEE EIGHT.pngINTERVIEWEE EIGHT.png

Personas

The interviews containing opinions and confessions were meaningful to understand users better. With this material it was possible to define three Personas with three different phone habits.

LOW - Elis is a hard working mother of two, who is mainly using the phone for work purpose. She uses her phone 1-3 hours per day.

MEDIUM - Noah is a 35 year old editor, loves being up-to-date and is really aware of the topic smartphone addiction. She uses her phone 3-6 hours per day.

HIGH - Toni is a heavy and proud user. He does not like using tracking apps, since he feels restricted by them. He uses his phone 6-8 hours per day

Illustration by Gabriela Rocha

PERSONAS_MEDIUM use.jpgPERSONAS_MEDIUM use.jpg
PERSONAS_LOW use.jpgPERSONAS_LOW use.jpg
PERSONAS_HIGH use.jpgPERSONAS_HIGH use.jpg

Insights

By analysing the interviews it was possible to have insights and understand the product from the user perspective. Discussing about the findings enable us to have insights, for exemple: a major number of interviewees were afraid of looking into their screen time and other products in the market did not help effectively the users needs.

INSIGHTS5.jpgINSIGHTS5.jpg
INSIGHTS4.jpgINSIGHTS4.jpg
INSIGHTS.jpgINSIGHTS.jpg

Competitor analysis

There are many competitors who have an similar approach on reducing peoples screentime. Even IOS and Android have their very own application for that. Below follow a couple that we take in consideration.

Digital wellbeing by Google
- Tracks phone time Daily and weekly
- Interface Issues
- Ads (unless one buys a pro version)
- Detailed phone use view
- Darkmode only in premium

Forest
- Gamification of  screentime
- Social Media platform
- Very simple Interface
- With free version is limited
- Does not track phone usage (minimal version)
- By using the app you also help grow real trees (Ignoring the phone makes the trees grow)

Detox
- Does not track the time
- You can set timers and counters for certain apps or for the whole phone
- Setting for making apps only work when you are walking or moving
- You can also block apps

Analysis by Till Kufus

pCOMhPETITIVE ANALYSIS.jpg
pCOMhPETITIVE ANALYSIS.jpgpCOMhPETITIVE ANALYSIS.jpg
photo_2020-09-06 21.38-1.pngphoto_2020-09-06 21.38-1.png
photo_2020-09-06 21.38 1.pngphoto_2020-09-06 21.38 1.png
photo_2020-09-06 21.38.pngphoto_2020-09-06 21.38.png
photo_2020-09-06 21.38-2.pngphoto_2020-09-06 21.38-2.png

Sketch & Paper Prototype

SKETCH2.jpgSKETCH2.jpg
SKETCH.jpgSKETCH.jpg

According to the Insight: It is all about owning time. Right? But how?

sketching and having in considerantion the previous learned issues, we created a main arquitecture based on the idea that the app can adapt to the user. Through preset profiles such as „Weekend“ or „Digital Detox“ the user will be informed that the time limit is up. The user can set and create „Timetables“ himself because this is the core of this app, it is about owning your time!

Sketches by Gabriela Rocha

Ideation - Data visualization

Screeless-data-viz.jpgScreeless-data-viz.jpg
data-viz2.jpgdata-viz2.jpg

After having the insight from the interviews about the fear of awarness, it was clear that the visualization could be made in a more sensitive way so that the user could look with ease.

So the idea was simple, when the user opens the app it will show them in a blurry way how long they have been using the phone. In order to see the exact time the user must first press a button to see details. This way the user can get a feeling and make the descion of the next steps on his own terms.

As the idea is simple, the creative process of designing was much more complex. The need to predict different time usage scale, detailed and non-detailed view., visualization not only from time but also the limit proposed, color blindness accessibility among other issues had to taken into consideration for the execution of the design.

Data visualization idea & design by Gabriela Rocha

Ideation - Remember Note

xSCREENLESS as a suggestion!.jpg
xSCREENLESS as a suggestion!.jpgxSCREENLESS as a suggestion!.jpg
xSCREENLESS as a suggestion!-1.jpgxSCREENLESS as a suggestion!-1.jpg

It is about being aesthetic but also practical for every type of mobile phone user. In one case, the screen is slowly closing with shutters, in another, it starts to rain on the display and in a third case, the screen simply gets darker or fuzzy.

Darken

The screen darkens from time to time to reduce the comfort of use. Now it is more difficult to use the mobile phone outside in sunshine and in the dark it is gentle on the eyes

Blurry

After time the screen gets more and more blurred to make the user put the mobile phone aside.

Raindrops

The raindrop notification is a very gentle one. More and more raindrops are falling on the screen to remind the user of his time off. 

Remember Notes idea & design by Till Kufus

Prototypes A/B testing

Because of different visions on what the design could look like, we decided to build two different prototypes and so we enjoyed this opportunity to make an A/B testing.

We have tested two different prototypes (A/B) with a variety of people. They have been given certain tasks to perform in the app, such as creating a timetable with certain parameters or opening and closing the details. Afterwards we asked the testers questions to check if they understood everything and also the test was documented via screenrecord to be able to follow the userflow in detail in retrospect.

After taking a close look at the results of the tests, we realised that the app was generally well understood and accepted, but we also recognised that we still needed to work on many details to make functions more understandable and accessible.

This gave us great insights which motivated to create a more polished design in further stages.

yPROTOTYPE.jpg
yPROTOTYPE.jpgyPROTOTYPE.jpg

Main View

Data should probably be renamed in details. The users were happy about being greeted by the app. The TapBar was a bit too Dark.

Timetable View

This design was clear for everyone. They could easily open the different timetables. User 001 thinks it should be more visible which Timetable is active at the time. As the colour of the „Add“ button is different, everyone could easily find it.

Create a Timetable - Steps

Although some respondents said that they prefer to categorise the settings, it probably seems more convenient if each setting has its own page. The term „ timetable “ was confusing for everyone except 002. Tap hotspots must be bigger for all buttons.

A significant challenge was that Figma had many limitations when creating prototypes so all the functions of the app couldn't tested in depth and I had to hint at some things, which confused the testers.

TEST A by Till Kufus

Screen Shot 2020-09-27 at 17.14.48.pngScreen Shot 2020-09-27 at 17.14.48.png

Main View

Details were fairly easy to find. Activated profile caused some confusion that could be solved by a proper on boarding. Time set for the day was understood. Ilustration needs to be best developed as an example.

Timetable View

Immediate obvious how to add a Timetable. Need to figure out a solution to make it easy to deactivate and active in the timetable view and main view. ISSUE: Activated profiles were here unseen!

Create a Timetable -  Steps

User 005 explained that the mind set to create a timetable would be diferent, questioning the order of the questions. For user 002 the order was redesign. New order was well received. All users accomplished a new Timetable easily and understood the steps. User 003 has happy that was possible to choose only the essential apps. INSIGHT! Remember note needs to be optional!

TEST B by Gabriela Rocha

Design

xSCREENLESS as a suggestion!.jpg
xSCREENLESS as a suggestion!.jpgxSCREENLESS as a suggestion!.jpg
2home.jpg2home.jpg
3home.jpg3home.jpg
main6.jpgmain6.jpg

Inspiration

Because of short time of execution the design is inspired by IOS guidelines and was kept simple with small twists and a touch of gradients with bright colours.

Typography

A pre selection of fonts was made by Gabriela which suggested Riga, clear and practical yet warm and polite and Godfrey, to add a bit of contrast.  The combination being accepted so naturally the logo was created. The „Screen“ is Godfrey and „Less“ Riga. The main text is Riga Screen and Godfrey is used for details. The shadowing of the logo was designed by Till exploring the Neumorphism trend.

Screen Shot 2020-09-28 at 16.55.21.pngScreen Shot 2020-09-28 at 16.55.21.png

Final User Test

Overall the final design was very well received. All test persons were able to navigate their way through the UI without any major confusion. Furthermore, everyone understood the sense behind it, to see only a rough indication of how much time they spent on the phone and they could also easily swap to the detailed view. When it came to choosing the most important apps, it took the users some time to find the right ones. The design has received a lot of praise.

Conclusion

In summary, we can say that we have worked and researched on an extremely important topic. It has been very exciting to find out how other people deal with their phone, but overall we understand better the many people that suffer from mobile phone addiction. When we looked at the apps for ios and android there was a lack of design and user-friendly solutions. This gave us even more motivation to create a unique app.

The research was fundamental for leading us to make the first drawings. The user Tests were of highest importance to refine the arquitecture and how the app would be built. Details like colours and transitions, fonts are a base for further development. Data-viz and Remember Notes can be further designed with animation and other possibilities.

It was not always easy to work together as we live far away from each other, there is a knowledge discrepancy because of the being in different learning stages. Corona needs to be taken in consideration, making personal contact with each other and with test users more difficult. The final user test proved to us that it worked because we got great feedback.

Next steps would be to make a Desktop and Tablet app, Design notifications, refine text, other profiles definitions and further improvements also as usual can always be made.

It was a very rich learning experience and very pleasing to over come challenges and have a product that has potential to help people.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Dr. Frank Heidmann

Zugehöriger Workspace

Human-Computer Interaction Design

Entstehungszeitraum

Sommersemester 2020

Keywords