Profile part 9: Update profile

Posted by on | Featured

In this article you will learn how to think about the user profile and what are the best practices for managing it.

General description

There are 3 main components to the user profile:

  • the user info, such as name, country, etc;
  • the authentication part, i.e. the password change;
  • the interests.

As we’ve covered in a different chapter, the interests are managed separately. That leaves us with the management of passwords and user info.

Passwords are rather straight-forward, so we are going to gloss over them. Two things are important when changing a password:

  1. Always require the current password, the new password and the password confirmation
  2. Keep in mind that the user might have logged in with a 3rd-party Authentication provider such as Facebook or Google. In this case, there’s no previous/current password. This workflow needs to be handled and it’s up to you how, since there are many options (skipping the check altogether for such users, sending a password reset link to the users email and more)

The user info change is also rather straight-forward. Drop-downs or input fields for all entities are recommended. The only workflow that is a bit more specific is that for the avatar management. Users need to be able to remove the avatar, change it & crop it. We recommend using square avatars since they are the easiest to handle design-wise.

User stories

As a user, I want to be able to change my password

Acceptance criteria:

  • there needs to be password confirmation
  • if the user has an old password (they have logged in with email/pass and not 3rd-party provider) they need to provide it as a confirmation

As a user, I want to be able to change my user info

Acceptance criteria:

  • I need to be able to change:
    • name (required)
    • country (optional, can be removed)
    • gender (optional, can be removed)
    • birth date (optional, can be removed)

Note:

  • the example design does not provide UI for removing the optional data

As a user, I want to be able to change my avatar

Acceptance criteria:

  • I need to be able to easily remove my avatar
  • I need to be able to easily upload a new avatar with minimum dimension requirements (requirements are TBD per client)
  • I need to be able to crop my avatar

Design examples

Edit-profile

Comments are closed.