Summary of Process

User Personas, Task Flows, Low Fidelity Wireframes, High Fidelity Mockups

ZoneOS

OS Design Concept

ZoneOS is a mobile operating system designed with the user solely in mind. The goal is to make the users' feel that the operating system is responding to their immediate needs. The user has to feel that they are one with the operating system. My role was to research and design all the features within this OS.

Tools used: Adobe Photoshop,Sketch,Balsamic Mockups,Principle

Challenge

• One of the main challenges of this project is to make the OS responsive to whatever personality that the user is feeling at the time.

Objectives

My goal of this case study is to:

• Provide different and distinct personalities that the user can choose depending on their current mood
• Make the users feel more involved with the OS

My Design Process

User Personas

Most of the research this time was done through comparative analysis. I downloaded different weather apps on the market to analyze their user interfaces. I wanted to understand what kind of information was displayed in the app as well as explore how I could make the process of checking for weather simpler.

Research Outcomes

Through this research, I was able to find out that many of the apps I downloaded could be made simpler. My observation was that there was too much information and some of them were redundant for users on the go. To gain access to weekly forecast and wind & pressure information, I had to scroll all the way down through the app, making this ineffective. Also most of the information below the page might be irrelevant for users on the go, who would rather just want to see the temperature of the day as it is.

Work Flows

My research allowed me to come up with different ways which I would go about to create the user interface.

Task Flows

Sketched out a rough general outline of how a user will navigate through the app to perform certain actions. Later on I developed this sketch in Adobe Illustrator, into two separate diagram flows of adding a location and sharing weather information.

Low Fidelity Wireframes

Drew out a low level layout of the homepage, share screen and add location screen using Balsamic Mockup. Each page detailed how a user would go about interacting with the app by detailing the function of each object on the screen. This helped me to decide which buttons or labels would be responsible to perform the user task processes I designed earlier. This guided me to develop high fidelity mockups.

High Fidelity Mockups

Based on the low fidelity wireframes I was able to develop these further into more visually appealing forms using Adobe Illustrator. I used different background images depending on different times of the day that the user opens the app; brighter backgrounds for daytime and a darker background for the evening. This adds more personality to the greeting message shown to the user when they open the app.

Usability Testing

This process involved me compiling my high fidelity mockups into prototypes using Marvel and sending it out to 2 people for their feedback. Based on this feedback, I made several modifications to the main weather homepage, making the temperature of the day the main focus of users' attention by getting rid of extra weather information such as wind speed and the high-low temperature of the day.

Prototype

Summary

I really enjoyed working on this project especially the user testability phase. one of the most challenging issues that I encountered was coming up with a UI design concept that would capture only the essential weather information needed. Through the user testability I was able to gain valuable feedback which helped me create a UI that was easy on the eye for users.

TEXchange