Building and Maintaining Design Systems as a Product Design Intern at BYJU’S
Art speaks to the soul and design speaks to the mind — This has how my journey of learning Product Design has shaped my understanding of the profession.
Background 🏫
It started off as summer classes to learn photoshop basics in my teens and later progressed to designing posters for events organized by college and the likes. This made me fall in love with the art. My interest grew and so did my curiosity. The pandemic gave me the time and opportunity to learn the technicalities associated with the creativity required to become a better designer. With a dash of research and exposure to the realm of design, I became familiar with Product Design and its scope. I enrolled in online courses and got a hold of my first internship in design. That was pivotal in my decision to pursue Product Design as a career — something not typical of a CSE undergrad.
Interview Process 👀
Campus placements having taken a toll on me, stumbling upon the BYJU’S internship call was godsent. The clause mentioning that a traditional portfolio isn’t mandatory for application is what stood out to me. The emphasis was on the candidate’s intent of exploring product design and experience on any visual domain counted. After my application, Praveen Manoharan, the UI Lead phoned me for a quick interview via phone where I pitched my case. I was informed of my selection by Akash Bulbule, Product Designer, and Dhaneesh Jameson, Director, Product Design, and later we discussed the prospects of my time at the company as an intern.
Onboarding ⚡
The onboarding process set the standard for what was to come in the following months. Getting familiar with your team, and the project, and going through their archives gave me an understanding of how to contribute. We were given great attention and care with definite guidebooks and skilled mentors to work under. The first week of my internship was spent attending classes and learning more about BYJU’S Classes platform. It was during this phase I was informed that I’d be working on the design systems project under the mentorship of Praveen.
The Journey Within 😇
Here’s a glimpse of my insightful project journey while interning at a good organization that helped me expand my ideas, gain wisdom, and learn best practices.
About My Project 💻
It was an interesting experience working on design systems during my time at BYJU’S, something I enjoyed doing and was also a great learning experience. During my project, I spent a good amount of time researching and reading articles about how a scalable design system is created. I was required to build design systems that would not only support consistency across various products, but would also ensure better onboarding, and design collaboration between teams.
Getting to First Base 💪
As my project kicked off, the first step was to set my objectives and identify the roadmap for achieving them smoothly. To learn and research about design systems and apply the learnings to build and maintain design systems for various BYJU’S products so as to optimize time, resources, and effort when working in teams — this was the primary objective of my project. The first few weeks of the mighty journey were completely dedicated to research in which I tried to learn about design systems, its advantages, how they are built and maintained in huge organizations, and so on. Here is a quick glance at design systems that every designer might already be familiar with.
What is a design system?
A complete set of standards intended to manage design at scale using reusable components and patterns. It is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies, and other digital assets for a product design company. This is the generic definition of design systems that you can find anywhere. But honestly, it can mean a lot more than that. Here’s an interesting quote by Nathan Curtis about design systems that caught my attention. (Check out his profile for more insightful design system articles)
“A design system isn’t a project. It’s a product, serving products. A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
Unfortunately, the above statement was beyond the scope of my project. But baby steps do count in the future, as long as you are going forward. And each step that you take reveals a new horizon, and that’s the beauty of it.
What are the advantages of design system?
Here are a few of the advantages of design systems from a birds-eye perspective.
- Design and development work can be created and replicated quickly and at scale.
- Reduces strain on design resources to focus on larger, more complex problems.
- Creates a unified language within and between cross-functional teams.
- Creates visual consistency across various products within the organization.
- Allows teams to prototype and experiment with ideas much faster.
- Redundant efforts can be eliminated thus saving time and cost.
- Difficulties in onboarding new designers can be avoided.
“Design systems are culture change disguised as a UI kit”
— Lauren LoPrete, Snr. Product Design Manager, Dropbox
After setting down the foundations, I started looking into various design systems. Among them were the Material Design System, Human Interface Guidelines, Carbon Design System, and Polaris Design System to name a few. By doing so, I gained insight into how each element of the design system, such as typography, colors, components, etc is defined and curated. Moreover, I realized that design systems of organizations differ from one another, and they are only justified as what fits the culture of the company.
The Great Atomic Design Methodology ⚛️
During my research, I came across the well-known Atomic Design Methodology, which is a process that has five distinct stages. They are Atoms, Molecules, Organisms, Templates, and Pages. These stages are ordered in a hierarchical way to create interface design systems. With this, I was able to set my fundamentals and gain a clearer understanding of the process I should follow. (Read more about Atomic Design Methodology here)
Get-Your-Hands-Dirty Phase 💅
After all the research and insights that I’ve gathered, the moment has arrived for me to implement and apply my learnings to this project. Instead of starting from scratch, I was responsible for defining and standardizing the design assets as the user interface already existed. Taking note of all the aspects and inspirations from the popular design systems and research articles, the following steps were used to accomplish the same.
Auditing the existing UI inventory
- went through all the designed user interface screens (found out lots of different hex values, not clearly defined component states, and so on)
- had a collection of unlabelled assets such as typography, colors, icons, buttons, form elements, etc.
- categorized the design assets to get an overview
Building the design system foundation
- Atomic Design Methodology was used to formulate the design systems
- a suitable naming convention was adopted which fulfills the system’s requirements
- base elements such as the typography, colors, icons, spacing, etc. were defined
Creating component libraries
- buttons, input fields, dropdowns, etc. were created from the base elements of the design system
- complex components such as cards, submenus, modals, etc. were also created following the atomic design methodology
- created a new directory and separate files for managing the design system
- easy to maintain and manage asset libraries which can be controlled by the respective owners
So far, I got the chance to create design systems for a few BYJU’S products, such as Notification Service Product, Tutor Plus CMS Product (both are internal), and the Learn Portal which our students use to access our services through the web.
Psst, Today’s Hot Topic — Design Tokens 🔥
As part of my internship project, we also had the vision to implement our design system using design tokens. Laying the foundation was the key part. Tokens store style values, such as colors, typography, spacing, sizing, radius, border width, etc., allowing style values to be applied consistently across designs, code, tools & platforms. It can be considered as building blocks of the design system — think of them as sub atoms, the smallest pieces of style values that allow designers to create styles for a product. Dhaneesh introduced me to this whole concept of design tokens, which got me intrigued. Building design systems using design tokens was proposed as the future scope of my project. Proving again that, each step you take reveals a new horizon.
Key Takeaways ✨
BYJU’S Classes provided me with an enriching and fruitful internship experience. In the past six months, I have learned a lot of new things and I believe that I have grown as an individual as a result of the experiences I have had. Following are some of the major takeaways from my internship that I’ll treasure forever:
- I learned how important documentation is to making life easier. Writing down various decisions, directions, insights, tasks, etc. helped me to increase productivity and organize myself.
- Teamwork is the next best skill I earned during my time here at BYJU’S. Working along with other team members on a few live projects helped me gain a better understanding of team culture and a more favorable perspective on working with others.
- My mentor and the others in the team always stressed the importance of prioritizing tasks. Weekly sprints, review meetings, and planning helped me manage my time efficiently and distribute my energy effectively across various tasks to produce sound output and create better design experiences.
Circling back to my first remark — I learned to design to derive art, and this art planted in me the drive to learn more. Even though my project was based on design systems, I was also encouraged to keep exploring other areas of interest as well. This allowed me to adopt a growth mindset and continue reinventing my own design language. The consequential realization was that I could create and improve products in such a way that would essentially ease the human experience of said product. Working with and under the guidance of Praveen, Dhaneesh, the amazing Sync.Ed Design team and my fellow interns indubitably made me accomplish that goal at an astounding pace.
If you would like to know and understand more about the project, feel free to reach out to me on LinkedIn.
