Style Guides

The goal was to create a unified design system for a suite of products to ensure a cohesive user experience, improve design efficiency, and maintain visual consistency across platforms (web, mobile, desktop). This design system needed to scale as the product offerings expanded and adapt to multiple platforms with ease.

Overview

Researched on ideas that met both customer needs and business goals. I tried to focus on showing benefits more than features and the easy process. Designed the wireframes, mockup, and visual design.

We help both types of organizations to quickly and effectively seize the opportunity by developing intuitive products and accompanying marketing tools. From best-practice based yet innovative UX design partner for fintech projects.

Sector

Design Systems

Challenge

The organization’s website needs to be redesigned to better connect with its audiences, including building a more intuitive information architecture and developing a coherent visual language.

My Role

Workshop Facilitation, Information Architecture, Webdesign, Branding

Project Time

3 weeks (before handoff to development)

Challenges

Implementing any design system comes with challenges. However, there are unique challenges you’ll run into when scaling a design system to multiple teams and multiple websites.

One of the biggest hurdles design system teams face is getting widespread adoption across their organization. You can create the most beautiful, well-thought-out design system in the world, but it’s worthless if developers aren’t actually using it.

Solutions

The key to solving the problem is to make integration as frictionless as possible for developers. Instead of asking them to become experts in your design system, provide tools that are already well versed in your preferences.

A better solution to all of this manual work is to use a design to code tool with design system support. This approach most effectively eases the learning curve and makes migration easier, significantly boosting adoption rates. Builder’s Visual Copilot is one example of such a tool.

What's Inside

  • Breadcrumbs
  • Image Carousel
  • Card Component
  • Ad banner
  • Search & Filter
  • Badges
  • Video Player
  • Data Visualization
  • Focus State
  • Colors
  • Icons & Illustrations
  • Merchant logos
  • Skeleton Loader
  • Numeric input

breadcrumb

We enhance user experience with breadcrumb navigation. We used it as a secondary navigation scheme on the website, where visitors may want to go deeper into the site hierarchy.

Cards Component

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information.
Standard Branch Page Layout

Image Carousel

Also known as sliders, galleries, and slideshows, web carousels let you display text, graphics, images, and even video in one interactive, “sliding” block.

Ad Banner

Ad banner are shown along the top, side, or bottom of a website in hopes that it will drive traffic to the advertiser’s proprietary site, generate awareness, and overall brand consideration. This type of visual banner-style online advertising is a form of display advertising.

Search & Filter

A single view that displays the search filters, results (formatted as you want, including as cards with the appropriate styling), and as markers on a map.

Badges

A trust badge is a symbol or a small image placed on a website that aims to convince visitors that their personal data will be handled safely.

Video Player

An easy-to-use and very lightweight video player for website.

Data Visualization

Data visualization form is a graphical representation that transforms complex datasets into a combination of understandable visuals.

Focus State

Colors

Icons & Illustrations

This folder is empty.

Add some documents to get going

Merchant Logos

Merchant logos play a crucial role in enhancing the credibility, trust, and overall user experience of a website. They serve as visual cues that instantly recognize brands and products, guiding customers through their online shopping journey.

Skeleton Loader

A skeleton screen is an animated placeholder that simulates the layout of a website while data is being loaded.

Modals

Modal is a pop-up that appears on a page and disables all other content. Here’s everything you should know about modals in web design.

Numeric Input

Numeric input is an input component that allows you to enter a numeric value to be treated as a number.

Toggle Switch

Toggle buttons indicate a state between an enabled or disabled state when the button is clicked.

What I’ve Learned

While creating components for the design system, I’ve also gained valuable experience in advocating for the correct usage of these components and ensuring adherence to design system guidelines. Being part of the core design system team has been incredibly important in my growth as a designer, enhancing my understanding of system-level design thinking and helping me navigate the broader design journey with confidence. This version highlights both your technical contributions and your growth as a designer while reinforcing the importance of your role within the design system.

Wanna collaborate?

Let’s chat.

Name

(required)

Hey, thanks for checking out my work.

I’ve been fascinated with the way people interact with technology since forever. I’m particularly keen on digital products designed to make life easier for human beings.

What are you working on?

If you want to know more about my design process, or if you want to talk about a cool idea, don’t hesitate to hit me up.