Wand
— 2020

CREDITS

—UX/ UI:
Míriam R Seoane

—Tools:
Miro, Figma...

BRIEFING

Wand is a startup that has developed an algorithm that allows controlling several IoT devices with one single app.
Our task was to design a unique user experience for Wand app, from user research to interface and interaction design. 
One of the main objectives was to achieve clear and reliable communication between the user and the app, but also with a friendly and warm tone.

This project was developed in group within my master's degree in User Experience Design at ELISAVA. 

Wand— 2020

CREDITS

—UX/ UI:
Míriam R Seoane

—Tools:
Miro, Figma..

BRIEFING

Wand is a startup that has developed an algorithm that allows controlling several IoT devices with one single app.
Our task was to design a unique user experience for Wand app, from user research to interface and interaction design.
One of the main objectives was to achieve clear and reliable communication between the user and the app, but also with a friendly and warm tone.

This project was developed in group within my master's degree in User Experience Design at ELISAVA. 

Wand-header_
Process

—Understand

We started this project aiming to understand the world of smart homes and Internet of Things.
The first step was to clarify our stakeholder's needs and priorities. We needed to know which were the main functionalities to develop and also establish a series of project requirements. At the end of this phase we came up with a Product Roadmap that would be our map for the next weeks.

functionalitiessvg

—Research

We conducted two types of research. On the one hand, we dug into the solutions the current market offers for integrating smart home devices. 
On the other hand, we conducted a series of surveys and 1 to 1 interviews with actual users of smart home apps. Our aim was to understand how, why and when they used their devices and which problems and frustrations did they have.
This research allowed us to find some opportunities that would differentiate us from our competitors.

findingssvg

—Analyze

All this information and research lead us to determine two main user personas. We followed the method of extreme personas to have always in mind our early adopters, who will use and promote our product, but also our laggards, who would have more issues when using Wand. We want them to have the more pleasant experience as possible. 

Another output of this stage was the scheme of information architecture. This helped us to understand, map and, eventually, improve the structure of our product.

Isabel
Alex-1
Isa-text
Alex-text
Information-architecture

—Sketch

After getting all these conclusions, we developed low-fidelity sketches and wireframes. We were able to establish the basic structure and functioning of the app. With this material, we did some user testing to check how it worked. Some of our wireframes needed a few iterations. 

In the end, Wand was ready to get dressed.  

Wireframes

—Brand Identity

Wand's tone of voice is warm and friendly but always smart. It is more a personal assistant for your home than a simple devices administrator. Therefore we chose a warm and calm color palette to communicate everything is under control. The neutral beige gives the idea of home, while the primary gradient is fresh and modern. We came up with that vibrant lilac for the CTAs which gives off technology and smartness. 

The typographic palette plays also with the contrast between comfiness (serif but modern font for the headings) and technology (sans-serif and clean font for the bodies).

We set out a family of icons for the app. They are based on thin and clean lines to reinforce all Wand's values. 

COLOR-2
TIPO
Icons

—Prototypes

And here there are some of the interfaces we designed. Although we start from a mobile-first perspective, we've developed tablet and desktop versions of the main screens. Here you can find some examples of navigations, interactions and also loading screens and empty states 

mobile-1-1

Dashboard loading screens

desktopcarga-optim

      Dashboard tablet

Dashboard_Tablet-2
mockups

          Landing page

landing-1

— OTHER PROJECTS

© 2020. Míriam R. Seoane

hola@miriamrseoane.com