Spectrum

Envisioning a mobile operating system focused on sincerity, transparency, and efficiency

Spectrum is a mobile OS concept designed with the principles of sincerity, personalization, and efficiency.

As an OS, Spectrum was designed with 13 native apps. This project was an exploration of design principles and mobile design systems.

In a group of 6 students, my role was lead designer and brand director. We designed Spectrum in Autumn 2017 in class about mobile design.

Role
Lead designer

Focus

Design Systems
Visual & UI Design
Motion Interactions

Timeline
Oct–Dec 2017 (10 weeks)

001

Design Language

We wanted to explore designing systems, with the framework of designing a mobile OS. As part of that, we wanted to learn about design languages and design principles to unite an overall design.

Design systems enable us to build better products faster by making design reusable—reusability makes scale possible. They also reduce overall design/technical debt.

002

Competitive Analysis

To better understand the mobile market, we took a look at current popular mobile operating systems–their design languages and distinct interactions as examples.

Mindful Usage

After auditing design patterns across these platforms, something that we took away from examining other OS designs was a pattern of exhaustion around apps with endless scrolling and too many notifications.

Discussing with my team, we decided to focus on designing a mobile OS that could give control back to the user by working against mindless browsing.

How might we design an OS to promote mindful usage?

003

Design Principles

We settled on the three following principles to guide our OS design for mindful usage.

Sincerity
Spectrum is transparent and honest. Appearance is deeply intertwined with function.

Personalization

Spectrum promises user control and freedom, allowing you to experience your own unique interface.

Efficiency
Spectrum promotes efficiency, allowing users to complete tasks in a fast and productive manner.

004

Widgets

Inspired by Microsoft's Tiles and Apple's Widgets, we envisioned our own design system with widgets. Widgets are a way to stay informed and interact with apps at a glance.

Goals for Widgets

Flexible layout
Allow users to customize the size and arrangement of widgets

Shorten the journey
Limit widget info and interactions to the most necessary and relevant

Example mix-and-match layouts of widgets

Why Widgets?

Widgets are an efficient way to interact with and get at-a-glance, timely info from apps, all without having to enter the app itself. Users can add, organize, and customize different widgets for different purposes.

Widgets are the cornerstone feature of Spectrum because they represent our design principles–sincerity, personalization, efficiency–wrapped up into a neat concept.

005

Sprints

Due to the fast-paced nature of the class, we quickly moved past ideation and sketching and jumped right into design. We only started off with low-fidelity wireframes of user flows through some native apps. Overall, we completed all app designs over 3 sprints focused on communication, productivity, and informational apps.

Some work-in-progress shots with the team

006

Spectrum

Introducing Spectrum, the mobile OS designed around sincerity, personalization, and efficiency. We created a total of 13 native apps, which include essential functions such as text messaging, calling, calendar, calculator, and more.

To condense the large amount of screens we have for each app, I've selected 5 apps that I personally contributed towards, with their best screens to showcase.

High Fidelity Designs

Widget Dashboard

Your personalized widgets page
Mix-and-match widgets for your own needs and preferences

Weather

Weather widgets
Forecast timeline
More info
Next 5 days

Music

Music widgets
Navigation tabs
Browse genres
Library, player, and up next

Mail

Mail widgets
Smart inbox
Quick view and reply
Full mail view

Notes

Notes widgets
View notes

Tasks

Tasks widgets
Lists, tasks, and status

Styles

008

Reflection

This project has been a great place for me to start exploring larger design systems beyond the typical standalone app or platform. Some takeaways from Spectrum:

Always circle back to the purpose
Every step of designing Spectrum was met with the question, “does it align with our design principles?” Spectrum taught me about the importance of design languages and how they touch upon every aspect of an overall product’s design and perception.

Design is not a vacuum
My group had 6 members, all with varying levels of design backgrounds. We sometimes found it difficult to contact some members or discuss our design decisions to each other without conflicts. Everyone’s got different experiences and opinions, but that's all part of being a team.

Thanks & Acknowledgements

To my group members: Gina Lee, Kristy Chen, Jing Wen Pan, Yilin Jin, May Zhao
To Brian Fling, for roasting our designs each week for the greater good.

In addition, a team of designers reviewed our design along with other OS designs from the class. Spectrum scored the highest in class!

Next Project

Pinterest's Tried It