Creating sign-up and log-in flows for an immersive metaverse
EDUCATION ✦ GAMIFICATION
Context
RadicalX is an education startup building an immersive metaverse for next-gen developers that aims to solve the paradox issue of needing experience to get a job. This project was in need of a sign-up and log-in flow that fit their brand.
As a UX Design intern, I worked alongside two other UX designers, the CEO, and Dev team to create a seamless sign-up experience.
Tools
Figma
Team
UXD Team, CEO, Dev Team
Timeline
July 2023
(RadicalX Beta launched in August 2023)
Designing for Developers
Problem
No existing sign-up or log-in flow for the website.
There was a need for sign-up and log-in pages to be created to have users sign in securely. These pages needed to account for incorrect information and email confirmation.
Goal
Creating an on-brand sign-up and log-in flow, for new and returning users to quickly sign in. ✧･ﾟ
The goal was to create an enjoyable user experience to quickly sign up / log in. We made sure to include states for incorrect input fields, reset passwords, and utilize Google and Github sign-in shortcuts.
🔍 Discover
Market Research + Moodboard
Working with the stakeholders to define the MVP goal
After a discussion with the CEO, I learned the vision for this startup was to create a gamified experience for Gen Z developers. He wanted an optimized sign-up experience for his users that fit the brand, specifically using dark mode and a video game-type style. We took inspiration from apps like Discord and explored a variety of sign-up flows across gaming websites.
Our team also did research on best practices for this. We found that we should prioritize:
Staying consistent. Keeping RadicalX's current branding in mind, we aimed to maintain familiarity for users while introducing new and innovative elements.
Headlines and Guides. To reinforce user engagement and purpose, we utilized headlines to remind users about the compelling reason behind their presence on the platform.
Shortcuts. Recognizing the significance of user convenience and security, we integrated social login options such as Google and GitHub.
Accessibility. Incorporate clear and concise labels and logical tab order to ensure accessibility and a seamless user experience.
Best Practices + Accessibility
Uncovering all the features
Before diving into the design process, we did a quick round of competitive analysis to view other education and gamified tool sign-up flows: what they are doing well or not well, and what features they had. We also looked into best practices for log-in and sign-up flows.
Key findings included:
Sign-up flows included steps to reset the password in the user’s email.
We should avoid relying solely on color for feedback; instead including a feedback message and an icon at a minimum to convey information effectively.
Utilize SSO options our target audience would use. In this case, Google and Github.
📝 Define
How Might We statements
Considering our user’s goals as well as technical constraints
Using ClickUp, our team created "How might we” statements to divvy up different tasks based on new or returning user’s goals. By utilizing acceptance criteria for each HMW statement, we were able to check our designs later for validation.
✨ New Users
“As a new user, I want to register…”
…with my Github or Google account, so that I can quickly start using the platform.
…with my email and password, so that I can create a new account without relying on external services.
✨ Returning Users
“As a returning user, I want to sign in…”
using my Google account to access my personal dashboard and track my progress.
using my email and password to access my personal dashboard and track my progress.
Our User
Designing for Developers on the Job Hunt
A Gen Z software developer is looking for experience to gain new skills to get a job. He needs experience to get a job, and needs a job to get experience.
“I’m looking to get hired as a developer but have no experience, so I’m not sure where to begin.”
User Flows
User Flow
I suggested to our team that we create user flows to understand all the pages we would need to create. We created two user flows, one for the new user and one for the returning user. This helped us map out the entire user journey, from the initial interaction to the final goal, while considering different user scenarios and decision points.
New User
Returning User
🎨 Design
Low/Mid Fidelity Wireframes
Staying on brand
We explored many different versions for the sign up and log in flows. We made sure to check in consistently in our standups with the stakeholder and other teams to get their feedback.
High-Fidelity Wireframes
Sign Up, Log In, and Email Confirmation
Responsive Wireframes
Accessing RadicalX through any device
While the current design focuses on desktop, we always want to consider adaptation for mobile in the future. We created several versions of what responsive wireframes would look like for both tablet and mobile screens.
🎁 Deliver
Usability Testing
Testing Our New Design
We created a high fidelity working prototype to test 6 Gen Z and millennial software developers before launch. We came up with three tasks representing three use cases of the app and monitored the results. Overall, users found the sign up and log in flows intuitive and enjoyed the process.
Task 1: Register
Scenario: As a new user register on the RadicalX platform with your email and password, so that you can create a new account without relying on external services.
Task Completion
100%
Avg. Time on Task
31.3 seconds
Task 2: Log In
Scenario: As a returning user, sign in to your account using email and password.
Task Completion
100%
Avg. Time on Task
11.5 seconds
Task 3: Reset password
Scenario: As a user you want to reset your password if you forget it, so that you can regain access to your account.
Task Completion
100%
Avg. Time on Task
19.7 seconds
Project Handoff
Suggestions for Next Phase
To consolidate our findings, we created an affinity map to highlight the key points the next team should focus on.
High priority changes:
(add screenshots here of changes)
Streamline resending email verification flows. Some users were confused by this process.
Make sure all pages have a way to “go back”. User tried going back multiple times.
💭 Reflection
What I Learned
learned to collaborate with other designers and adapt to their design processes. It made me think logically and consider what would happen next after any error states or mishaps occur during a sign-up or log-in process. It was inspiring to work with other female designers and I am so grateful to have been a part of such an innovative project. I am excited to see the user feedback that comes along with it!
Special shoutout to Talha Sabri, the CEO, and to my wonderful team of designers Parita Shah and Lada Merck! I wish you the best of luck in your career!
Next Steps
Continued User testing and uncovering any bugs or frustrations.
Congrats on reaching the end of my UX case study! 🎉
Thanks for investing your time and attention in understanding my work and design process, I truly appreciate it. Interested in another case study? Check out my other work!