Example of a prototype of a mobile application.

1. Introduction

In this article we will create a high-definition prototype for a mobile application. This prototype will be interactive and navigable, a previous step to its programming. To do so we will use the free version of Justinmind .

In the first section the work environment where we have generated the prototype will be defined by means of a small explanation of the tool. In the second section a high-quality prototype will be analyzed, listing each of the different interfaces by which it is formed. To finish, in the last section the download url will be shared in order to access the prototype and perform the different tests.

2. Justinmind

Justinmind is a Spanish start-up that has developed a product that allows validating the functionalities of applications for PC, Web and mobile devices, by means of prototypes and simulations.

The main advantages provided by prototyping and simulation of computer applications are the reduction of costs and risks in projects. With this objective, Justinmind has created Justinmind Prototyper, which allows creating prototypes and simulations of applications, and Justinmind Server, to publish, share and review prototypes through the Internet browser.

Justinmind Prototyper allows project managers, analysts and end users to define and visualize in a realistic way the future of their applications by means of a simulation that allows carrying out proof-of-concept tests.

This prototyping tool is easy to use and avoids having to repeat programming tasks, something common in the development of a project, and reduces costs. In addition, it avoids changes in critical phases of the projects, speeding up the development of applications.

Justinmind allows prototyping and simulating web 2.0 applications, portals, intranets and websites, applications for mobile devices (iPhone, Blackberry), PC and SAP applications among others. Available both for Windows and for Mac, they are already at version 2.6 and an isolated license costs about 480 euros, while the concurrent one goes to 900 euros.

3. Objective

As we already defined in PEC1, our application will be in charge of carrying out a control of the users' electricity bill. With the new load curve system of the new electronic meters our electricity distributor is obliged to provide users with access to their consumption profile. For that the distributor will grant the user access credentials that the user will have to register in our application.

1.3.1 Functionalities

Next a list is shown with the different functions that the application has:

User registration: First of all, the user who accesses the application for the first time has to have the possibility of carrying out a registration to create new access credentials.
User guide: Brief explanation of what the application is, how to register and what functionalities it offers.

User login: The application has to have a security system. The user who owns the application will have to enter access credentials that the user will have to validate correctly. Once accredited, the user will access a main menu that will allow access to the following functionalities:
- Management of a Supply: The application has to have a section that allows the user to fill in a form to register a new supply to control and to control all the supplies that he or she has.
  - Statistics: In this interface the application must show the electrical consumption profile in several modifiable graphs. The user can modify the range of the data obtained. This would be the main function of the application.
- Offer Search Engine: Compare your bills with those of other electricity marketers in order to analyze the one that most interests the user.
- Alerts: This functionality must inform when the user exceeds the consumption of a certain amount or for example the price of electricity has dropped a lot.
- Daily Price: Know the price of electricity at each moment of the day. If the user has an hourly tariff he or she will be able to know exactly the current price of electricity.
- Help: Allows the user to receive information about the different functionalities that the application offers

4. Interface

The application will consist of the following interfaces necessary to fulfill the functionalities exposed in the requirements:

4.1 User identification

The user when accessing the application for the first time must authenticate himself or herself in order to use all the services (figure [ref] ). If the user already had access credentials for the platform he or she simply has to enter them, but, if not registered in the system, he or she will be offered the option of signing up (figure [ref] ) by introducing the following data:

User
Password
Electronic Mail

Name
Surnames
I.D.
Address
Work Sector
How he or she learned about the platform
User photograph.

To improve user usability, the application gives the user the facility of remembering his or her credentials and thus not wasting time entering the user name and password.

begin

end In the case that a user needs to clean the content of all the registration fields in the middle of the registration process, he or she has the possibility of, by pressing the "Clean Fields" button, emptying the content of all the writing blocks of the form as shown in figures [ref] and [ref] respectively.

begin

Filled User Registration Interface

begin

Clean Fields Effect

end Another detail that we have been able to implement in the prototype is a popup to inform the user when an error has occurred in the identification process. When the user incorrectly writes his or her credentials the system does not allow him or her to advance and shows a warning as shown in figure [ref] .

4.2 Guide

So that a novice user can learn how to use the application from scratch, there will be a button that will allow us to access the guide to help new users get to know the application. As shown in figure [ref] , in the prototype we have only chosen to indicate the user and the password in order to access the application.

4.3 Main Interface

Through the main interface, the user will be able to access the main options of the application:

Supply Management
Offer Search Engine
Price History

