Veritas Design System
189% more productive, zero arguments, one shared truth.
User Research
User Interface
User Experience
Context
Veritas is Udacity’s new design system, created through a close collaboration between Creative Aliens and Udacity’s Design, Brand, and Engineering teams. I was part of the core team at Creative Aliens, working to rebuild the system into a modern, user-focused, and consistent experience. The goal was to make design faster, smarter, and easier to scale by following Udacity’s updated brand guidelines and an 8pt atomic design structure.
My Role
Tools
Responsibility
Lead a cross-functional team of 5 designers and front-end developers, mentoring and guiding them to deliver high-quality UX/UI solutions.
Collaborate closely with engineering teams, VP, CEO, and CMO to align product design with business objectives and technical feasibility.
Drive end-to-end product design, from user research, wireframing, and prototyping to high-fidelity visual design and design system implementation.
Establish and maintain a comprehensive design system, ensuring consistency, scalability, and efficiency across the platform.
Conduct UX research, usability testing, and A/B testing to identify pain points and optimize user engagement.
Translate complex business and AI-driven data insights into intuitive, user-friendly interfaces for UBIX’s analytics and visualization platform.
Ensure design solutions are data-driven, accessible, and aligned with market trends to enhance overall product experience.
Foster a collaborative and innovative team culture, promoting knowledge sharing, skill development, and process improvement.
Why This Design System?
Enables teams to work faster and smarter by reducing repetitive design and development tasks.
Eliminates confusion and conflicts between designers and developers through a single source of truth.
Promotes consistency and scalability across all products and touchpoints.
Encourages reusability—build once, use everywhere.
Simplifies the process of maintaining and evolving the brand across the entire ecosystem.
Impact & Results
With 500+ components and 250+ layouts, the system boosted productivity by 189% and created a seamless workflow between design and development.
To Improve Outcomes, I Surveyed My Colleagues, Friends, and Clients
We aimed to be intentional and present throughout the design process—building with purpose, clarity, and control.
Our journey began with defining the brand strategy, followed by brainstorming and research sessions to understand Udacity’s existing challenges. We held multiple meetings with Scott Dickie from Udacity to identify the core problems the team was facing and the type of solutions they needed.
From there, we established rules and principles, explored design directions, and implemented a scalable, reusable, and well-documented design system—making the entire process more efficient, consistent, and cost-effective.
Building on an 8pt Atomic Grid System
The foundation of the design system was built on an 8px atomic grid, ensuring precision, balance, and visual harmony across every component. This grid acted as the structural
Spacing
Indentation gives layouts air, consistency, hierarchy, and predictability.
Typography system
We’ll use standard typefaces and a clear scale to create a consistent, easy-to-follow hierarchy across the product.
Icons
We’ll use a clear type scale to set font standards and hierarchy, so the product’s information stays consistent.
Colors
Our color palette is complementary, readable, and helps separate parts. Use color to convey meaning and support communication in the design.
Buttons
Buttons let users take actions or make selections with one tap. They show what actions are available and appear throughout the UI.
Progress Bar
A progress bar shows how far a user is in a process. Use it to orient users and indicate status in their journey.
Avatar
An avatar (userpic) is a UI element that represents the user, helping identify them.
Radio Button And Checkbox
Chips
Buttons should be consistent with familiar calls to action. Chips are dynamic and usually appear as a group of multiple interactive elements.
Dropdown
Cards
Navigation bars (menus/navbars) link to pages within a site, helping visitors move around smoothly. They can be hidden or easily accessible, guiding users to the most useful or interesting pages.
Navigation
Navigation bars (menus/navbars) link to internal pages, helping users move around a site. They can be hidden or always visible to guide visitors to useful or interesting content.
Impact
When evaluating a design system, focus on its effect on the end-user experience. Let’s compare before and after implementing the system.
DESIGN OUTCOME
With 500+ components and 250+ layouts, the system boosted productivity by 189% and created a seamless workflow between design and development.
I'm so proud of you and so is John for your amazing efforts every day
For over 4 months you've been working here with me, and I want to tell you how much of a joy it is to see you excel and thrive as a designer and team member. Seeing you smiling in the morning meetings and seeing you engage with the team, contribute more and more each day with your wisdom and insights and take initiative is really awesome.
Mamun Srizon
Creative Director, Creative Aliens
Credits
Services
Research
Component Design
Interface Redesign
Design Sytem
Tools
Figma
Figjam
Jira
Toggl
Slack
team
Driver
Mamun Srizon, Creative Aliens
Scott Dickie: Udacity
Lead Collaborator
Md Eftakher
Creative Aliens
Towkir Ahmed Bappy
Nazibuddoula Nayeem,
Ahmad Firoz
Udacity
Allison Hughes
Courtney Yingling,
Kolby Sisk
