Home Manager App Prototype.

People are ready to changes if they ease people’s life.

Iryna Andreyeva
4 min readAug 11, 2016

My idea for application is very simple & clear and based on observation. It’s realization became possible due to internet only. Using my application user can see the Electricity/Water/Gas (E/W/G) data, E/W/G sensors consumption for period, E/W/G sensors state and manage them remotely. Is it unclear? My advice: Do not worry and keep reading.

Main development stages:

  1. Storyboad time
  2. Paper prototype time
  3. Wireframe time
  4. A/B testing time
  5. Final prototype time

Note: I omitted “Needfinding” and “Ideation” stages because the result of these stage is Idea for application described above.

Invite you to go through all this stage with me!

STORYBOARD TIME

Imagine Alex:

Every month Alex should gather data about E/W/G spent and pay for them. The process of gathering is so bored for him: he must go to footer and looks at E/W/G sensors, write the data, returns to computer and makes payment online. But what if Alex is on vacation and time to pay has come and he wants to pay in time in order to avoid a fine? What he needs is my application which helps him to gather data about E/W/G remotely.

Note: The first name of my application was “Sweet Home”, but it was changed to “Home Manager” later.

Look at Alex in my storyboard, he is cute in his star pajama style, isn’t he …

Story board 1. Alex

Imagine Lia:

She likes shopping and went to Moll, but at the Moll she has remembered that she did not switch off the gas oven… She launches my application on her phone and finds the gas sensor which is connected to gas oven and switch off the gas sensor remotely. Voile!

Look at Lia in my storyboard, she is not beautiful but she is smart enough, she know what is fast neutron reactor …

Storyboard 2. Lia

Do you recognize yourself in Alex and Lia? I hope you feel empathy to them.

PAPER PROTOTYPE TIME

Advantages found on this stage :

  • simplicity of tools used: paper and pen
  • checking of correctness of words and sentences used
  • quick feedback of ordinary users
  • quality feedback (heuristic evaluation) of advanced users

This stage is iterating process, I drew — checked— corrected — drew — checked — corrected and did it again and again, till I got satisfactory result.

Look at my first paper prototype below (task: to switch off the gas oven that connected to gas sensor)

Prototype 1. Task: to switch gas oven

WIREFRAME TIME

There are lot of tools for wireframing, but Axure is the best one for me, it can simulate a lot of interaction and gives opportunity to create high fidelity wireframes, so I used it for creating of my interactive prototype.

Note: I also like Balsamiq with simple interaction for low fedelity wireframes.

Look at Balsamiq and Axure wireframes below

Balsamiq and Axure

A/B TESTING TIME

When I was creating prototype (on stage of paper prototype or wireframe) I had alternative decision for some elements. E.i. use gamburger menu instead of bottom menu… I have heard that gamburger menu is not good decision because of cognitive strain on user memory but I decided to check this theory online using UserTesting.

In my case both prototypes have the same rating, it means that there is not different between gamburger menu and bottom menu. But I can’t rely on these results, because the number of testers was too small. But I got a valuable negative feedback from testers about “how understandable my content are” and redesigned it again.

FINAL PROTOTYPE TIME

After all efforts described I have reached the final. I have released my first mobile prototype Home Manager for iPhone 5/5S/SE.

Note: log in sw@sw.com, password sw

This article was created as a part of “ Interaction Design” Capstone Project under Coursera.

--

--