*A Chameleon Case Study*

We knew from our research that teams with good templates and good design involvement early on went on to become successful customers.

### Initial Hypothesis

*CSS is hard for some designers to write so lets make that easier.*

* Initial idea was to create a better way to target CSS and later on to make writing CSS easier, possibly leveraging an AI co-pilot.

* Started to research and found a more complex problem.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2Fd4e1eeda-f3d4-4b9e-b995-635b10cd00c1.png?alt=media&token=92019122-2df6-4196-8517-8d0070d696a8","id":"d4e1eeda-f3d4-4b9e-b995-635b10cd00c1","width":1606,"height":1184,"filename":"Improving Styling Image.png","type":"image/png","caption":"","border":false}]}
```

My first idea for Custom CSS, a small improvement to our builder to make targeting easier

---

### Research

* **From Customers:**

  * Key styling functions are ignored because they are inadequate / low trust

  * Coding ability is highly variable amongst designers

  * Chameleon can be a blocker to rollouts where multiple themes are required

  * Specificity is hard to manage

  * Customers have problems managing large amounts of Account CSS

* **From internal experience:**

  * A lot of building happens by duplicating experiences causing CSS to 'collect'

  * The most successful accounts are when designers come in and set up Templates

* **From my own experience redesigning experiences:**

  * I wasn't confident adding things to account wide CSS since that may affect other experiences and I couldn't confidently test.

  * I found myself wanting to 'apply' the style of a template on top of existing experiences.

  * Creating templates for every survey type is time consuming.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2F75ddab76-a5fa-4ea3-9253-cb457605e992.png?alt=media&token=327178a9-a56c-46a1-a2c8-248f0dc6ad23","id":"75ddab76-a5fa-4ea3-9253-cb457605e992","width":1004,"height":508,"filename":"Styling Improvement.png","type":"image/png","caption":"","border":false}]}
```

### **Refined Hypothesis:**

> The writing of CSS isn't the most pressing problem, its the management of existing styles.

---

### Early Designs

* First sketches:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2Fa270783e-c769-4023-b1de-6f35f51b8c6c.png?alt=media&token=c15d3bbf-d0fe-4bc6-94ec-2015b5b54cdc","id":"a270783e-c769-4023-b1de-6f35f51b8c6c","width":1910,"height":1020,"filename":"Improving Styling Image (1).png","type":"image/png","caption":"","border":false}]}
```

* Early concept of 'Themes':

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2F87f9b33f-254d-477b-9ba5-15d1bb263522.png?alt=media&token=9467f9f2-6e1b-47dd-8691-f8ac13540b14","id":"87f9b33f-254d-477b-9ba5-15d1bb263522","width":1132,"height":736,"filename":"Improving Styling Image (2).png","type":"image/png","caption":"","border":false}]}
```

* Set up continuous discovery around styling to talk to customers, show early designs and refine our understanding of the problem.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2Feddbd10d-3e6f-4223-a7f7-6a7daef7270b.png?alt=media&token=38080c1f-82ee-4691-9f15-05f1512256a4","id":"eddbd10d-3e6f-4223-a7f7-6a7daef7270b","width":2392,"height":904,"filename":"Improving Styling Image 4.png","type":"image/png","caption":"","border":false}]}
```

---

### The Messy Middle

* Design reviews with the product & design team

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2Fdfa01ce0-a899-4c11-bb1d-a6ac80a9adf5.png?alt=media&token=b53c65fe-d18b-4ebb-ba63-d40e104df5db","id":"dfa01ce0-a899-4c11-bb1d-a6ac80a9adf5","width":1446,"height":1540,"filename":"CleanShot Figma Beta from Russ Styling.png","type":"image/png","caption":"","border":false}]}
```

### A crucial detail

* My face on realising I had missed a crucial property of how templates were being used by customers:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2F20223e6c-314f-4fe6-ba8b-57e3855db5d4.png?alt=media&token=4b5519d4-2743-4b91-b6cb-8d67b2be8227","id":"20223e6c-314f-4fe6-ba8b-57e3855db5d4","width":498,"height":320,"filename":"Styling Improvement (1).png","type":"image/png","caption":"","border":false}]}
```

* Two paths were available:

  * Radically simplify the concept

  * Solve the problem of templates and themes interacting

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2F18bd1115-e45e-4d56-88ed-94ec1f98d6d0.png?alt=media&token=8abb8d76-0d70-4e42-a787-672075dae021","id":"18bd1115-e45e-4d56-88ed-94ec1f98d6d0","width":2000,"height":907,"filename":"Improving Styling Image 6.png","type":"image/png","caption":"","border":false}]}
```

> Finally, an inspired idea (from our founder during design review) led to a way around the problem of templates and themes interacting together.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2Fa17683ff-a7af-4ff6-b912-95bb76740ecc.png?alt=media&token=99adfd71-d83c-4496-8b48-b7b9e33c317a","id":"a17683ff-a7af-4ff6-b912-95bb76740ecc","width":2556,"height":1718,"filename":"CleanShot Figma Beta from RussBrown.png","type":"image/png","caption":"","border":false}]}
```

### The Slipstream

*A curious thing happens when the idea feels right, problems arise but so do solutions. Things starts to become obvious. Jason Fried describes this as 'good ideas have a slipstream'.*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FTWUHDubQtbSEsje0qA4hZf5hKfB2%2Fimproving-styling%2F636acbe7-8da8-4163-b0d0-8b418e423087.png?alt=media&token=a104bdcc-bf75-460c-8638-1bbf8980e37c","id":"636acbe7-8da8-4163-b0d0-8b418e423087","width":2322,"height":1488,"filename":"Figma Beta Spec Library 31.png","type":"image/png","caption":"","border":false}]}
```

One of the final screens for our new improved 'Theme Editor'

[Chameleon](https://www.chameleon.io/?ref=russbrown.design) - 2024

Improving Styling - Case Study

Product Designer @ Chameleon.io

CSS is hard for some designers to write, so lets make that easier.

* Initial idea was to create a better way to target CSS and later on to make writing CSS easier, possibly leveraging an AI co-pilot.

* Started to research and found a more complex problem.

Themes

I was the lead designer on a new freemium product for Chameleon which was built from scratch

HelpBar

Football Manager Card Game

Principal UX designer and lead front end developer on a complex analytics platform built from scratch.

I drove product improvements across every product line as well as undertaking service design to understand, collaborate and improve business function and align it closer to customer centricity.

Conducted user research to understand our users and worked to align development towards meeting user needs.

UX Designer & Front End Developer

* Designed a new freemium product (HelpBar).

* Redesigned styling and themes.

* Implemented continuous discovery.

* Led the growth team.

* Designed lots of features.

Product Designer

Built a design team from scratch and fostered a design led culture within the business.

Created and maintained a comprehensive design system.

Delivered high quality UX design from exploration and discovery right through to wireframes, user testing and final UI design.

Delivered the companies first user research project and data led personas to drive product direction.

Mentored and helped to enable fellow design team members.