Nesterapp.com - proptech - home cost estimate webapp

Working with existing design style and components

Working as the currently only designer for the app - cooperating with the developer’s team and management
Creating deliverables following the existing design system
Working in design sprints

Profile screens design

Converting between different user types

Adding personalized branding feature

Product tour

PROFILE SCREENS DESIGN

PROBLEM: The user wanted to to edit the name and email address connected to the app.

SOLUTION: Designing the profile screen with option to edit all mandatory user infomation.

USERS: 5 different user types with different content

PROCESS: Designing the basic (reusable) features first

MISTAKE I MADE: I received a minimal information and didn’t ask enough questions - I made a few assumptions that slowed down the process.

Old design:

V1

User 2

FEEDBACK: having the screen locked created an additional step for the user. The assumption is if the user is in this section, they want to edit the profile.
SOLUTION: Designing all field editable, except for the fields that require additional step for safety reasons.
User 2 (after clicking pencil)

FEEDBACK: This step is not needed. Same goes for pencils next to other user accesses at the bottom.
Adding access

FEEDBACK: I verbally asked for the preference: drop-down selection or buttons. Preference is buttons.
Prof User - User 3

FEEDBACK: same as User 1 P
Adding Access 2

FEEDBACK: Established that other users can access only seller account, so multiple options on the account time are redundant.
Email change module

FEEDBACK: there is no need to reenter the password since they entered it when logging in. There is no sensitive information connected to the app so this step is not needed.

V2

User 3

FEEDBACK: The team debating do we need an additional step for email and password or potentially have two filed to confirm password/email when is being edited.
Warning for professional user

FEEDBACK: approved
Warning for professional user v2

Version of previous screen with different font color
Password change confirmation

FEEDBACK: reconsidering the necessity or confirmation

FINAL

The final version has an inactive version of the profile screen which appears when the user opens a profile screen. As soon as the user clicks any of the fields, the system outlines the screen that is being edited, changing the color of the button - signifying it’s active and being edited, and is like that until the user clicks CTA save. After which the screen becomes inactive again and the user can see that information is being saved.

I eliminated modules for email and password change. When the user clicks one of those fields, the editable version appears with additional fields that need to be filled. This decreased the number of steps for the user.