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
back to top