Making a Software Development Kit for Xsolla, a global game commerce company

2018–2021 · Product design
A Xsolla SDK screens

Xsolla is a global video game commerce company that develops tools and services that help game developers successfully fund, develop, publish, launch, and market their video game worldwide.

1k+

Developers and publishers
around the world

2,5k+

Games monetize with Xsolla products and services on mobile, PC and the web

20%

Revenue increase with payments through Xsolla

overview

A new direction for Xsolla

Overview
Our goal at Xsolla has always been simple — to help game developers sell more games. Since Unity and Unreal Engine 4 took leadership as 2 main game dev engines, Xsolla decided to increase products range with a Software Development Kit.
Source ↗
An Unity & UE4 growth facts in numbers
growth_facts.png
background
Prior to the pivot, an MVP beta version of Xsolla SDK was released to beta testers and was well-received. It gave a glimpse into the infinite possibilities that could be achieved with Xsolla SDK's powerful tech stack.

MVP version

Outdated experience with limited customization
An old MVP SDK interface
mvp_version.png

How can we create an engaging SDK?

challenges
When it comes to creating anything related to a business, the design and layout are crucial components that can make or break the user experience. While it may seem like a small detail, the colors & fonts you choose can have a significant impact on how gamers will perceive and interact with your game.
By personalizing integrated solutions, one can create a more cohesive experience to match the game's "look and feel".
goal

Therefore, the business has set an inspirational goal:

We need to build a simple yet powerful SDK solution with maximum control over the game's user interface while providing access to all Xsolla products APIs that can be mixed and matched within the app.

Dmitrii Sidorenko

Product Owner of
Xsolla SDK ↗
my role
I worked with cross-functional team, consisting of:
a stakeholder, a Product Owner, a Project Manager, 6 developers, 2 testers, an UX writer and an UX researcher.

The backbone of the project

kick-off meeting

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.

A screenshot of lean canvas pdf and a list of Xsolla products
docs.png

Characteristics of good SDK are:

Easy to use
Because our SDK is meant to be used outside our organization, it has to provide clear documentation on how our code works
Customizable
Give flexible options for create a more cohesive experience to match the game's "look and feel"
A system icon looking like 3 squares and a circle
Functional
Enough functionality so it adds value to other apps and plays well with other SDKs
  • 📝 Design review the current MVP
  • ✨ Then, enhance and supplement with features
  • 🚀 Launch the Desktop version by Q4 2018
  • ⌛ Launch the mobile version by Q3 2019
  • 📱 Launch the native iOS/Android apps by Q3 2020

The plan was next:

timeline.png

Clearing the fog

Step 1

Understanding users

Since Xsolla already has strong position in the market, we had the average user’s profile for both gamers and game developers, last is presented below:

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
A user persona woman photo
Step 2

MVP design review

What can be improved
What works
A marked checkbox icon
Store item cards design and layout is recognizable and well-used by others
A checkbox icon with question mark
Current UI is overwhelmed with the accent color and can break a user’s focus
A marked checkbox icon
The header layout at the top is always visible and easy-to-get for the users
A checkbox icon with question mark
MVP is limited in game customization with no background images/videos, for example
A marked checkbox icon
Buying journey is relatively quick and has informative cart with updating prices
A checkbox icon with question mark
MVL lacks in features and needs to have possibility to use more Xsolla products
MVP store and cart pages
Two screenshots of MVP interface
Step 3

Diving into 2-weeks UX research sprint

I did both qualitative and quantitative research studies. As an example, to understand users needs I placed a Features Upvote form on Xsolla Discord channel for our beta testers to propose and upvote for top-10 features, so I could understand what products to integrate as a priority.
To test my hypothesis made earlier I’ve run Google Survey also among our 60 beta testers to see how they evaluate the current MVP’s UI design:
56.1% stated they see better use in accent color only for main buttons, and not every clickable elements.
A marked checkbox icon
Current UI is overwhelmed with the accent color and can break a user’s focus
Screenshots of web services used: Discord channel and Google docs
Discord channel screenshot and Google docs form preview
Step 4

Strategy iteration

Based on UX researches I’ve mapped a detailed CJM flow of integrating commerce solutions into games to highlight pain points and how our solution can satisfy their needs with an easy to integrate and use game e-commerce solution.
I also analyzed around 12 Xsolla competitors: Steam, Epic Games Store and Launcher, GOG and others to understand what they are providing for game distribution, monetization and user engagement and how can our integration product can stand out. Here is an insight:

4

out
of

12

have 3rd-party
integrations

CJM map
A CJM map of integrating different solutions provided by Xsolla competitors

Put my creativity into the web desktop version

design sprint

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.

A screenshot of designs in Figma with participants, prototypes and UI references
figma_designing.png
UI elements with no fluff, consistent, and scannable

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.

Card component
A product card designA product card with design tokens
store_card.png
Store cards — versatile and responsive

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

hi-fi design

In the second week of the design sprint, I formed the new concept according the research insights and best practices.

before_after.png
Cart icon is too low
with a lot of products section it will not be seen
Cart icon at top
always visible and accessible
No cards contrast
is low and hard to differentiate from background
Good contrast
between a card and a background
Card layout is limited
not scalable for different content types
Cards layout are flexible
to present all content, like timer, discount, etc.

Every feature in its own place

Seamless authentication

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.

login_screens.jpeg
User management

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.

account_pages.jpeg
Battle pass

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.

battlepass_elements.jpeg

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.

iPhone 12 design examples
mobile_screens.webp

User flows for native apps

ux testings

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.
A screenshot of Figma prototyping for native Android app
prototype.jpeg

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

Challenge 1

Design consistency on devices

While creating components for desktop devices, I initially set aside opportunities for adaptive design for horizontal and portrait layouts on mobile devices in the future.
Challenge 2

Short development deadlines

What I did was prioritizing my tasks. I divided project's goal into smaller manageable tasks and set realistic deadlines that allowed me to maintain high-quality deliverables.
Challenge 3

Design team collaboration

I created rules and checklists, which would help new designers to continue product's work. Establishing processes and quality onboarding were also helpful.
Challenge 4

Managing multiple projects

At Xsolla I was also a product designer for our two other products: Site Builder and In-Game Store, yet thanks to my excellent organizational skills, I knew how to prioritize tasks effectively within each of them and meet the deadlines.

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.