My Role: Sr. Product Designer
Project Duration: 1.5 years
Category: Technology
Understanding the Need
-
3DS has multiple products with their own branding styles. When these product are brought together as a company they lack cohesion and look different.
-
Over a period of time, 3DS products started to feel like different apps across all platforms.
-
​Product owners were responsible for managing new content on the website by inputting data into the backoffice. However, there were no comprehensive guidelines or documentation available on how to accurately enter information to ensure consistency on the main website.
-
In the absence of unified guidelines, product owners updated information specific to their projects based on personal judgments, which led to inconsistencies and misalignments with the overall website design.
Defining Business Goals
-
Drive consistency through out the products on different platforms and across different businesses which would result in great user experience.
-
Wanted to incorporate the new modern visual design trends in our app so that it looks fresh and is a delightful experience for the users.

-
Easy to understand and implement
-
A solution that enables stakeholders to update product information as needed, maintain consistency, and easily adhere to design guidelines without relying on designers every time.
What we Achieved
Having established our goals, we began constructing our own Design System on the new Invest Framework, designed to evolve and scale organically with the introduction of new products over time.
The result was the creation of a fresh, new look for 3DS.
Impact: Enhanced consistency by 65%
The live document : UI Catalog
-
Along with Design System, we created an UI Catalog, a live document that can guide users step by step on how to utilize the design system for the best outcomes.
-
It covers all the parameters of a component, starting from the Definition of the component, followed by View Modes, Alignments, Sizes (6 sizes - Full Width, Extra Large, Medium, Small, Extra Small), Anatomy, Back-office Contribution, Do's and Don't, Recommendations, Brick Specifications, Responsive screens (Desktop HD, Laptop, Ipad, Mobile), Developer Resources.
-
The UI catalog functioned as a user-friendly handholding tool, designed for easy comprehension by anyone. Product owners began using it efficiently.
Impact of UI Catalog: Detailed UI catalog guiding backend integration, reduced design time by 40%
The Process
For inspiration we looked at some UI kits on UI8, Dribble, Material.io and other libraries for visual reference to understand the current trends.
"We carried out a deep UX research on each of the Brick and its contribution".
How we started?

We started research on a design system and tried to understand the process of how other companies build it. That’s when we read about Brad Frost, who introduced the Atomic Design methodology. He talks about the atomic design principles and has a prominent quote at the start of an article.

We’re not designing pages, we’re designing systems of components”. — Stephen Hay

Reading this statement we concluded that moving directly to pages to develop a UIkit was not probably the best idea. The answer lied in building both of them parallelly and making changes to them simultaneously. We looked at all products across all platforms and businesses to make a list of all app pages. While studying those pages, we listed down all the common components that our interface is comprised of. This exhaustive library helped us construct a design system in a more methodical way.
Atomic Design Model
We used the Atomic Design model to organize our assets in Atoms > Molecules > Organisms > Templates > Pages.
Atoms
To begin with, we started designing basic atoms of our design system like Typography ( Type of Headings/ Paragraphs and their fonts ), colour palette and icon set.
Molecules
Things got more interesting and tangible when we started combining these atoms together to form molecules like buttons, form fields, table, drop downs, sliders, cells etc.
Defining the Grid
We defined the Grid so that we could create responsive components.
Organisms
Molecules gave us some building blocks to work with, and we then combined them together to form organisms. We could then finally see the interface beginning to take shape.
We named Organisms as Bricks.We worked throughly on each brick like Accordion, Action Text, Body Text, Circle List, Content Tab, Customer, Form, Hero Banner, Highlight, Iframe , Media (Audio, File, Image, Infographics, Local Video, Remote Video, Youko Video), Offer Plan, Panel, Panel of Content, Profile Quote, Social Share Bar, Table of Content, Wall of Cards, Breadcrumb and Local Menu and more.
"For each Brick a detail study was carried out! From understanding what is the use/ need of the brick on website to how other companies are utilizing them on their pages, compiling them with the latest trends and making them easy to use for better User Experience".
Templates
Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and see the layout in action.
Panel played a key role here combing Bricks of different sizes to achieve the required aesthetic composition.
Pages
Yayyyy!!!!! After all the hard work we achieved what we were thriving for!!
See Live Pages on 3DS.com
