Mobile FTUE: Profile Personalisation screens (meta)

[daniellekirkwood]

• Mobile FTUE: Profile Personalisation screens (iOS) element-ios#5652
• Mobile FTUE: Profile Personalisation screens (Android) element-android#5200

Allowing the user to personalise their profile encourages investment in the element app. We believe this investment will result in more time spent in-app during the user's first session and a more successful perception of the value of the product.

It's a fine line. Some users might be here to "kick the tyres" and get to the dashboard and we do not want to stand in their way. These users are able to skip personalisation altogether if they wish. If a user chooses not to skip personalisation after account creation, they can skip any stage thereafter or personalisation is just a few clicks - designed to be easy and fast! Figma

---

Account created

DESIGN GUIDE

• Tapping Personalise profile starts the personalisation flow
• Tapping Take me home or using the system back action finishes the onboarding flow, landing the user on the analytics opt in prompt

---

Choose a display name

DESIGN GUIDE

• TBC is it possible to have a preset user name? eg signing up via SSO
• Uses existing loading (bottom screen spinner) and existing errors (dialog popup)
• The toolbar back action and system back takes the users back to the Account created screen
• Save and continue is disabled whilst the field is empty
• an X is present in the field to delete the entire input
• Save and continue shows a loading state and updates the users upstream display name, on success continues to the Add a profile picture
• SKIP THIS STEP leaves the display name unmodified and continues to the next page Add a profile picture
• Display name is case sensitive  element-ios#5664
• Display name is case sensitivity, registration fails  element-android#5099

---

Add a profile picture

DESIGN GUIDE

• TBC is it possible to have a preset profile picture? eg signing up via SSO
• TBC Loading and error states
• Tapping the camera icon opens the gallery or camera dialog, selecting either options opens the camera or gallery (the same as updating the profile picture from the general settings)
• The toolbar back action and system back takes the users back to the Choose a display name screen
• When no profile picture is present the first character of the display name or if not present, user id is display in place of a profile picture.
• Save and continue shows a loading state and updates the users upstream profile picture, on success opens the Personalisation complete screen (link to ticket)
• SKIP THIS STEP leaves the profile picture unmodified and continues to the Personalisation complete (link to ticket)

---

Personalisation complete

DESIGN GUIDE

• Plays a confetti animation upon display (should be able to reuse the same one from the timeline/room details)
• Lets go completes the personalisation flow, opening the analytics opt screen
• The system back completes the personalisation flow, opening the analytics opt screen if applicable

[daniellekirkwood]

[daniellekirkwood]

https://github.com/vector-im/element-android/issues/5281
element-hq/element-ios#5652

[daniellekirkwood]

Display name discussion:

• Leave the display name field blank when the user reaches this screen so that they know there's a difference and "have" to take action
• If the user clicks skip, fill display name with MXID