EtherOS

A minimalist mobile operating system that embodies only the essential elements.

OVERVIEW

Role

Co-lead Designer; Ideating Design Principles, Creating the Design Language, Style Guide, & Component Library, Wireframing, Overseeing General UX/UI Design

Duration

Mobile Application Design
Fall 2019, 10 weeks

Team

Seven Designers
Instructed by Brian Fling

THE CHALLENGE

My classmates and I were challenged to create a mobile operating system that was distinctive, cohesive, and user oriented.  We needed to create an operating system that was centered around a clear and defined set of design principles.

Our Answer

My team and I decided to design an operating system that focused on reducing visual clutter, containing only the essential elements for ease of use and functionality. Our vision for this operating system was UX that was simple, streamlined, and minimal, and UI that was clean, elegant, and felt lighter than air, hence the name, Ether.
Here's our process.

OUTLINING THE OPPORTUNITY

To narrow down our target user group, we conducted some research to define the areas of opportunity surrounding a minimalist smartphone operating system. One of the constraints of this challenge is that we weren’t able to conduct thorough research through user interviews. Instead, we decided to analyze available studies to determine relevant the user values.

Highlighted Quotes

“Users had a strong preference for a limited function phone” (Smith-Jackson et al., 2003)

“Elegance achieves maximum effect through minimum means” (May, 2010)

Minimalism with removing unnecessary aspects and Gestalt together with organizing visual elements lead to the reduction of audiences' confusion and a more extensive range of them can make a more effective interaction to website.” (Sani and Shokooh, 2016)

User Personas and Journeys

CREATING THE DESIGN SYSTEM

My co-lead and I created a cohesive design language centered around our four design principles: streamlined, elegant, essential, and dynamic.

We were aiming for an aesthetic that was soft and created a sense of calmness, so we decided on using muted colors, thinner stroke and rounded weights, a humanist font, and components with low opacity backgrounds.

In order to allow all of team members to easily wireframe a consistent interface, we created Ether’s style guide, component library, and icon library.

Component Library

Icon Library

THE VISUAL DESIGN PROCESS

Then, we designed the homescreen and basic applications of EtherOS. Here are some of the wireframes and short explanations for the UX of each native app.

Lockscreen

Notifications at-a-glance; expand to peek

Swipe anywhere to unlock

Springboard

Customizable app drawer and navigation bar

Clock and notification bar animate to top of screen after unlock

Camera

Essential functionality; hold to record video, slide to lock video recording

Double-tap to switch between front and back cameras

Messages

Unread messages stand out against the background

Swipe left to pin or to delete


When composing a new message, swipe down to delete

Tap a contact’s profile/name for more options: text, call, video call, edit, or view shared media

Music

Navigate across playlists, artists, and albums by swiping anwhere on screen

Content is divided into two-column grid

Basic music controls with focus on album art

Easily-accessible shuffle option at the top of a playlist

Mail

Read mail blends into background

Swipe left on mail item to delete, archive, or mark as read/unread

Swipe down on compositions to save as draft, tap airplane icon to send

Photos

Albums are displayed in three-column grid

Navigate across camera roll, albums, and videos by swiping anwhere on screen

Long-press image or tap menu button for more options

Browser

Tabs are displayed in two-column grid for easy visibility of webpages

Address bar and toolbar auto-minimizes when scrolling to maximize display window space

Use the toolbar to switch between tabs, bookmark a page, or share the page

Calendar

Pinch to zoom in and out to change monthly, weekly, and daily views

Subtle graphical elements to show events and current dates


Skeumorphic conventions and icons
NEXT PROJECT
BACK TO PROJECTS LIST
back to top