Designing Registration
The registration process for this product was not like any other product. To facilitate designing the registration for this application, I had many discussions with the product manager to understand his requirements and referred to registration processes for several websites .
The registration is broken into two sections: creating an account and setting a password. The user who would be creating an account would be Resident Rob, a home owner who enrolls his devices such as an air conditioner into demand-response program run by the utility.
role: user experience designer
Date: June 2017-december 2017
These mockups were only to indicate functional design and not used to dictate visual design.
Because there are several steps in this registration process, I decided to include a progress tracker to have a visual indicator of on how long the registration process was and what it included. Before the user creates an account, he needs to go through a verification process to ensure he has the correct credentials. He puts in her account number and either his street address or PIN number assigned by the utility. In our design, we have included tip texts for the street address and pin that will appear when the respective field is in focus.
After the credentials have been verified, the user can create his account by choosing a username, providing his email, and accepting the terms and conditions. The requirements for what a username can entail is also in a tip texts, only shown when the field is in focus. When account creation is complete, the user would arrive at a confirmation page that indicates how the user would set up a password for the account.
This second set of wire frames shows how Resident Rob would set up his password. He will have received an email after account creation that includes a link to this first section. For security purposes, we have the user type in the username he just created in case the user put in the incorrect email when he created his account. Afterwards, he is brought to the section where he chooses his password which requirements are also displayed as a message when he starts typing in a password. Then he will come to the confirmation page stating he successfully changed his password.
High fidelity prototypes
These were creating using HTML/CSS with some javascript.
