product designer
cover.png

Spaces OS Adaptive Homepage

 

Overview

Purpose: Spaces is an operating system that encourages users to use their mobile phones mindfully.

Project Type: UI and Visual Design

Team Members: Nirawit Jittipairoj, Anastasia Erofeeva, Justin Choi, Malini Naidu, Mithali Savanth, Amogh Dave

Role: I was largely involved with designing the adaptive home screen concept.

Duration: 10 weeks

 
 

Spaces is an operating system that works the way you do. It's mindful, seamless, and adaptive.

If it's time to work, Spaces will only show you what you need to be productive. When you're commuting, Spaces will have your favorite podcasts ready to play. 

 
screens.png
 

We tend to get distracted with unnecessary notifications and activities at the wrong time. 

Have you ever wasted 20 minutes of your morning just scrolling through your Instagram feed when you could be making pancakes while listening to your favorite song? These were some of the situations our team were discussing.

 

 
quotes.png
 

But wouldn't it be great if your phone behaves the way you want it to?

 

 
Screen Shot 2018-02-22 at 12.14.06 AM.png
 

Yup. Spaces can save you from embarrassing phone calls in a middle of a meeting. Here's how we designed Spaces.

 
 

Design Concepts

1 Work is for work. Play is for play.

We explored the idea of app stacks for our adaptive home screen because they appear much cleaner to the eyes than a grid of icons found in operating systems like iOS. We wanted to emphasize intentionality.

Here are some of our preliminary sketches and ideas of how Spaces will work.

 

 
Conceptualizing "work is for work" and "play is for play" with the table sketches.

Conceptualizing "work is for work" and "play is for play" with the table sketches.

Sketching possible interactions that allow users to navigate through Spaces

Sketching possible interactions that allow users to navigate through Spaces

Sketching the home screen layers

Sketching the home screen layers

 

2 Your homepage should enhance your productivity.

Here is a rough concept of the adaptive homepage. We wanted to eliminate as many distractions as possible, so we decided on having app stacks to keep users focused on a few tools & resources for the current task they are doing during the situation they are in.

 

 
WIreframe component.png
 

Encouraging intentionality & mindfulness 

What if a specific app isn't part of the Play or Work space? Users have the flexibility to add another app to their current stack. However, because we want users to be intentional with their app use, they must search the name of the app in order to add it to their current app stack.

 
Interaction Design.png
 

Most importantly, tell your phone when to behave.

Spaces is seamless. It enables your phone to behave according to your day-to-day events in your calendar. As you create a new event in your calendar, you can assign that event to a specific space to set the behavior of your phone during that Space.

In a coffee meeting with John, you don't want to be rude. You can assign this event to your "Work Space" (or your own customized Space) so that you don't get random notifications or buzzes while you're busy talking to John.

 
set cal.png
 

What would your morning look like with Spaces?

Take a closer look at what the adaptive homepage looks like to someone who is getting ready for the day.

 
 
a closer look at homepage.png

And the rest of your days.

 
screens.png
 

Thoughts & Learnings

This project was heavily UI design due to the nature of the Mobile App design course, but I tried my best to incorporate some user experience design into it. Although we did not conduct any formal user research to back up our design decisions, we took a lot of time to discuss our own pain points as potential users of Spaces. I also became more familiar with creating design languages and mobile app patterns during this project.

Had there been more time, I would design a way for users to create and customize their own Space, and set behaviors for their phone during that Space. This is a crucial aspect that allows users to gain full control of their device. Your device doesn't own you, you own the device.

 

 

 

Take a look at the rest of Spaces

In addition to our adaptive homepage, we collaboratively designed an ecosystem of Spaces apps for our mobile app design class. Ultimately we are striving for immersive app screens that let you do the work you need to do. It's all about focus and intentionality.

 

 

Calendar

calendar.png

Media Player

media.png

Notes

notes.png

Clock

clock.png

Dialer

dialer.png

Browser

Weather

weather.png