Background

The breez mobile operating system (OS) was designed for a mobile application design course in the Informatics department at the University of Washington. The project's focus was to design a unique mobile OS and 14 core mobile applications. The project was divided into six sprints. In sprint 1, we developed a design strategy for the OS. Sprint 2 was dedicated to creating guidelines for the user experience (UX) and user interface (UI) of the OS and its accompanying applications. Sprints 3-5 focused on the design of the core applications. Finally, sprint 6 was used to refine our designs and compile our final deliverable: a slide deck to be reviewed and rated by seven professional designers.

Project Type
Team project with Brent Gruenke, Wynston Hsu, Cynthia Richey, Eduardo Rojas, and Martin Sangwoo Song

Project Components
Design language, personas, context scenarios, application and system management, application and content types, gesture and interaction models, design sketches, wireframes, and hi-fidelity mock-ups

Timeline
September - December 2017 (11 weeks)

design Strategy

The main goal for our first sprint was to develop a design language for our mobile OS. This was our chance to establish our design's guiding principles and vision in order to promote consistency and efficiency throughout the OS. 

Design Language Research

Most of our team's members were not familiar with the concept of a design language prior to this project. To develop our understanding of what a design language is and why they are important, we researched several well-established languages from major companies: AirBnB, BBC, Google, IBM, and Microsoft. We found that a design language is a critical tool for saving time and creating a unified design. Design languages provide the common elements and guidelines a designer uses to produce their work. Furthermore, they give designers an overall philosophy to design by.

Identifying the Problem

After building an understanding of what a design language is, we started to look at the problems we wanted our mobile OS to help solve. Using our personal experience and reviewing mobile OS market trends, we identified four main issues we wanted to address in our design:

1. Difficulty using larger screen phones

2. Disconnection between the machine and the person

3. Constant clutter, noise, and distractions

4. Absence of natural and intuitive gestures and motions

Target audience and their needs

Based on the problems we identified in the current mobile OS market, we compiled a list of five major needs for our target audience:

1. Accommodations for using larger screen phones

2. A personal and human experience

3. Focused environment

4. Reduced distractions

5. Intuitive interactions

Vision

Using the target audience's needs as a guide, we began to explore our language's vision. During this exploration, a theme of nature emerged. People are a component of nature. People are inherently drawn to nature's forms and functions. The team saw nature as adaptive and inclusive. Additionally, nature is a model of efficiency. In nature, everything has a purpose. This lack of unnecessary elements lends itself to a special elegance. Finally, everything in nature is connected. Our design's success was to be measured by how well it met our design principles (see the next section) and our vision below.

Vision statement: A language inspired by nature and in harmony with people.

Design Principles

After creating our vision statement, we began to develop our language's design principles based on our vision. During an ideation workshop the team discussed its ideas on what we liked and disliked in the mobile environment. During this analysis, themes on simplicity, minimizing distraction, and organization began to surface. These themes were the basis of our final principles: focused, responsive, and efficient.

Focused

Minimized color, motion, and noise while still encouraging productivity. Our language is inspired by the “mindfulness” design principles of clear typography and ample white space.

• Clear, readable typography

• Providing exit points

• Whitespace

Responsive

A design that adapts and evolves to become an extension of one’s body and mind. Our language utilizes motion and form to provide a natural experience.

• All Components of the OS will strive to be connected to one another and work together

• Components will share their resources, forming symbiotic relationships

• Uses motion and gestures in an unobtrusive and natural way to provide feedback and interact with the device

• All elements of design will adapt to the user’s physical limitations, behavior, and environment (location, activity, weather, season, time, etc.)

Efficient

The design aims to maximize productivity and reduce people's effort to accomplish tasks.

• Maintains a consistent look, feel, and function to reduce cognitive load

• Minimizes steps to complete tasks

• Utilizes natural mapping to reflect people's expectations

UX and UI

During sprint 2, we began laying the groundwork for the OS's user experience (UX) and user interface (UI). We created personas to help direct our design decisions, determined hardware characteristics, and defined a library of gestures. Additionally,  we developed how the user would manage applications and system level functions. The UX and UI work we established early on was continually refined throughout the life of the project.  

Personas

To increase our understanding of the people we were designing for, we developed two personas based off the target audience we established in sprint 1.  Additionally, we included scenarios for our personas to better grasp how our OS would fit into their lives.

Gestures

A gesture guide was created to help us understand how people would interact with the OS. This guide defined what types of gestures would be available in the OS, their typical functionality, and the level they influenced: application, system, or both. The guide provided a useful reference tool during the design process.

Application and System Management

Utilizing the the foundation we built in sprint 1, we began outlining how people would manage basic application level and system level tasks.

Global Controls

Global controls served as our main system level navigation. These controls provide a number of useful actions: accessing the home screen, switching applications, viewing notifications, searching the phone and web, and using accessibility features. 

Assistive Reach

To address the problem of using larger phones, we developed an accesibility feature to assist people in interacting with objects in hard-to-reach areas of the screen. 

Control Center and Multitasking

Alert Management

Lock screen and Home Screen

Search

Music and Video

Judges' Feedback

The final submittal for this project was a slide deck which was distributed to seven design professionals to review and score.

Very impressed with this design team. They looked at existing pain points that occur with the current interface standards and have come up with several novel approaches. There's a very clear understanding of how people use and interact with technology demonstrated. The only thing I want to note is that the existing interface for mail does not account for recency of emails beyond within a day. (i.e. what if I want to know what emails I received most recently today?)

judge 2

When it was right - it was awesome, when not kind of cluttered.

Judge 3

I liked how the design language focuses on creating new ways to be more efficient. There may be issues with users not understanding how to use specific design elements. For example, the navigation joystick (center, bottom) is confusing. Most user will try to swipe the screen for navigation.

Judge 4

Overall very nice work! I feel you could still could have worked the joystick a little bit more into the design language a little bit more, but otherwise nice looking apps!

Judge 5

I really like the idea of global controls. The designs are very clean but also useful.

Judge 6

Some of the colors felt harsh and off putting. Specifically the colors in Tasks and Mail.

Judge 7

Had a difficult time seeing a consistent visual language throughout the applications.