Kascade • Case Study | Jennifer Hibdige's Portfolio

Overview

During the peaks and troughs of client work at PivotPoint, an idea was born of a tool that would help designers. A project that required the many different skills and experience within the PivotPoint team, this was a rewarding and exciting project that turned an initial idea into a live product.

The Problem

Our team at PivotPoint all had the experience of starting work with a new client and needing to pull out all their branding assets and design system styles which was a receptive and time consuming process. We wanted to create a tool that would easily take the styles on a website and bring those straight into Figma, speeding up the overall design process.

What We did

01.

Transforming an idea into a product

Early ideation sessions

Early into the project we ran an internal Crazy 8’s ideation session to flesh out the initial idea and expand upon it with the team's different perspectives based on our understanding of the idea.

This was beneficial in allowing each of us to input our individual ideas and align our thinking on what features we would like to have in the product and how we imagined it would work.

Early sketches of concepts and ideas about the product

Biting off something we could chew

Knowing that this project was something that could easily go down a rabbit hole of possibilities and features, we instead wanted to bite off something we could chew–focussing our efforts on a Google Chrome Extension.

We set our sights on creating an extension that would identify styles on a website and allow you to export them into Figma as styles, addressing the common issue of needing to manually set up a client's styles each time.

Running an internal hack day

With a north star for what we wanted the product to do, we ran an internal hack day to get as many concepts and thinking out of our heads and onto Figma.

Competitor research

For a better understanding of the market and what was currently available, we looked into competitors to understand what paths had already been tread and identified what made our product unique.These learnings helped in forming a focus for the product's features and what we wanted to highlight.

Early concepts

We set our focus on the main typography detection screen of the extension and how that might look. We explored different layouts and methods of displaying the typographic information to a user, helping us to determine which information was most important to see first, and quickly understanding which layouts did or didn’t work.

Hack day concepts of the product with annotations

Concepts of the product with annotations

This exercise helped in understanding how we wanted to move forward with the design and where to narrow the scope of the project for first release, setting our focus on the primary function of identifying text styles on webpages and exporting those styles to Figma.

02.

Refining the problem space

Continuously iterating the UI

With our initial concepts explored during the hack day we took the design and UI further – exploring high-fidelity wireframes, various states, visually validating our thinking and improving areas that had gaps or problems.

Variation 01

About the designs

Our initial focus was on a version of the extension that would overlay half of the screen which was beneficial to show more content at once
We wanted to highlight how many instances a font style appeared on a webpage and highlighted that by using the colour pink whenever instances were being referenced
We had a concept of “primary style” which meant the style with the most instances on a page, and included a explainer for what that meant under an ‘i’ icon
We also looked into how we would show style variations from the primary style, displaying them in a dropdown that would say how many variations were detected

Some early concerns we had was that it might be too busy with the use of boxes inside boxes and the various circle and pill shapes used to highlight key information
We were also concerned on how the overlay covered a majority of the page, wondering how we would be able to see styles that were being detected on the webpage if the overlay was covering them

Variation 02

About the designs

To address the issue of the extension overlaying the webpage we decided to move the extension into the Google Chrome Side Panel. Moving it here meant that it would be able to work responsively with the webpage without covering any of the webpage content
With this change, we needed to redesign what we had previously explored to fit in the Side Panel. With a more compact size we would need to utilise the available space, instead of having all font styles appear we would need to house them under their respective style type
We also introduced typescale detection to the product which would detect the closest type scale based on what fonts are on the webpage. This would help designers by providing guidance on what font sizes to use to create a balanced and flexible design

One of our concerns while designing in the compact view was surfacing the right information at the appropriate time to the user. We wanted it to be clear that the styles would be discoverable by clicking on a preview item
We felt that although we had a button showing the option to ‘export to Figma’ that it wasn’t clear enough of a prompt or fully explained how and what that would do
Although we removed the variations aspect for this release, we knew that it would be an upcoming feature on the roadmap and wanted some way for it to be included in the design without being disruptive

Variation 3 – Final Changes

About the designs

Instead of having the styles hidden behind a click of the preview item, we decided that for the first detected element that it’s list of styles would be open by default which would show the user from the start that there’s more information to be discovered
Instead of using the top space of the extension on showing the URL, we converted it to a space for a banner to explain how to use and install the Figma plugin. We also planned to use this space to announce new feature release and useful tips and info
Retouched aspects of the overall UI to reduce visual noise and keep the focus on showing the text styles by;

Combined the URL and navigation bar so that more space could be used for displaying the text styles
Removed the button shape from the ‘View X instances’ link to make the cards for each detected style less busy
Adjusted the design so that the type scale and each detected type style would sit inside cards, providing a visual separation between the different elements

Internal testing on early build

Internal user testing

With myself and another team member having had time away from the project while on client work, it provided an opportunity for internal testing to be done on the latest build of the extension and plugin.

Although we had knowledge about the design and our intended use of the plugin, we had yet to see what state the developed version had come to, and purposely didn’t know of all of the latest changes to any functionality.

As a tester, I was asked to imagine a scenario where I was auditing a client's website and designing a new homepage for them.

My process doing this task using the plugin was witnessed and recorded by other team members with me expressing any thoughts I had during the task or if anything confused me.

From this internal exercise, we came up with the following notes from myself and my coworker who were interviewed. These notes were then sorted into themes, and then sized into what additional features could be done now and what would be done later and added to the roadmap.

Iterative testing and feedback to developers

Throughout the build of the extension and plugin, myself and other team members tested the product across various websites trying to find any oddities or purposely trying to find ways to make it break.

Each finding was documented and then shared back to developers who then prioritised those findings of what to fix first based on how severe the issue was and its effect on the user experience. We would then work collaboratively with developers to help refine and offer support and advice on changes made, and if needed create designs to visually show what needed to be done.

03.

Creating awareness across social platforms

A marketing push for Meta and Google ads

Working with an external marketing studio, I designed ad creatives to display Kascade’s unique selling point which were;

Exporting styles to Figma

Making style foundations

Instantly identifying page styles

Creating an online presence for Kascade

To aid with the Meta and Google ads running, I created the social accounts for Kascade which we would also use to announce updates and feature releases.

These social accounts would then link to both our Chrome Extension and Figma plugin pages, which we optimised to visually explain the product through a video and explainer images accompanied by an exciting product description.

Screenshot of Kascade on Figma and Google Chrome Store

Creating unique content to reach more users

Along with the running Meta and Google ads, we also made content for our social media accounts to announce when new features were released.

Based on the current popular trend of short form content, I created videos that highlighted the new features of Kascade and explained what the extension and plugin was and its unique selling points.

For each of these videos, I created a script based on the features needing to be highlighted, then recorded the footage on my phone before exporting the raw footage into CapCut and editing the footage, adding in text and music and any final touches.

After the initial video explaining Kascade, we also posted a video about a new feature and witnessed the following growth within a month;

Chrome Extension users - 10.6742% increase
Figma plugin users - 6.77134% increase

Outcomes

This project was a large team effort that combined all our various skills and knowledge. Working towards a north star, and having a clear roadmap, we were able to release the product to the public and witness a growth in users.

Still a new product, there’s much more exciting features in the roadmap to come!

Download the Chrome Extension

Download the Figma Plugin

Exporting web styles to Figma: How we created a tool for designers

Let's Chat!