Begame Design System.
Product
Design system
Role
Lead UX designer
Duration
2month
Flexible and customizable Design standard guideline
Begame Design System is flexible, scalable and customizable design library which includes UI library and web/mobile screen layout. It provides every component necessary to be implemented within company products. It allows easy customization of the system for new products or redesigning existing ones, and ensures consistency in visual style and user experience.
Problem.
Old platforms, and
Broken design rules and consistency
Lack of design rules
Begame had run five different game platforms and each of them lacked a unified design rule in UI and product layout. It led these products ununified in a brand identity and inconsistent across the components.
One-time-use design elements
Design elements were made for one time use without having a solid component system. It caused to build the same design elements multiple times and harm design efficiency.
damaged user experience
The lack of consistency and unification damages fluent user experience.
Inefficiency of time and cost
It caused inefficiency to development and maintenance time and costs.
Inefficiency of time and cost
Goal.
Develop consistent and uniformed design standard and scalable Design system
1. Develop a design standard
Develop a design standard in UI library and Web/mobile screen layout.
2. Scalable design system
Make components scalable, reusable and adaptable to different platforms.
3. Perform consistency and unifromity
Perform consistency and uniformity in brand identity through its component and visual appearance.
4. UX improvement
Improve user experience.
5. Reduce time and cost
Reduce development and maintenance time and cost.
Role.
I performed as a lead designer in this project.
Design process
I conducted the whole design process which includes library research, building blueprints and sketches of elements, determining theme and implementation to the product.
Tools
We used Sketch and Figma, and screen sharing was done by Zeplin. All of communication was through Slack.
Collaboration
Collaboration with Frontend team and QA team was an important part of this project. We held several meetings and discussions to make design decisions for the sustainable and feasible system.
Design Process #1
Research.
"What's in the current products?"
We directly took a close look-one by one
Investigating current products
As a first step to the project, we investigated our current products to fully understand the current design conditions and identify issues of existing UI designs and layouts. We identified the necessary criteria and classified components and grid system which are required to be built for the new design system.
UI library components
colors, typography, shadow, buttons, topnav, sidenav, dropdown, cards, accordions, pagination, footer, etc
Design Process #2
Sketch and blueprint.
Sketch
We made a blueprint of UI library’s components, and defined their purposes. This process includes simple sketch of their behaviors, variations and functionalities.
Blueprint
As a result, we could draw a table chart of existing components and layout structure of the products, which would be practically utilized as a blueprint of the design system.
Theme
The elements represent the brand identity and build the fundamental of product. It contains color, typography, size, grid and spacing.
Basic components
It is a universal set of components that serve as the foundation for all our products.It contains buttons, textfileds (form), accordion, alert, toast, pagination, and modal.
Product components
In these libraries, we placed unique components specific to each individual product that cannot be reused in others.It contains cards, topnav, sidenav, footer and dropdown.
Design Process #3
Theme.
To initiate design system development, we created theme for color, typography, size, spacing. We developed these elements in a set of variables that cover various usage scenarios and future needs.
Design Process #4
UI Library.
Referring to the blueprint and sketches, we build the design of UI library components and layout by using Figma. The goal of development was to make the elements scalable to the future brands and ensure high quality and consistency of the components within the products.
Basic component
It’s a universal set of components that serve as the foundation for all our products. It contains buttons, textfileds (form), according, alert, toast, footer, top nav, side nav and modal. Below is a sneak peek of each component design.
Product component
This group contains unique components specific to each individual product that cannot be reused in others. The components have a very specific explanation about their functionalities specifically built for their brand characteristics. It contains card, dropdown, search. Below is a sneak peak of product components designs.
Design Process #5
Styleguide.
Integrate styleguide on web
For capability of easy implementation of each component and layout to product, we conducted Front ent team to build all elements in a style guide on web. Developers were able to build the components with a usage scenarios given from designers.
Design Process #6
Testing.
QA Test and test plans
Once developed on the web, each of the components and layouts was sent to Quality Assurance team to be tested. QA team was able to test each component thoroughly based on the explanations of functionality and usage scenarios given from the design team.Even if we’ve prepared for all anticipated cases and carefully tested them, we knew that unpredicted issues could be raised. Therefore, we made a flexible plan for usage test after the implementation of the components into the product. Backlog of the design systems is always open and we could raise a ticket anytime when bug and misbehavior is found. So we could use gathered feedback data from users and the team, and make improvements when necessary.
Design Process #7
Implementation to Product.
Implementation to product
As a first attempt, a basic element style of design system was built based on Bingocams revamp theme. We experimented to directly implement the layouts and components during the product development. With just a small correction of bug and minor errors, the implementation was successful and procedure went smoothly both in design and development.
Design Process #8
Scaleable design system.
Scalable design system
The same design system was implemented when we developed the MJC website. It was built to be scalable and adaptable, so it allows different products to use different component styles but they behave within a rule of the same design system.
Consistency and uniformity
It allows to perform consistency and uniformity throughout every element and screen of the product.
Efficiency improvment
It helps to save tremendous developement time and cost.
Result.
Developing design system seemed huge and takes 2 full month in a fast pace. In the end we could ensure that benefit of having design system is significant to the team.
Lack of design rules
Begame had run five different game platforms and each of them lacked a unified design rule in UI and product layout. It led these products ununified in a brand identity and inconsistent across the components.
New design standard
By applying the new design standard to each of platform of Begame, we could build strong brand identity and build the consistency across all of the components.
One-time-use design elements
Design elements were made for one time use without having a solid component system. It caused to build the same design elements multiple times and harm design efficiency.
Scalable and reusable library is possible.
As we assured from the implementation of BC and MJC products, the flexibility of the design system breaks the hassle of implementation of design elements into different products. It enhanced the design process and expandability between the company’s platforms.
damaged user experience
The lack of consistency and unification damages fluent user experience.
User experience is improved.
A clear design rule and consistent elements made our products unified and user friendly. They now have a consistent visual appearance within a stong brandy identity.
Inefficiency of time and cost
It caused inefficiency to development and maintenance time and costs.
The productivity and efficiency of development has improved.
Consistent components and ready made solutions have allowed the design and development team to work more efficiently, and as a result the development time and maintenance has significantly reduced.