Revitalizing Registration
Elevating User Experience for AssessFirst's Hiring Revolution
My role:
UX/UI Designer
Company:
AssessFirst
Timeline:
+ 3 months
Team:
UX/UI Designer
User-Centric Design at Its Core
I was hired to redesign a complicated
registration process
Following a strategic partnership, AssesFirst faced a critical challenge: simplifying their complex Predictive Hiring Assessment platform's registration process. As the sole UX/UI designer in a team with a product owner and two developers, we embarked on a mission to transform this process into a model of simplicity and intuitiveness, redefining user registration at its core.
Goals
Overcoming Obstacles in User Registration
My mission, informed by specific goals and visual analysis, was to remove obstacles in the registration process and deliver an exemplary user-centric experience that surpasses both user needs and stakeholder standards.
Minimizing Error Rates
Aim to cut error rates to <8% through better accessibility and user progress enhancements
Elevate User Satisfaction
Elevate from low to high, propelled by empathy and focusing on the user.
Reduce Abandonment Rates
Lower from 20% to 15% through improved form design and mobile experience optimization.
Streamline Account Activation
Develop a swift, secure, trust-enhancing account activation process focusing on user-friendliness.
Boost Accessibility Score
Raise accessibility score and ensure a barrier-free experience for every user.
Stakeholders
Enhance the design to captivate and satisfy stakeholders visually.
Project challenges
Navigating Stakeholder Changes and Brand Evolution
Adapting to Stakeholder Changes:
During the critical Conception phase, we encountered a major shift: the original product owner left, prompting leadership changes and the introduction of a new product owner. This required quick adaptation, re-pitching the project's importance to minimize disruption and keep progress on track.
Synchronizing Brand and Design System Overhaul
Facing the dual challenge of a brand redesign and a new design system creation, we aimed to seamlessly integrate the login page with our updated brand identity. This ensured a unified user experience that truly reflected our brand's new direction.
Issues with registration
Registration Process Issues
Interviews and accessibility tools revealed strengths and areas for improvement in our registration process.
Some users struggle with password recall.
Enhance privacy: Ensure login and registration pages link to the privacy policy.
Usability challenges including unlinked form labels, excessive text per line, missing contact details, and obscured links.
Inadequate input validation permits incorrect or invalid entries without effective error detection
Inconsistent and unclear form layout: Columns lack clear definition, leading to navigation confusion.
Too many marketing related questions that can be shifted to onboarding
Multiple Steps and Decisions: Numerous decision points and steps can lead to potential user drop-off.
UX writing issue: Unclear labels and long text are reducing conversion rates.
Identified multiple accessibility challenges:
The logo link to the login page is missing descriptive text. Adding clear, descriptive text is advised.
Registration images lacked descriptive labels, impairing accessibility for screen reader users.
Password requirements are displayed using an unordered (bulleted) list (<ul> element).
Lack of 'lang' Attribute: Its absence could confuse multilingual users.
Absence of a skip link on the registration page hindered keyboard navigation.
HTML page missing key structures: lacks header, nav, main, sections, and ARIA landmark roles for content information.
Unlabeled form elements challenge visually impaired users, complicating navigation.
Uncovering Best Practices
Optimizing for Top Registration Practices
Delving into WCAG, form design patterns, and competitor insights, this case study illustrates my approach to creating an accessible, captivating registration journey, harmonizing stakeholder preferences for vibrant visuals.
Uncovering best practices and design patterns revealed techniques to enhance user engagement and streamline the sign-up experience.
Interactive Form Validation: Real-time validation identifies errors. Dynamic visual indicators ease registration.
Progressive Profiling: Instead of long forms, collect information in smaller steps. Improves engagement and reduces cognitive load.
Accessibility Focus: Design choices were informed by WCAG guidelines to ensure inclusivity and compliance.
Scope of Design Improvements
Enhancing Efficiency: A Strategic Approach
To enhance the registration and authentication flow, I collaborated closely with the engineering team to streamline the process, focusing on minimizing complexity and cognitive load. Here's how we achieved it:
Refined Registration Architecture: Enhanced the sign-up flow with a strategic, progressive disclosure, ensuring users are gently guided while focusing on crucial information.
Smart Defaults and Autofill: Implemented intelligent defaults and autofill to expedite the process, reducing repetitive input and streamlining user interactions.
Eliminating Redundancies: Eliminated unnecessary steps and queries to boost efficiency, offering a more direct path through registration.
Supportive Guidance: Integrated contextual help and interactive guidance, providing clear instructions and preventing user confusion during sign-up.
De-cluttered Visuals: Eliminated non-essential stock images to streamline the registration experience.
Screen Reader Optimization: Updated the registration to be fully accessible with distinct labels and interactive elements.
Enhanced Accessibility with Alt Text: Introduced alt text for images, aiding visually impaired users.
Improved Keyboard Navigation: Enhanced navigation for keyboard and alternative input devices, ensuring smooth access.
Redesigning the user journey
User flow example:
“As a new user, I want to have clear explanations that my credentials are not valid”
Behaviour
To create a new account, I follow these steps:
Click the "Business" button.
I am taken to the Email page.
Next, I fill in my name and my company name
Finally, I provide my phone number and set my password on the Password page using the password requirements
I get an error message for:
Invalid email address format
Invalid name format
Invalid phone number format
Password that does not meet the requirements
Looking at other touchpoints
Email authentication and rebranding magic
With seamless integration of email authentication and rebranding's magic, I crafted a proposal to elevate the experience. This journey encompassed creativity, usability testing, and securing stakeholder approval.
Improved Visual Hierarchy in order to guide the user through the process more intuitively.
Instructions Clarity: made immediately obvious to the user what steps they need to take without having to read through multiple lines of text
Rebranding Impact: Introduced fresh visuals to align with the rejuvenated brand identity.
User Testing Insights: Conducted desktop prototype testing, garnering praise for its intuitive, clutter-free UI.
Engaging Animations: Developed captivating animations, winning over stakeholders with positive feedback.
Igniting collaboration
Seamless Design-to-Development Handoff
In my pursuit of effective and collaborative teamwork, I facilitated a smooth transition from design to development. This was achieved through planning and active teamwork, culminating in a process marked by comprehensive design evaluations, detailed prototyping, and supportive documentation.
Facilitating Design Consensus: I led design review sessions with developers to ensure a unified vision and understanding of our design objectives.
Streamlining with Prototypes: I utilized interactive prototypes to demonstrate various user flows.
Encouraging Joint Design Efforts: By working closely with developers, integrating their feedback and knowledge into the design phase, we cultivated a sense of shared ownership and enhanced the design's feasibility.
Guiding Development with Documentation: I created detailed documentation outlining specifications and spacing for the development team. This was needed before Figma Dev. Mode's launch. It clarified implementation steps, reduced uncertainties, and promoted an efficient, consistent workflow.
A Journey of Validation
Embracing User-Centric Design
My pursuit of excellence was deeply enriched by valuing user feedback. Engaging users in usability testing was pivotal, offering crucial insights that refined my designs. This journey, steeped in user reactions and insights, significantly enhanced registration efficiency and user satisfaction.
Elevated User Experience: Testing revealed the redesigned registration process markedly improved user experience. Feedback was overwhelmingly positive, underscoring the profound effect of our user-focused enhancements.
a. "Love the new look... I didn't need any additional instructions to sign up": Users found the new design easy to use for registering due to its visually appealing interface.
b. "The interface looked great and was super easy to navigate, making signing up pretty chill.": This user sentiment highlights the successful fusion of aesthetics and functionality, fostering a deeply positive and satisfying experience.
c. "Logging in was a piece of cake. No trouble at all": Users registered effortlessly, encountering no barriers. The interface was straightforward and intuitive, ensuring a seamless experience throughout.
Account Activation: Test results indicate the account activation process has been significantly clarified, with no issues currently detected.
Error rates: The testing phase demonstrated a commendable low error rate of only 4%.
Optimizing the login page is crucial for user retention. A logical and intuitive login experience can significantly enhance user engagement, as demonstrated by the case study.
