Keeping It Simple
Profile Editing Flow
Role: Lead UX/UI Designer
Duration: 2 weeks
Tools used: Figma, Media Modifier
Editing your profile's information shouldn't be difficult. Keeping Nielsen's 10 Usability Heuristics and WCAG standards in mind, I designed a user profile editing flow that's meant to be simple and easy to use.
Mock-up of the profile options screen
Check out the clickable prototype of the editing flow below (Click the looped arrow icon at the bottom to replay.):
A view of the full screens:
Your Profile screen
Account Details screen
Following WCAG guidelines, the typography and colors were chosen for contrast and legibility. I added icons for each category to make them scannable. Field labels were purposely placed above the input field rather than inside for ease of recognition.
Mock-up of user profile screen
Full view of Edit Profile screen
Out of the 10 Design Heuristics, I strongly prioritized user control, minimalist design, and recognition over recall. I believe they're critical to maintaining a great user experience when handling sensitive account information.
Liked what you saw? Check out my gallery.