Concept Ptoject

Hubspot - Design System Redesign

This was an exploratory project to understand the workings of a design system and its importance in building a large scale B2B website like Hubspot.

VIew Prototype

My Role

I worked on creating a revamped Design System for the CRM tool by studying the website and re-designing the UI.

Project Type

UI Design System Project

Duration

3 Months

End Goal

To understand the structure of a Design System and how it can make creating large scale products easier.

Project Context

Design Systems are integral in building any product or service. I took up this project to dive deep into creating/understanding a Design System.
Hubspot is a highly complex B2B website which has multiple actions and tasks of similar components.
This proved to be the right kind of challenge for me to understand this process.

Process followed

In order to breakdown a massive website like Hubspot, I decided to follow these steps.

1. Analyse

Heuristic Evaluation of Hubspot

Since I had no other means to get User feedback, I broke down Hubspot's screens in terms of the 10 Heuristic Principles.

View Full Report

1. Analyse

Using Hubspot

To understand all the actions and flows Hubspot offers, I signed up as a client in the marketing and CRM domain.

I explored the following topics, while using the site:
‍
1. What is Hubspot mainly used for?
2. What is the existing flow of screens?
3. What are the major activities of the site?
4. What is the current styleguide used?
5. How are users onboarding?
6. Who is the target audience?
7. What are the major tasks a user can do?
8. How does the system guide users through the style?
9. Are there any reported pain points?

2. Ideate

Organizing the Information Architecture

I mapped the Information architecture flow, breaking each screen with consecutive views, major actions and micro interactions.

View Excel Sheet

A snippet of the IA Breakup

2. Ideate

Creating Styles

Experimenting with style variations of the UI gave a better understanding of how every element would be created. It was put up for peer votes to choose one style.

Style1 - Dark Theme + Orange Gradient + Line Icon

Style 2 - Light Theme + Orange Accent + Offset Icon

2. Ideate

Moodboard

Based on style 2, which appealed to more peers, I created a mood-board to guide my Design System.

Modern - Refreshing - Subtle

|Color Scheme

|Spacing Scale

|Typeface Settings

|Buttons - Height 36px

|Tags - Height 30px

|Toggle Switch - Height 44-54px

|Pagination

|Slider

|Checkbox - 30x30px

|Tabs

|Progress Bar

|Tool Tips

|Notification

|Forms

|Pop-Ups

3. Design

Hubspot Screens

With such an extensive Design System created and added into symbols in Adobe XD, the process of designing the new screens became much easier. It also helped with consistency and editing.

Style1 - Dark Theme + Orange Gradient + Line Icon

Style 2 - Light Theme + Orange Accent + Offset Icon

Learnings from Project

Key takeaways

One of the major takeaways I had as a UI Designer was the understanding of essential components like Grids, Padding, Sizes and dimensions.
I also found that designing for smaller screen sizes works better for scaling.
Design Systems are extremely powerful tools in guiding an organisations brand and experience. After this project I always created a system to guide my screens.

Hubspot - Design System Redesign

My Role

Project Type

Duration

End Goal

Project Context

Process followed

Analyse

Ideate

Design

Heuristic Evaluation of Hubspot

Since I had no other means to get User feedback, I broke down Hubspot's screens in terms of the 10 Heuristic Principles.

Using Hubspot

To understand all the actions and flows Hubspot offers, I signed up as a client in the marketing and CRM domain.

Organizing the Information Architecture

I mapped the Information architecture flow, breaking each screen with consecutive views, major actions and micro interactions.

Creating Styles

Experimenting with style variations of the UI gave a better understanding of how every element would be created. It was put up for peer votes to choose one style.

Moodboard

Based on style 2, which appealed to more peers, I created a mood-board to guide my Design System.

Design System

Through the new design system, I aimed to create a modern feel to the site.

Hubspot Screens

With such an extensive Design System created and added into symbols in Adobe XD, the process of designing the new screens became much easier. It also helped with consistency and editing.

Desktop screens designed

Mobile screens designed

Learnings from Project