Cappsool’s Design System
Cappsool Technologies is a B2B marketing company dedicated to matching high-intent users with partners in multiple industries. Through paid search, we identify and target non-branded keywords that signify the user is close to making a purchase decision. After clicking on one of Cappsool's ads, the user is directed to ourcomparison site focused on the industry they searched for. These sites help the user compare brands and learn about the various options, empowering them to make a decision.
In intent marketing, no two users are the same. That's why Cappsool gives each user a unique comparison experience determined by things like their geolocation and search query.
Usually, the first thing the user sees when they land on one of our comparison sites is a chart of the top brands in that industry. Cappsool's sites also contain feature comparison charts, brand reviews, and informative how-to guides and articles. No matter the industry, the aim is always the same: to help the user compare their options and encourage them to click on the most relevant brand(s).
On-going from 2019
Sketch, Photoshop & Illustrator.
My Role: Product Design & Strategy
Tasks for this project include working on the elements of the design system, working closely with one product manager and four engineers, defining priorities, and setting product goals.
Before I created the design system, we had a different design for each industry, and it caused a lot of mess and delays in both the product and development side.
Our Solution: Create a Design Systems
Working in web development and design, we need to ship our product on a multitude of platforms and devices. Keeping features and designs synchronized takes significant effort, often requiring products to be made in a scalable and repeatable way across all of these platforms.
That's why we decided it would be better to use a design system; a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.
The color themes are designed to be harmonious, ensure accessible text, and distinguish different industries from one another.
Although I value an aesthetically pleasing use of color, I place a higher value on clear communication. Our use of color should help bring attention to what matters most, support the hierarchy of the page, and should support the purpose of the content.
I wanted to present the design and content as clearly and efficiently as possible with a clean and clear font. The font chosen was Lato, a sans serif font which allows for high legibility even at smaller sizes.
By consistently tying typographic styles to appropriate functions in the interface, I created a clear visual pattern, and consistent hierarchy for users to follow while interacting with our websites.
I used icons to provide the user with adequate information.
The user interface icons represent ideas, objects, or actions. They can communicate messages at a glance, afford interactivity, and draw attention to relevant information.
Here are some of the icons I used:
I defined a horizontal grid for content and UI elements to align, creating a visual structure with content.
The fixed-width layout has a max-width of 1000px and is useful for long-form content. The fluid design full-screen works better for screens that are data or interaction heavy.
Also, it is essential to set the reading environment to suit the reader. Extensive lines of text are difficult to read and make it difficult for people to focus. While there is no right way to measure the perfect width for writing, a good goal is to aim for between 60 and 100 characters per line, including spacing. Setting an optimal line length will break up content into easily digestible information.
Rather than designing to specific screen sizes, responsive design is a fluid approach that makes the most of available screen space on any device.
Therefore, images and content will be scaled for optimal placement on any device or screen size.
The site's layouts encourage consistency across the different industries, platforms, environments, and screen sizes by using uniform elements and spacing.
Consistent, clear hierarchy helps users who navigate the page using links or headers. Headings and titles are used to outline the page so that users can clearly see the structure and understand how the sections relate.
Chart Design (Desktop, tablet, and mobile)
Cards are usually arranged in a grid or matrix to convey the hierarchical relationship between each other. It makes information centralized, enhances the sense of block, and is easier to operate.
When the same elements keep repeating throughout the whole interface, it could not only lower the user's learning curve cost-effectively, but it may also help users recognize the relevance between these elements.
In the limited card space, we needed to pay attention to the spacing between the information that we needed to group together and be able to present variable, transient content that users might want to interact with. Every industry has different content and legal obligations, so we needed to create a responsive card that could adjust to any industry.
We know the user is more likely to scan the content, instead of searching or exploring, so we don't need to emphasize the order (tables are used to organize and order content better).
Basic Wireframes Feature Comparison (Tablet & Desktop)
We used tables to logically structure content in a grid to make it easier to see relationships and to facilitate understanding.
To help the user read the table, we ordered the columns by importance from left to right, with key pieces of content opening the row.
Content should be left-aligned, except when using a different alignment helps with comprehension. For example, numeric data is easier to read when center-aligned.
We know the user is more likely to search and explore the data, rather than just browsing; he wants to reorganize, compare, or sort data.
To avoid having too much information, we added the function that allows the user to close sections that don't interest him so that he can focus on the information relevant to him.
Articles and Reviews
The content team created many interesting articles where users can learn more about the industry they are interested in.
There are many companies out there; we’ll help the user choose the best ones. We reviewed and researched all the top companies, and shared all that information with up-to-date reviews including everything you need to know.
Each component is defined by it's required elements (such as title, text, icon, and picture), and may sometimes contain optional features. I collected them in a library, which we referred to throughout the design process.
I created one set of these components for desktop, tablets, and mobile (iOS and Android). The tablet's components are mostly the same as those for desktop. On a technical level, the code only needs to exist once in two different styles.
Some of the industries are comprised of a few different subjects; therefore, we need a filter so that the user can find exactly what he's looking for.
For example, in 'Meals & More' we have several meal kits and because every type has a different company’s chart we needed to give each type its own page. For each page, we decided to change the cover with different types of images that are better suited for the specific meal kits.
We used sticky banners at the bottom of the screen to display the top deal of the industry chart.
Popups & Banners
A few seconds after entering the site, a popup appears that displays the top deal from the industry chart.
For some industries, we added banners in the middle of the chart and the articles to create breaks in the content.
More Websites Components
Dropdowns - Mostly used for filters and menus.
Testimonials - These show a vote of confidence in the product's value. All kinds of testimonials can have the same impact. Whether it's a customer review, celebrity endorsement, or a star-based rating, this content creates positive feedback from actual users.
Tool Tips - By hovering over the tooltip icon, we can reveal more information about icons and statements.
Social Proof - The social proof shows the wisdom of the crowd. When large numbers of people are using or buying a product, others want to follow suit.
Flags - We used flags for messages containing confirmations, alerts, and acknowledgments that require minimal user interaction. Flagged messages can include an icon, title, news, and actions.
Ribbons - We used ribbons to highlight the top company from the industry chart. Ribbons are bold and use color to indicate meanings that users can learn and recognize across the sites.
We knew that this was a challenging project. It meant re-designing and rebuilding the majority of the views on our sites.
While this was a monumental task that ended up requiring efforts from many of our product teams, we found that creating our Design Language System was worth the investment and a huge leap forward.
Additionally, engineers and designers now share a common language. Development is generally faster since product engineers can focus more on writing the feature logic rather than the view code. I was also excited about the system. It enables product reviews to focus on the actual concepts and experiences of a design, rather than padding, colors, and type choices.