Civic Champs is a tech start-up company that makes tracking volunteering hours easier for non-profit organizations and the volunteers. User is able to sign up for volunteering, track those hours, and provide feedback to the non-profit organizations all through using this app.
The user needs more distinction between login information and contact information when editing their user profiles.
There is no distinction in color or symbol that signifies that the email address/phone number is a primary contact.
The user is also able to change their login information within the "Login & Security" tab, which is redundant and can be confusing.
Changing the email address in this case will change the login of the user. However, the user is not notified of the change.
First, I thought of defining the difference of login and contact information by labeling and separating them.
However, this doesn't solve the problem of labeling the primary contacts.
I also thought of adding toggles underneath each contact, so the user can choose their primary contact. However, it becomes difficult to do both labeling and differentiating at the same time.
In this iteration, I also added an "add" button for when the user wants to add additional contact information.
In this version, I took inspiration from Apple's Contact page where they followed a similar design. In this case, the user can choose which type of contact they are inputing, whether it's "Primary", or "Emergency", or "Other".
In this version, the profile screen will have a yellow check to signify that the email is verified, and next to it is the "Primary Contact" label.
The editing screen will not allow user to edit login information, since they can do so already in "Login & Security". This way, user can understand if they change their login information, then they will have to log in with the new email/phone number that they put in.
I made two versions of how I want to combine both being able to toggle primary contacts and differentiate between login and contact information.
Because the design doesn't take into account for when the user wants their login information as their contact information, and simply inputting it twice is not the best way to go about it. The screen will look too overcrowded and confusing.
After prototyping a few options, I decided that I need to look at the app holistically and see where all the login and contact information resides. This is where I stumbled upon the idea of combining the "User Profile" and the "Account Settings".
I believed that combining the two screens will not only make navigation easier, get rid of pages that are unnecessary, and also solve the problem of not enough distinction between login and contact information.
This time, I added all the tabs under "Account Settings" beneath the user profile information. That way, even though the user is now unable to make edits to their profile on the first screen, they are directed to press on "Login & Security", where they can change their login credentials as usual; or press on "Notifications", where they can now change their contact information.
After deliberating between a few icons, I've arrived at a conclusion. Because an email address format is very self-explanatory, therefore there's no need to label it as an email address, but rather label it as login credentials. This way, a login that's also a primary contact will not require two different symbols next to it. The symbol is also yellow, to signify that it's verified. This is not defined to the users because it's only important for the back-end to know.
When the user press on the icon, there will also be a pop up, letting the user know what the symbol means.
The former content of "Notifications" is now moved beneath "Contact Information", as that is more important for the user to see first.
The user is able to select a different primary contact, add a new contact, or delete an existing contact.
When the user adds a contact, they MUST verify it (requested by my product manager). To avoid user skipping the step of verification, the "SAVE" button is removed at this stage.
Notes have been written for the developers that when:
1. User press "enter" on the keyboard, directly transfer to verification
2. User press back button before verification, input is automatically deleted
3. User press anywhere outside of the keyboard, input is automatically deleted
4. User press "Cancel" on verification page, input is automatically deleted
.png)
When the user is deleting a contact information that they have chosen as the primary contact, they will receive a warning notifying them that notifications will no longer be sent to the deleted contact.
