top of page
REDESIGNING THE COMPANY'S MASCOT
REDESIGNING THE COMPANY'S MASCOT

Building the new design system for our new website

Mockup

The Challenge

  • Swift Design Update: Quickly transitioned website from old to new design under time constraints, ensuring functionality and consistency.

  • Wider Color Range: Added colors using the balanced 60%-30%-10% distribution method.

  • Enhanced Elements: Created buttons and various other elements from scratch.

  • Color Harmony: Ensured legibility with multiple colors, including gradients.

  • Anticipating the Future: create the design system for future scaling and easy updates

Research & Opportunities for improvement

Before designing a new system with the company's brand, gather key research to ensure success. Here are essential research questions:

  • Used new colors and fonts for diverse hierarchies.

  • Differentiated brand from competitors visually.

  • Refreshed design system with vibrant palettes.

  • Applied new colors to buttons, icons, forms strategically.

  • Followed accessibility guidelines for inclusivity.

Iconography

Moving to a more coheseve look and fee

In the beginning, I experimented with FontAwesome, a component of our website's design system. However, due to the absence of specialized icons, we opted for custom-made icons, which posed other challenges such as Inconsistencies in stroke weight, design, and size emerged.

  • To remedy this, I developed new icons, resulting in a more cohesive and enhanced design experience.

  • Ultimately, visual unity was achieved, imparting a harmonious and integrated appearance.

  • I also created new icons to work organically with the rest.Associated each color with specific widget categories for clear identification (e.g., CPU, Memory).Enhanced contrast for improved legibility and accessibility by adjusting values.

Icons

Colors

  • Selective Accent Color Usage: Devised a strategy by crafting 6 gray tints, strategically integrating accent colors only where essential. This approach minimized color diversity, mitigating cognitive overload for users.

  • Gradient Variation for Enhanced Flexibility: Enriched our design language by seamlessly incorporating gradients. These gradients were thoughtfully deployed in both colored and grayscale contexts, thereby furnishing diverse options for sizeable color blocks throughout the website.

  • Strategic Color Allocation: Applied colors judiciously, adhering to the 60%-30%-10% color allocation principle, thereby optimizing color harmony and visual impact.

  • Fundamental Design System Component: Tokens: A crucial foundation of our design system lies in its tokens.

  • Brand-Aligned Color Palette: Meticulously developed an array of colors in alignment with our new brand identity.

Colors (tints and shades)

Buttons

  • Responsive Button Design: Developed buttons to ensure compatibility across two sizes - Desktop and mobile (following our data we noticed there are no other devices that visits our website).

  • Diverse Accent Colors: Introduced new accent colors from the brand, yielding three distinct button sets: Pink, Purple, and Yellow.

  • Enhanced Exploration: Collaborated with web master and Marketing team leader to redesign buttons with slight corner radius, balancing seriousness and lightness. Developed various button options in Figma:

  • With/without labels (icon-only): True or false (using a toggle).

Figma button set
Buttons

  • With/without icons (right side): True or false (using a toggle)

  • Three key states: Default, Hover, Selected

Additional Assets
Form elements
Forms

Forms

  • Varied Form Integration: Included diverse forms for webinar registration, demo scheduling, quote requests throughout the site and more.

  • Simplified Design: Created core form elements for easy construction of different forms, including dropdowns, fields, and more.

  • Flexible Customization: Designed forms for quick adaptation to various types, enhancing user experience and flexibility.

Grids

Desktop and Mobile

  • Comprehensive Figma Grids: Developed grids for both desktop and mobile layouts in Figma, facilitating precise alignment and consistent design across platforms.

  • New 8px and 4px grid: Implemented an effective pixel-perfect vstrategy utilizing a base grid system. Additionally, established separate grids of 4px and 8px to fine-tune typography elements

  • Streamlined Alignment and Efficiency: Achieved exceptional alignment and efficiency by leveraging the prepared grids, ensuring a cohesive and swift design process.

Grid system
Poppins example

Typography

  • Diverse Font Weights: Aligned with our brand's dual weight combinations, curated four distinct font weight variations: Semibold vs Light, and Bold vs Regular.

  • Enhanced Typography Flexibility: Leveraged these thoughtfully crafted weight pairs to optimize typography application, ensuring an enriched and versatile visual language.

Typography (two options)

Creative element | Shapes

  • Leveraging the Hexagon Shape: Incorporated the distinctive rounded hexagon shape from our new brand as a recurring motif across the website. This versatile shape served both decorative purposes as well as a recognition symbol for the company’s new brand.

  • Expanded Functionality of the Hexagon: Pushed the boundaries of the hexagon's application, utilizing it in multiple ways. It was employed as a fill or stroke, embracing diverse color variations aligned with our brand's palette, thereby enriching design possibilities, including a scalable mask for images and colors.

Shapes and elements

The Result

Creating the Design System was vital for various reasons:

  • Unified Brand: Maintain a consistent and recognizable brand identity.

  • Faster Development: Speed up website creation and updates.

  • User-Friendly: Enhance user experience with consistent and intuitive designs.

  • Team Collaboration: Facilitate teamwork among designers and developers.

  • Scalability: Easily expand the website as the company grows or evolves.

bottom of page