The design process to create an interactive mobile prototype

Introduction

What if your smartphone was able to show you the information you need when you need it?

Nowadays everyone uses a smartphone, and checks it several times a day, searching for different informations: weather, traffic, news, movies, places to visit, restaurants, social media, etc. To get all this we need to use several different apps, or visit several different sites. What if a single application could give you all this, tailored to your needs?

The research

Starting by the research phase, we need to find persons to observe and interview. Understand the users needs and get some breakdowns and design opportunities to help create a good product to help them out. The diary study, that shows the user behaviour, is one of the best methods to understand what users do, and not what users say they do. Nevertheless, the best is always to observe users on their environment.

I’ve observed and interviewed 3 persons regarding this subject. I’ve observed a lot more staying quietly at the park, the bus, the supermarket, just looking to what they do with their smartphones.

There is this guy that leaves the office and likes to keep up to the matters of his interest using the phone, while he walks to the car. It’s 15min walking and looking to the phone, switching from app to app, from site to site.

There is this guy that every morning launches 4 apps and sees 3 sites to get the same information every single day: The weather, the traffic, the head news and the day agenda.

There is this girl that commutes using the bus and without being able to hold the phone, she still wants to keep up to her matters of interest. Maybe she can use headphones and ear what her smartphone has to tell her!

Here is an example of a sketch of a design opportunity while observing people: Someone on a bus, hands full and not able to hold a smartphone to read it.

We can say these users help us create our personas, to help the design process and increase the quality and consistency of our work. Personas aid designers to create different designs for different kinds of people and to design for a specific somebody, rather than a generic everybody. This initial phase of research was very important and useful for understanding users.

The Ideation

Next we can start the ideation phase, where we take the user needs and build a point of view to start having ideas. We analyse the options in the market to get inspirations, we brainstorm with colleagues and friends too. Taking in account all these needs, the decision was to design a mobile application that can help people have the right information, at the right time. Yes, like google now does, but with slight changes.

For instance, imagine if you could project your phone screen on a wall, and read the information you need hands free, while doing other tasks (preparing the kids breakfast, like I do; doing indoor bike training and still read the information looking at the wall).

Imagine you are on a bus, hands full of bags, and you turn on the screen reader of your app and ear all the information you need using headphones!

The main page of the app is the dashboard. That’s where we can see all the boards that we selected and they are ordered from top to bottom according to their importance at this moment. This means that the boards (that are selected from a store of boards) are configurable and the user can set when each board should appear on top of the dashboard to provide reading at a glance.

For instance, imagine a shopping list board. It contains a list of items to help you on shopping in the supermarket. User can add and remove items from that list, but most of all it can be configured to appear on top of the dashboard when the phone enters a supermarket. Then, when the user looks at the phone, he sees the shopping list at a glance!

In the morning, for a certain user, the top boards are the weather, the traffic, the head news and the day agenda! All these boards move to dashboard bottom during the day, giving place to another boards, more important at that time.

It also has alerts, or notifications, that means for instance that the user can ask a traffic board to trigger alerts when a certain route is jammed. Or configure the shopping list board to notify when it passes more than 15 days without buying potatoes…

Storyboards

Now, let’s create storyboards to show users doing tasks and using the new app to help them out, allowing you to check how the interaction will behave in a real environment. It’s time to create some paper prototypes according to the storyboards, and see if it fits.

Example of a storyboard where the user leaves the office, and uses the smartphone, while walking to the car, to keep up with the matters of his interest.

Example of paper prototype

Now, let’s get these prototypes and do an Heuristic Evaluation. Let other people evaluate your prototypes. Get the results and plan which changes could and should be made. This evaluation resulted in many good suggestions and small improvements that got the app a level above!

The design process should now be moving to create a wireframe of the main pages. Here is the wireframe of the main page, the dashboard, created with Pencil.

Wireframe of the dashboard page

The interactive prototype, first version

It’s now time to create a development plan to conclude the interactive prototype and publish that prototype using inVision.

Let’s use some photoshop skills and create the screens for our app. Add some interactivity with inVision and let the users try it!

Example of some screens:

Two example screens created with photoshop to add to the inVision prototype

The user testing

The next step is one of the more important: user testing. After this step we might return to the drawing board.

In person testing was prepared, creating a protocol that allowed anyone else to follow it and repeat the test. It’s great to see the reaction of the persons to the UI, to the all concept, to the all experience. Many great input was gathered and many improvements and re-planning was made to achieve a better experience. Some re-design was made regarding navigation and structure of the settings feature.

Example of user interacting with the application, done with photoshop and inVision.

User trying to access the help, to understand what kind of app is this and what does it offer. The top right icon (i) was not clear. The user asked for a better shortcut to access help.

Some re-design was made to allow A/B testing. Things like where to put the help, what icon to use to represent it and where to put the home/dashboard shortcut, were features used to A/B testing. A plan had to be made in order to prepare the test and gather possible outcomes and interpretations.

This is an example of a sketch for A/B testing, with changes from version A to version B:

Paper sketch about version A and B of the prototype regarding help and home locations

The A/B tests were done using usertesting.com and the results were great! Many assumptions got clarified and the input was most valuable. The most important result was that the designs need to communicate by themselves. This means that a user that doesn’t know your application, must be able to understand it by your designs, by your prototype. That is a great challenge!

Changes were made to the prototype and now we are ready to make it pretty and finish it.

inVision prototype before making it pretty: https://invis.io/5N80JLQBU

Finish

Moving from photoshop/inVision to JQuery Mobile to implement a pretty and interactive prototype and publish it on Heroku to allow people to see it.

Here is a screenshot of it:

Using JQuery Mobile to create an interactive prototype

And it’s done! I named it @Glance.

Check it here, using a mobile phone or using a desktop browser resized to mobile phone dimensions to get a better experience:

https://glance-tailored-dashboard.herokuapp.com/welcome.html

There is also a video promoting this work at: https://youtu.be/FUI9OkRFRS4

All this work was done for the online course of Coursera Interaction Design Capstone Project.