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.

  • 1 week
  • Women aged 20-40 with an interest in interior design
  • Designed for all newer mobile devices

The missions

intuitiveflow

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

easyinstallation

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

wireframeset

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.

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

How you can do it too

usecase
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.

userstories
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.

drawwireframes
Drawing wireframes

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

Read more