Nest Mobile App Design

nest-mobile-app-design-intro-thin.png

Project Details

Educational
Design Challenge
Project Responsibilities
User Experience and Interface Design.
Tools UsedWireframes
Wireframes: Sketch, Hifi Comps: Sketch.
Format
Operating System: Android and iOS, File Format: Vector Graphics, Export Size: 1X.

Introduction

This was given to our group as a team project. The object was to create a new Smart Chair application that has adjustable controls for the chair to recline and settings for massage, vibration and music volume. We were also tasked with creating a new Smart Chair icon line on the Nest eco system screen.

Design Challenge

Build a new Smart Massage Chair application into the existing Nest eco system screen. The new application should feature massage, vibration and music volume in the settings panel.

Assumptions Made

The assumptions that I had made when first designing the Nest application was that the controls settings would be simple to design.

Ux Design Process

nest-mobile-app-design-early-sketch1.jpg

Nest iOS Mobile App Design Early Sketch 1

Nest iOS Mobile App Design Early Sketch 2

Nest iOS Mobile App Design Early Sketch 3

Early Sketches

We created quick concept sketches on the dry board and came to agreement on 2 different concept layouts for final design development.

Wireframes

nest-mobile-app-design-wireframe1.png

nest-mobile-app-design-wireframe1.png

nest-mobile-app-design-wireframe2.png

nest-mobile-app-design-wireframe3.png

Screens Explained

Wireframes were used to organize the user interface into recognizable design patterns so that the user can easily navigate the application. The first wireframe features an early mockup of the Nest Smart Chair application with limited features and functionality, but was chosen as the best layout for final development. The Second wireframe features an icon in the Nest eco system that was later changed to an illustration to match the design elements of the other eco system icons. The third wireframe concept was eliminated because of limited functionality features.

Hifi Mockups

nest-mobile-app-design-hifi-comp2.png

Conclusion

The final Nest Smart Chair application features an easy to use reclining chair control that allows the user to control all points of the chair adjustments. The three circular preset buttons were added late in the project in response to user testing requests. The presets can be used in stock mode or can be saved to your own unique settings by holding down the preset button for longer then 5 seconds. The massage, vibrations and music setting will increase with intensity as the user pulls the slider to the right. The final Nest Eco System Smart Chair icons were matched to Nest Smart Chair application color theory. The assumptions made when first designing the application that the controls settings would be simple to design were incorrect, it was difficult finding a set of controls that had the same design but controlled different technologies.

BACK