What is EPAM Design Competency Center?

Overview

It is an internal organizational product used to coordinate designers in the whole company. Design Competency Center provides expertise for design projects or personal development, acting both as resource pools for multiple business areas and repositories of knowledge for EPAMs designers.

Within the EPAM, we also have many other competency centers for JavaScript, SAP and other.

Design CC in EPAM engages design talents and grows their expertise, as well as unites several design communities into one global group of experts across EPAM. It consists of about 10k designers in 35+ locations around the world. These are our end users.

Design CC has its own branding style and distribution channels, uncluding:

📝 Internal multi-page website
✨ Microsoft Teams channel
🚀 Emails, presentations, announcements
⌛ Banner promotions

background

At the beginning of Design Competency Center creation, there was only 1 designer, who designed the product and it's branding. The style guide he left was fragmentary, lacked consistency, and with a very few UI component elements. Additionally, there was almost no documentation.

So in this case study, I want to talk about how I overcame the challenges I was facing when the product didn't have a design system. I will also talk about the process of building the design system.

Why did we need a design system?

brief

When I joined Design CC as a new Product designer, it was readily apparent that the product's design needed work. In addition to some spotted UX problems, I started to face challenges from an operational standpoint while designing any new feature, so I felt like creating a design system would be a logical place to try and make an impact. I wanted to make sure that I am focused on addressing user needs instead of wasting hours redrawing elements.

That's when I decided to start work on building the design system.

challenges

In 2021, Design CC started rapidly growing, generating and providing a lot of materials and not having a pattern led to a wastage of time and resources and as a result, UX got suffered. I told the Product Owner that creating a design language can significantly speed up the design process. It will allow me to concentrate more on the flow and logic of a new feature or screen than on visual design.

Thankfully, Design CC did have an existing UI kit set up in Figma. On the other hand, it was readily apparent that a number of aspects needed work. Some elements were simply frames and not components, relatively few components were leveraging Figma’s variant feature, and while our official grid was set up as being an 12-column grid, not all components were suited for this. And almost all design artifacts was contained in a single page.

Therefore, the business has set an inspirational goal:

Create the design system, that provides consistency and contains set of all standardized design elements that help teams to collaborate, design and develop faster and more effective.

Tatsiana Shur

Lead Project Administrator of EPAM Design CC ↗

my role

As the Design System Designer, I worked mainly with Product Designers, Product Owner and the developers team.

I took the responsibility to audit the existing UI components, including typography, colors, and other elements to design them as a library that consists of reusable and customizable components which can be used by other product designers in future.

Updating the design system

the process

Working as a solo designer meant I had limited time to spend developing the Design System alongside other rapid UX work. The Design System had to scale fast, as I was discovering new use cases and constantly rethinking and expanding the library, so I had to approach this challenge strategically.

So by creating an updated centralized design system, I aimed to:

Improve

Brand perception through consistent designs that work across channels

Create

A ready-made library for teams to create and test designs much faster

Give

A structured and guided documentation on how to build Design CC product

The plan was next:

📝 Perform an audit of the elements across the product
✨ After, structure the components library
🚀 Then, conduct education and testing sessions for designers
⌛ Last, publish the final documentation

UI audit

Finding structure amidst the chaos

To better understand the current state of our existing design ecosystem, I started with a UI Inventory of our interface components. I conducted a 1-week audit and prepared the full list of elements and their usage across the product. Next week I've organized a number of prototype usability studies, as well as other discovery exercises. These helped me to drive the development of the component library and interaction patterns.

ux research

Another consideration before preparing the scalable components was to research of the real data use. During this stage I wrote down major real data values where possible. This will minimize the risk of running into difficult “what if” roadblocks in future and make component library real-to-life, flexible and adaptive.

Here are the points I identified:

1.
What if the titles go over 1 line?
2.
What if a there is no image? What a placeholder will look like then?
3.
What if a text description has a >3 lines?

This real data will allow me to address the real world scenarios for the design system later on.

Atomic design

Creating design foundation

I started with the atoms. They are consisting of colors, typography, grids, styles, shadows, and icons. So one of my first tasks was setting the Figma local styles, aiming to encapsulate a modern, vibrant brand while also taking into account the end users.

First things first

I started with typography and collected all text styles with font names, sizes, weights and other characteristics.

Next: the colors. Separating and dividing them on primary, secondary and accent on the basis of their usage property.
Here in this product, for example, blue is the dominant color, so it will contain different shades for covering use cases.

Websites, presentations and other materials not only contain text but also icons in different pixels.

