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
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.
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
- An article on wireframing from usability.gov: https://www.usability.gov/how-to-and-tools/methods/wireframing.html
- A more general approach to sketching UX interfaces: https://uxplanet.org/everything-you-need-to-know-about-ux-sketching-4ab8e66902e
- Another great article from Tubik Studio on how to fraw wireframes: http://tubikstudio.com/ux-wireframing-bedrock-of-interface-usability/
