NUX Registration
Reducing drop-off and increasing activation through intuitive onboarding.
✦ UX Design
✦ Onboarding Design
✦ @Azerion
Project Brief
A Registration Flow Redesign for the Social Game "Smeet"
This project focused on reimagining Smeet’s registration experience to create a more engaging and intuitive first interaction for new players. The goal was to transform an outdated sign-up flow into a seamless onboarding journey that reduces early user drop-off.
Details
Platform
Mobile, Desktop
Team Size
Sole Ownership
Focus
User Research, Competitive Analysis, UX Design
TLDR
As the sole UX/UI designer, I analyzed the existing registration flow to identify usability pain points and outdated interaction patterns. The redesign was approached mobile-first, focusing on layout clarity, accessibility, and error handling. Due to limited data, most insights were gathered through qualitative research and observation. The updated flow introduced refined visual hierarchy, improved form interactions, and a new “starting room” feature, resulting in a smoother and more coherent onboarding experience across platforms.
The Final Design
Understanding the Player
Empathize
01
To understand where the registration flow was failing, I examined the existing user journey and identified friction points through usability testing, even with severely limited tracking data.
01 ✦ Empathize
Starting with the Research
Analyzing the Original Version
Screen 1 - The Login
Users were already confused at the beginning due to the lack of visual hierarchy. Also, there are too many actions needed for selecting a login method or an account creation process. Lastly, users complained about the lack of “Remember Me” option.
Screen 2 - The Avatar
The gender selection process seemed unnecessary to the players, given that the game was all about self-expression. Additionally, the list of avatars provided was considered stale.
Screen 3 - The Nickname
The users challenged the requirement to input a complete date of birth, as the majority felt that an age verification check-box would be more sufficient. The screen was criticized as just looking empty.
In analyzing the feedback the registration process can be summed up as simply outdated, especially when compared against competitors.
"I had no idea how long it took me just to reach the sign-up page. There's no way I knew whether or not I was signing up correctly."
- First Time User
"Why does there have to be a gender field just for selecting an avatar? They all seemed completely unappealing to me."
- First Time User
"I feel silly for putting in my complete birthday. This is a game; it's supposed to be fun, not fill out a form. It seemed very dated in comparison with the others I've tried."
- Long Time User
The biggest constraint during the empathize phase was the near-absence of quantitative data. Without reliable drop-off tracking baked into the funnel, I couldn't simply read a dashboard to find where users were leaving.
Beyond diagnosing pain points, I worked to understand who Smeet's new users actually were: their motivations for joining a social game, their tolerance for friction during sign-up, and what kind of first impression would make them want to stay.
Defining Opportunities & Limits
Define
02
The research pointed to two core problems: an overwhelming registration form and unclear error states that left users stuck without knowing how to proceed.
02 ✦ Define
The Pain Points
Visually Unengaging Screens
The outdated visual design failed to create a strong first impression, making it harder to keep new users motivated to complete sign-up.
Unclear Navigation
The flow lacked clear guidance, leaving users unsure where they were in the process or what came next.
Registration Felt Disconnected From the Game
The flow lacked clear guidance, leaving users unsure where they were in the process or what came next.
Clunky on Mobile
The flow was built with desktop assumptions, making it frustrating on phones — small tap targets and a layout not designed for touchscreens.
Visually Unengaging Screens
The outdated visual design failed to create a strong first impression, making it harder to keep new users motivated to complete sign-up.
Unclear Navigation
The flow lacked clear guidance, leaving users unsure where they were in the process or what came next.
Registration Felt Disconnected From the Game
The flow lacked clear guidance, leaving users unsure where they were in the process or what came next.
Clunky on Mobile
The flow was built with desktop assumptions, making it frustrating on phones — small tap targets and a layout not designed for touchscreens.
Without hard funnel data, defining the problem required committing to an educated hypothesis: users weren't abandoning because the game was unappealing, but because the registration interface was creating unnecessary cognitive load at exactly the wrong moment.
The define phase made it clear that the existing flow had been designed with desktop assumptions baked in. Re-framing the problem statement around a mobile-first context changed what "good" looked like entirely
01 The Drop-Off Hypothesis
Without hard funnel data, defining the problem required committing to an educated hypothesis: users weren't abandoning because the game was unappealing, but because the registration interface was creating unnecessary cognitive load at exactly the wrong moment. A first-time user has zero investment in the product yet — any friction at this stage is disproportionately costly compared to friction encountered later.
02 Mobile as the Constraint
The define phase made it clear that the existing flow had been designed with desktop assumptions baked in. Re-framing the problem statement around a mobile-first context changed what "good" looked like entirely. Fewer fields per screen, larger tap targets, and inline feedback rather than end-of-form error summaries became non-negotiable requirements rather than nice-to-haves.
Exploring Possibilities
Ideate
03
Ideation centered on reducing perceived effort during sign-up while finding moments where the process could deliver delight rather than just utility.
01 Onboarding Gameplay
One of the more interesting reframes during ideation was treating registration not as a gate before the game, but as the beginning of it. Smeet's identity is built around self-expression, so introducing a more rounded avatar selection and room choice within the flow might transform a bureaucratic step into something closer to a character creation screen.
02 Filling Gaps
With limited user research to draw from, ideation also had to account for edge cases that data couldn't surface: what happens when a username is taken, how error recovery should feel, where a user who pauses mid-flow should land when they return. Mapping these scenarios explicitly during ideation prevented them from becoming last-minute patches during implementation.
One of the more interesting reframes during ideation was treating registration not as a gate before the game, but as the beginning of it.
With limited user research to draw from, ideation also had to account for edge cases that data couldn't surface: what happens when a username is taken, how error recovery should feel, where a user who pauses mid-flow should land when they return.
03 ✦ Ideate
Analyzing the Original User Flow
From Install to End of Registration
It was essential to visualize the entire process in order to have an understanding of every aspect of the process. The original flow had never been mapped end-to-end, making it hard to see where unnecessary steps were adding friction. Visualizing it gave a clear view about where new ideas would fit in.
03 ✦ Ideate
Priority Mapping
After a short ideation phase due to limited research data we decided on idea clusters rather quickly. We explored ways to simplify the registration process by reducing complexity and guiding users more clearly through each step.
New Cozy Room
Introduce a nature/cozy aesthetic room to appeal to an underserved player segment identified through research.
Step-by-Step Flow
Split registration into distinct screens — one task per view — to prevent overload and guide users naturally.
Progress Indicator
A persistent step-bar shows how far along users are, reducing anxiety about an unknown endpoint.
Room Selection
Add a room-pick step to onboarding — early personalisation that creates emotional buy-in before entering the game.
Inline Error Validation
Real-time field validation with clear, actionable error text directly beneath each input field.
Reduced Field Count
Defer non-essential data collection to post-registration. Only ask for what's strictly needed upfront.
Avatar Customization
Show a live preview of the user's avatar as they customise it, making the experience tactile and rewarding.
Updated Look
A more modern look will invoke more trust. Especially mobile users will profit from a more accessible layout.
The First Pull of the Lever
Prototype
04
Wireframes were iterated quickly to stress-test the new flow structure before any visual polish was applied, with AI-assisted mockups used to accelerate room concept visualization.
04 ✦ Prototype
completing the picture
A Brand New FTU Room
For the new starting room, image generation tools were used to quickly visualize ideas that communicated the intended atmosphere to the Environment 3D Team. This compressed the feedback loop significantly, allowing stakeholders to react to the concept before design resources were committed to it.
04 ✦ Prototype
Reducing Confusion and Drop-Offs
This flow simplified approach eliminated the need for either gender selection or date entry without compromising on anything else, and rather shortened the process.
Rather, a window where one could choose their room came in as a replacement, thus turning a mundane task of data entry into the first personal touch of the player in the game.
04 ✦ Prototype
Trying out Different Versions
The prototypes moved fast from low- to Mid-Fi Versions. They involved a more compact Login Screen including a reworked visual hierarchy.
Early Wireframes of the Login Screen, Screen 1 within the flow.
Testing with Users
Test
05
A/B testing against the original registration flow provided the clearest signal on whether the redesign was actually moving the needle on completion rates.
Before
After
Before
After
Before
After
Before
After
Before
After
Before
After
What worked
Confirmed
01 Comparisons
02 Error States
What We Achieved
Impact & Learnings
06
The project reinforced that without a specific metric infrastructure, even the best and most logical decisions remain based on unvalidated assumptions. A reorganized mobile-first flow and enhanced error handling decreased user errors during registration and increased the overall completion rate.
✦ Impact & Learnings
Final Notes
Key Takeaways
✦ Impact & Learnings
Final Notes
The Impact
Minimize Pain Points
By improving error handling and providing clearer instructions, I was able to reduce the number of user mistakes during the registration process. This helped to minimize frustration, making the experience smoother and more intuitive for them. As a result, they were less likely to abandon the process due to confusion or errors, contributing to a higher completion rate.
✦ Contact Me
Have a project in mind?
Looking for collaboration? Send an email to helloooo@vhoffmann.design for inquiries and projects or fill out the form.