Systemising Visual Assets

USER INTERFACE DESIGN

As part of a new offering, we introduced additional paid user tiers and as a result needed to gate certain features on our platform. This is a case study on how we developed the design of the cards to create a modular and customisable design that could be used across teams.

Starting point

My team was the first to pick up the task of gating features and these were some of the initial designs that I came up with. I was working with the designs of each page and they weren't very cohesive

🧭 Exploration

We decided that there was a need for us to bring more fun into the design.

Visual Treatments

We tried out different visual treatments, colours and background colours. As this was an up-sell at the end of the day we wanted it to be loud enough but not to distracting to the user.

Layouts

There was a desire to show off more features if possible so we played around with various other ways we might show more in a smaller space.

✍🏼 Stakeholder management

A big part of this piece was that it was something that not only Product but also Marketing had a vested interest in.

We put together a document where we tried to show how we would use these cards and highlight the opportunities for including Marketing copy.

We tried to show how we would use these cards and detail the opportunities for including some Marketing copy.

We also featured how this card could be heavily customised and that we could create pre-canned copy and mock-ups for different features that could be pulled together to create these cards.

🎨 Final

As the cherry-on-top we had a request for more cohesion with the marketing site so we drew on some of the graphic elements to add to our final design.

Notion Version