PROJECT BRIEF
The idea was to create an easy to navigate mobile registration template for an app. It involves ten steps from creating an account to verifying.
MY ROLE IN THE PROJECT
User research, style guide, wire framing and prototyping
TOOLS USED
- Figma
- After Effects
- Illustrator
- Google forms
USER RESEARCH
- For most apps, users generally expect to type in name, email address and password when it comes to registration.
- Verifications through phone number is regarded as a safe method.
- Users expect a clear instructions and be able to easily follow through the registration process. In such cases, adaptive placeholder have been found more useful to keep the context of the form after the user has already entered something in and eliminating any type of confusion for the user.
PERSONAS
USER FLOW
LOW FIDELITY SKETCH
STYLE GUIDE
BUTTONS STATES
HIGH FIDELITY MOCKUP FOR USER TESTING
USER FEEDBACK
- The color takes away the attention from the content.
- The theme looked too playful to be used as a generic template.
- The text to background contrast was not enough
- The icons felt more prominent than the actual text, instructions and the buttons.
- User were able to get to the next screen without valid input.
- Users were confused going back to the registration process for resending the verification code.
FINAL MOCKUPS
Based on the user feedback I made the following improvements
- Reworked the icons.
- Reworked on the text, the colors, and contrast ratios.
- Added a resend screen for easy navigation.
- Added button states (disabled and enabled).
