Drawing wireframes for a better user experience

What was created

A complete wireframe overview for an app that with a physical plug can be used to monitor e.g. the electricity consumption of an electronic device, or the temperature in a room.

The missions


Create an intuitive flow through the app and mak it easy for the user to get support when needed


Make the installation of the physical plug as easy and intuitive as possible


Create a complete set of wireframes covering the entire app for the developer to implement 

The results

In cooperation with the project's designer, we wireframed an overview of the entire app. The wireframes were great for discussing the final flow of the app, and to make sure that there were no "blind alleys" where the user would be stuck. It also made the developers job of implementing the app easier, faster and more efficient.

Intital wireframing using post-its
The final version of the wireframes, made from the many post-its

How you can do it too

Use case scenarios

Sketch out every scenario in which a user can use the app. Draw every single state the app can be in, and how the state relates and links to other screens.

User stories

State what the users can see and interact with on every screen of the app. Give the users a vioce by using “I want to…” or “I expect…” statements.

Drawing wireframes

Use the program Draw.io to draw the wireframes using the program’s pre-made phone screens, buttons, etc.

Read more

Kontakt Gheist

Kaffe? (Eller the)