IoT to iOS analysing and syncing app interface design

Date
Dec 2017 - Jan 2018

For
Final in Course User Interface Design

Role
Interface Design

Stack
Interface with Adobe Xd
Graphic with Adobe Ai

What is Sleepad

They are so many wearables-sleep-monitoring devices in the market help people to understand "what has happened" their body.

However, based on our survey, these products was only provided raw data to the users and focused on the share users data to SNS (Facebook/WeChat, etc.)

Sleepad is a comfortable IoT Device for sleeping analyzing and motioning and privacy matters. I was creating an App for analysing and syncing between user and device.

Hardware

Hardware simple (by WT Wong)

App connecting device and user, the challenges are:

• Easy setup and managing raw data form device;
• Using emotional to creating a comfortable experience;
• All for better sleeping: night view/natural alarm, etc.

App connecting hardware and user

Interface (graphic theme)

The theme style called “Warmly Autumn”. For user’s comfortable sleeping feeling, the interface designed into warmly colour and provided an option to view the night mode.

Login, setup, index and data report interfaces (light)

Alarm and index (night)

Emotional graphics (mascot)

Emotions in mascot

We were creating a sheep mascot in Sleepad for emotional design.

When the user opening the Sleepad app, this sheep mascot can guide and help them read sleeping data and make recommendations, for example:

Analysing sleep status and generating a report/making recommendations can help sleeping next night, or managing raw data from device.

Emotional design and raw data/data visualization compares