A system within a system

Having defined a basic system for colors, typography and spacing, I then moved on to the most basic elements such as buttons, inputs and forms since these would be the building blocks that make up more complex components and flows.

Taking a button as an example, I used our typography styles for the text, our color system to define the colors for every state and spacing presets to make sure everything could scale to different texts.

Build components

Component library

Variant set and auto-layout are relatively new features in Figma, both introduced in 2020. This might explain why it was not yet incorporated in to the Design CC old design kit. I remade all components, incorporated auto layout and variants.

Once I set up the components into reusable combinations of that address common user objectives with sequences and flows, I started to create variations on each component layout variations such as image left, content right or vice versa.

Each component received stepped interaction examples so that expected interactive states are clearly communicated. These are paired with detailed specifications around tab stops, keyboard control requirements, spacing, atom and molecular elements.

Every component is further refined for additional breakpoints as well as minimal and maximum content specifications. This allows for content authors to know the maximum or minimum amount of content any given component can contain.

building Patterns

Patterns are used to show reusable combinations of components that address common user objectives with sequences and flows. These were developed in consideration of our global market rollout approach. While not every possible pattern was developed, this documentation served as the basis for our customers most common needs.

Design hand-off & build

documentation

I knew that documentation and governance around brand implementation into our design language was going to be the key to the success and sustainability of the system in the future.

So next, I created the Design System Confluence space and working closely with our content author and developers – I wrote and maintained documentation resources in the KB pages, ensuring that we included our design principles, patterns, component library, as well as quick start guides, accessibility standards and best practices for designing and testing.

design hand-off

The handover notes are the instructions for developers on writing the code for the component. The handover document begins with the anatomy of the component, then includes its variations.

The Design CC system handover documents also included design tokens. Becoming increasingly popular in large-scale design systems, design tokens are pieces of platform-agnostic style information about UI elements, such as color, typeface, or font size. With design tokens, a designer can change a value—indicate that a call-to-action button should be blue instead of orange, for instance — and that change will populate everywhere the token is used, whether it is on a website, presentation, or banners.

Results

insights

Working on our design system has been very challenging, but it has brought about many positive benefits for the product on different levels.

For of all, it simplified the life of developers. Speaking one language with the design team when discussing implementations. Focus on the feature not the low-level UI primitives (color & space values, small components, interactions, states, etc).

Second, having a ready-to-use library of components made creating high-fidelity interfaces a straightforward task by bringing designing interfaces from days to a couple of hours.

analytics

And the last, but not least, the design system allowed me to quickly build prototypes, test more ideas than before, quickly evaluate the hypotheses, and even create more variations to A/B test.

The points mentioned above are all related to internal aspects of the product, whereas the sought impact can be seen in the improvement of our user experience, and here are the results of how Design Competency Center increased its users rating, leading to new design tasks, leads and contributors.

outcomes

I determined that every component should sit within its own file. “Most of the time, you’re working on one component at a time. If you put all the components in one file, it slows down Figma. By giving each component its own file, it’s quicker to open and you have the whole history and documentation in one place,” I said.

For example, the files in this Figma design system document the life cycle of each component, pattern, and foundational element of the Design CC website, marketing and templates including the past and current iterations.

Reflections

In under two months since starting the role, I completed the new Design System, which played a key role in boosting the products metrics. It played a crucial role as:

1.
It provided a cohesive look and feel for the brand
2.
As well as gave me a structure and a set of principles to return to when making decisions on sometimes conflicting requests from the wider team
3.
It streamlined the design process, which was key for a solo designer
4.
It led to a faster design to market time, providing developers with a single source of truth and a set of reusable components and patterns

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 ↗

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.

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.

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"

Functional

Enough functionality so it adds value to other apps and plays well with other SDKs

The plan was next:

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

Step 2

MVP design review

What can be improved

What works

Store item cards design and layout is recognizable and well-used by others

Current UI is overwhelmed with the accent color and can break a user’s focus

The header layout at the top is always visible and easy-to-get for the users

MVP is limited in game customization with no background images/videos, for example

Buying journey is relatively quick and has informative cart with updating prices

MVL lacks in features and needs to have possibility to use more Xsolla products

MVP store and cart pages

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.

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

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.

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

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.

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.

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.

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.

Release

metrics analysis

On August 2019 my team launched the product and uploaded to Unity and Unreal Engine marketplaces. We received a lot of positive feedback: users left reviews and rated the product 4,5 stars out of 5!

youtube_ad.mp4

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

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.

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.

Web version