In figure [ref] we can observe how this interface has a button for each of the functionalities described in section [ref] .

If a user gets lost or wants to go deeper into some aspect of the application, in figure [ref] an example of interface is shown to which the user will be able to access to get information about the functionalities. To access it he or she will have to press the ? symbol that appears in figure [ref]

4.4 Manage Supplies

The first option that we are going to study is how to manage our electricity supplies. As we have commented in section [ref] the user can store and manage his or her bills so that, when pressing the "Manage Supplies" button, an interface will appear like the one that we can observe in figure [ref] . Once we have selected the address from the list, it will provide us with the information that we can observe in figure [ref] .

Another very interesting aspect is the alert associated with our address. Among the different types of alerts that the application has (for example consumption, price or even bill analysis) we will be able to choose the one that best suits our needs and associate it with the supply point. If at some time the alert is fulfilled the user will receive a notification on the device.

Another different option is for example to show all the supply points on a map. If we press the map button an interface will appear as shown in figure [ref] . Unfortunately, in the prototype the option of adding marks on top of the map has not been implemented due to its temporal cost. This functionality will be found in the final program.

begin

Tool Interfaces

In the event that a user wants to enter a new address to control, we will have a menu (figure [ref] ) that will allow us to enter all the data required by the application. Inside the interface we find two different types of fields which will be:

Mandatory:
- Name
- Description
- Photograph
- Search on the Map
- Distributor
- Retailer
Not mandatory:
- Registration date

Once the supply has been entered, the user will be able to access the record to see the home's consumptions (figure [ref] ). Of course, he or she will be able to modify any information that he or she wants through the interface. The changes will be stored when the save button is pressed.

begin

Supply interfaces

Once all the more general aspects have been indicated, we want to analyze some programming nuances. Once the user has created a new supply, that is, has given all the information necessary to the program, he or she has to grant the access credentials in order to access his or her bills through the portal of the electricity distributor. The api that we intend to use needs a user name and a password as shown in figure [ref] and that the user will have to obtain from his or her electricity distributor. This interface will appear as soon as the Store Supply button is pressed. The default passwords of the prototype are the following:

User: UserPassword:Password

Another important aspect is how to store the geolocation of the supply. In the end our idea has been simply to show a map to the user and allow him or her to press the position on a map. An example of the interface that would be implemented when pressing the Show on a Map button is figure [ref] .

Going back to the supplies interface, as we have commented before, when it is pressed on top of the list it will be possible to access the supply record, as shown in figure [ref] . Within this interface we will be able to access its consumptions or modify the user name and password in the event that the distributor changes the credentials. (figure [ref] ) and access the stored statistics.

Supply interfaces

Of course, when we log in to the distributor, the user may enter his or her user name or password incorrectly. The interface will notify him or her as shown in figure [ref] .

4.5 Statistics

On the one hand, in the notes of the subject we have learned that the use of graphs is fundamental to transmit information based on statistics or on comparisons of numerical data, since it can help to understand data that would be incomprehensible in textual form.

Following this philosophy, we have implemented a line graph with the idea of representing the evolution of numerical data over the course of a determined period of time. The main reason has been to give the user the ability to quickly visualize the sense of the evolution, increases and reductions of his or her electricity consumption. It is also very useful for establishing comparisons between two or more data series and therefore to compare years, months or different weeks of a year it seemed very interesting to us. In figure [ref] an example of this interface in the prototype can be analyzed.

4.6 Offer search engine

Another option of our future application is to be able to search for the best offer among all the electricity companies (figure [ref] ). With this purpose, the user can use the search engine and compare all the possible offers on the market in a list. Once analyzed, he or she can click on the one that interests him or her and see the comments of the other users (figure [ref] ). Of course, the user will be able to enter his or her opinion.

begin[h!]

Interfaces to search for tariffs

Of course, we have implemented several interesting functionalities. The first of them has been the ability to sort a list. Of course, it is not very elaborate but the idea of what it should be like in our final application can be intuited. In figures [ref] and [ref] it is observed how a sort change from Highest to Lowest affects using the different buttons.

Retailer List Interfaces

Once chosen, we have implemented the effect of writing a message in the offer profile. In figures [ref] and [ref] the effect of saving a comment when pressing the button can be seen.

Interfaces to search for tariffs

4.7 Price

Another functionality of the application is to obtain the prices published on the web page of the CNMC to check when it will be more economical for us to consume energy. This section will allow us to analyze a price history and compare whether the prices of our retailer are similar to those shown on the website. In the figure it is shown by means of a linear graph.