Onboarding Experience (FTUE)
A comprehensive redesign of Smeet’s user journey after registration, to enhance the initial user experience following the game’s setup.
Overview
Role
UX/UI Design
Genre
Social Game
Engine
In-House Engine
Tools
Lucidchart, Figma, Miro, Photoshop
Team Size
2
Duration
2021 – 2023
Platform
PC, Web Browser, Android,
macOS, iOS
Background
Smeet is a social game and virtual world where players create avatars, explore spaces, and connect with others through challenges, events, and creative activities.
Due to the extensive range of features and possibilities available, we implemented a series of tutorials designed to guide players through the core mechanics and foundational aspects of the game.
Goals
When designing the tutorial, my priority was to ensure players could quickly grasp the basic mechanics, controls, and navigation, minimizing any potential frustration or confusion. At the same time, I focused on showcasing the game’s core features and most enjoyable aspects right from the start, creating an engaging experience that would motivate players to return after their initial session.
Challenges
We identified the three core features of the game—socializing, group play, and room customization—as the foundation for the tutorial. Condensing the wide array of features into these essential elements was a challenging task, requiring careful prioritization and focus.
At the same time, I designed the tutorial while the tutorial editor itself was still being developed, essentially inventing the wheel as I worked.
Roles and Responsibilities
Game Design
I prioritized which mechanics are most critical for new players to understand early on. These features were introduced in the right order, making sure the tutorial remains focused and not overwhelming. Additionally, I paid close attention to the balance and pacing of the tutorial, ensuring players are introduced to each concept at a comfortable pace that keeps them engaged without feeling rushed.
Content Development
I wrote concise, engaging instructional texts for the in-game character, aiming to keep the language simple while ensuring it’s informative. I also designed scenarios where players interact with the game’s core features, helping them learn by doing. By crafting specific, context-based challenges, I aim to make the learning process feel natural and immersive.
UX Design
I focussed on mapping the player journey through the tutorial to ensure it aligns with the user’s natural learning curve. I was structuring the tutorial so that players can easily follow the steps by translating every journey step into a tutorial step. Since the Tutorial Editor was built simultaneously, the user journey steps needed to be very precise from the beginning.
Every change of the tutorial was also an iterative prototype, not just for the flow itself, but also for the Tutorial Editor. As the tutorial was being built, feedback and insights gained could directly influence the editor’s functionality. This iterative loop allowed for improvements to both the tutorial content and the editor’s capabilities, ensuring they were aligned.
Several parts of the project were A/B tested very quickly, such as the design of our tutorial character and the flow functionality. So fortunately, we got very early feedback on which ideas were working.
Tutorial Flow
Technical Implementation
My goal was to make the tutorial triggers feel natural and non-intrusive, so they would seamlessly integrate into the game. I also conducted extensive debugging to ensure the tutorial flow works without any bugs, fixing any usability issues that arise during testing.
Character Design
The tutorial features a dedicated character who guides users through every step of the process. The design began with in-depth research into our target audience to identify the type of character that would resonate with them. Through this process, the character not only took shape visually but also developed a distinct personality. She is modern, social, and chatty, embodying the vibrant social aspects of the game.
Her design went through multiple iterations to ensure she felt relatable and engaging, while also being optimized for animation, making her lively interactions seamless and dynamic.
Key Takeaways
The Value of Tailored Tools
Developing a custom editor tailored specifically to the needs of tutorials underscored the value of investing in tools that simplify workflows and improve efficiency. By creating a solid framework, we not only addressed the immediate requirements but also laid the groundwork for scalability and seamless future updates.The Cost of Tailored Tools
Developing the new editor and framework alongside the actual tutorials posed challenges whenever a new custom functionality was needed. This sometimes slowed down the workflow, as the production process would be delayed while waiting for new features or bug fixes to be completed.Achievements
Increased Retention
I helped new players quickly grasp the game’s mechanics, reducing frustration and minimizing drop-offs. Additionally, I highlighted the game’s key features, ensuring players could recognize and engage with its most exciting aspects, significantly boosting the potential for long-term retention and enjoyment.
Editor within an Editor
We started the project from scratch, designing everything from the ground up.
We developed a custom editor within the existing framework to meet the tutorial system’s unique needs, building a robust infrastructure to streamline tutorial creation and support future development.