Crunchy Design System

OVERVIEW

As the UNDISCLOSED COMPANY team grew, it became increasingly important to maintain a consistent style and visual language across all areas of the product. It was clear that we needed more systematic ways to guide and leverage our work.


The idea was to have a collection of reusable components, guided by clear principles that can be combined together to create experience, as simple or complex as need be.

ROLE & DURATION

UI/UX Designer | UNDISCLOSED COMPANY
Research, Information Architecture,
Visual design & testing


Team of 2 designers & 4 developers
Jan 2018 - Sep 2018

CLIENTS

Logo
The Problem

After looking at Trello and Zendesk support tickets & one on one stakeholder interviews it was clear that UNDISCLOSED COMPANY needed a new design language in order to make the platform consistent, intuitive and delightful.

44%

of Support tickets on Trello are UI related and are due to inconsistent user experience

20%

of the clients complain that the platform is overloaded with information and looks obsolete.

Solution


A Design System
The primary solution was to come up with a design system that was guided by principles and best practices. Also, to keep with documented at each step to ensure consistency and efficiency of work.

Personalization
To solve the problem of complexity it was important to eliminate any unnecessary elements. To achieve that the platform was made persona specific.

Challenges


Getting everyone onboard
A Design System is not a one-man project and if you want it to succeed you need everyone on board. The more integrated you want it the more disciplines you need at the table.

Planning & Priority
We constantly toggle between working on our Design System and enhancing the application and planning and prioritizing our tasks is very important.

Breaking this news to clients
Although, our clients wanted this change from a long long time. Yet, it was important to keep them involved and excited about the big changes we were planning. As a start, this project was done for our key partner clients only.

Discovery

The first step was to review every aspect of the product and try to list all important components on a paper, then group elements by their usages.

During this process, many inconsistencies emerged. Without worrying out them at that point, I documented everything in the form of screenshots.

Laying the foundation


This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.


This foundation loosely defined our typography, colors, icons, spacing, navigation and information architecture. and proved essential for guiding our work in a unified direction. Reviewing our collective work at the end of each day, we began to see patterns emerge.

We course-corrected when necessary, and started defining our standardized components.

Bringing it all together


While creating these components, we collected them in a sketch master file, which we referred to throughout the design process. After a week or two, we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a prototype, I was able to create nearly 20 screens within just a few hours by using the framework our library provided.

While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category into Navigation, Marquees, Content, Image, and Speciality. Later we planned on to create an internal website to document the system that can be used by both the devs and designers.

Testing & feedback


Testing was conducted during the discovery phase to identify the biggest pain points in the current version. During the redesign: Testing was done at every milestone of the project. Marvel prototypes were shared with stakeholders to get early feedback. After numerous surveys and user testing, we launched the platform in November 2018 for our key clients.

Impact

Numerous hours of brainstorming, careful planning, sketching, designing and developing has brought the results desired for the UNDISCLOSED COMPANY platform. We were proud to present the new face of the product to our clients. The final result of the Crunchy Design System a platform is a light, minimalistic, and an intuitive product personalized for each user persona to help them achieve everything they hoped for.

Project learnings


Collaboration is key
The more eyes on a design, the more it’s exposed to varying opinions, experience, and critique — and this can only ultimately improve it. Or at the very least, test it.

Process in essential
For a project that is vast, you need a clear roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out.