A new direction for Xsolla
MVP version
How can we create an engaging SDK?
Therefore, the business has set an inspirational goal:
Dmitrii Sidorenko
a stakeholder, a Product Owner, a Project Manager, 6 developers, 2 testers, an UX writer and an UX researcher.
The backbone of the project
It was crucial to clarify and document the current problems, value propositions, metrics, and user needs. Lean canvas helped me, a stakeholder and the team to deconstruct the business goal into the key assumptions.
Characteristics of good SDK are:
The plan was next:
Clearing the fog
Understanding users
Mary Waters
- 💻 She is a developer from an indie game studio
- 👩 30-45 years old, female
- 🇺🇸 USA based
- 💵 Frustrates on how to integrate payment methods
MVP design review
Diving into 2-weeks UX research sprint
56.1% stated they see better use in accent color only for main buttons, and not every clickable elements.
Strategy iteration
4
out
of
12
have 3rd-party
integrations
Put my creativity into the web desktop version
The team was on a tight deadline and developers needed to start building soon.
I’ve started working on the executing UI design changes: fonts, icons, products images, layouts and style guide update. Then UX screens were composed using UI Kit components in Xsolla Figma account.
I decided to keep the layout in old school — as a standard set of grids with breakpoints, ensuring we could design and build quickly and consistently both the desktop and adaptive mobile versions: horizontal and portrait later on.
The card component was highly-critical from a content-organization perspective. It was designed to prioritize readability while accounting for responsiveness and flexibility.
I also put a lot of emphasis on documenting design spec to foster smooth design-engineering collaboration. It was also an opportunity to leverage Figma’s new component properties functionalities to greatly speed up the future design process of other features/pages.
Redesign process
In the second week of the design sprint, I formed the new concept according the research insights and best practices.
Every feature in its own place
To quickly enable easy-to-use, localized, one-click authentication for the players while keeping their data secure, compliant, and under your control we provide: OAuth 2.0 protocol-based authentication, classic login via username/email and password, via social medias or a one-time code or a link sent via SMS or email.
Our SDK provides user attributes to manage additional information, cross-platform account linking, as well as the secured Xsolla storage for user data. Alternatively, devs can connect PlayFab, Firebase, or their own custom storage.
To experience all types of monetization options, SDK provides a battle pass - an approach that provides additional content for a game usually through a tiered system, rewarding the player with in-game items for playing the game by completing challenges.
Mobile version
In March 2019, I started to assemble the adaptive design for horizontal and landscape mobile layouts.
As previously I've developed the design system for Desktop version, keeping the principles of adaptive design by Figma library with components and variants, this allowed me to build the both version very quickly, and what was planned for 6 months was done in 2.
User flows for native apps
I created Figma prototypes to present demo version of our modular solution, in which users can test examples of product integrations from login to transactions. I observed the replays of 7 user journeys, getting behavioral insights that helped me to pinpoint issues, which otherwise would be difficult to notice.
For example, I’ve added 4 onboarding screens, as only 2 users went to “HELP” section from side menu to read overview.
My contribution
After the desktop version launch, I started to prepare the handy and detailed documentation on the design system for future designers and developers to continue working on the product. Since May 2019, I created and maintained a large-scale component library from scratch with established rules and standards, according to the Xsolla brand guidelines.
How I helped with design team challenges
Design consistency on devices
Short development deadlines
Design team collaboration
Managing multiple projects
Result and outcomes
In September 2020, we launched all the products to the market, including the native mobile applications, while the desktop web version was constantly refined and enhanced within next releases. Xsolla SDK had more than 2k installations.