Interaction Desgin Challenge
Crypta
A Sign Up Flow Challenge About Scalable, Reusable and Viable Design
mY rOLE
UX/UI & Interaction Designer
Product Type
Webpage
Timeline
2 weeks · 2024
Skills
Interaction Design, UI Design, Figma Components Design, Wireframing
tools
Figma, Adobe Illustrator
THE Challenge
I was challenged to create a sign up flow high fidelity prototype for a cryptocurrency company
The intention of the challenge was to create components from the ground up that were scalable, reusable and viable for a developer to code in a short amount of time.
Research
Understanding what goes onto a sign-up page
I was given a list of basic input requirements for a sign up page, but I knew the sign up requirements would be different for a cryptocurrency site. This was where I did my own research to formulate what additional questions I would add onto the form.
Wireframing
Understanding the use cases of different input controls
When it came to this design challenge, I had to meticulously compare the use cases and constraints of each input control. This was the first project where I truly had to sit down and dive into the basics of interface design when wireframing.
I added tick marks onto the slider to ensure it would be keyboard accessible. While others can treat it as an increasing value range slider, users who use keyboard navigation can use it as radio buttons.
Why did I add a progress bar on the side?
To give users a sense of forward progression
To lay out what's coming next and what has been completed so far
To serve as navigation for large page jumps if the user needs to go back 2-3 pages rather than pressing the back button
changes Made
What had to be changed or added after wireframing?
There were no fields for users to input transit number and account numbers in the event their bank was not listed as an option
I was missing a success screen to show the user they have successfully created an account and what their next steps are.
My "Go Back and "Continue" buttons were too middle adjusted in contrast to the rest of the content
Components
Designing the component library from scratch
From components as buttons to sliders, I had to make everything from scratch. A difficult requirement I had to meet for this design challenge however, was to make input fields typeable in my high fidelity prototype to which I was able to successfully achieve.
Video Showcase and SCREENS sHOWCASE
The Results
Reflection and what I would do differently
I realized just how unknowledgeable I was about interaction design in my previous works
This project as a whole forced me to be as detailed as possible with every little interaction. Whereas in other times, I would glance past a lot of the finer details. This would result in users providing feedback about confusion and frustration during user testing.
Consider using a one column layout with the input fields. For example, rather than having the user's "First Name" and "Last Name" input fields side by side, I would organize the fields vertically.
Incorporate inline validation to confirm what input fields have been completed or needs to be revised.