New Dribbble Shot

New GraphCMS Website Design

GraphCMS Website


Since I was hired at GraphCMS in late 2018, I have slowly but surely been taking over responsibility for the Website. It's of course, a team effort but is now led by me. I write copy, design, and then code any landing page resources we need.

A TL;DR of some things I have accomplished so far with GraphCMS:

  • Research, copy, design, code for 24 landing pages in 8 months.

  • Learned from scratch very technical topics such as webhooks, GraphQL (queries, mutations, fragments, subscriptions, etc), how to build the pages in React (GatsbyJS).

  • In progress: I've been leading the team in a full brand, website, and product redesign to align with our newly structured business goals.

A few pages where you can see my work live include:

Working on the website, I harness Figma, and Framer as my main toolset. For anything that will be converted into code, I use Framer as it forces me to be mindful of code constraints and allows me to remain consistent with our design system. For anything to do with vector illustrations, I use Figma as its much quicker and robust for drawing.

The impact that I've made while being at GraphCMS is tremendous as the first full-time designer. This also means that I need to serve as a jill of all trades, filling in where necessary by generalizing. As the company grows, I have voiced my opinion and started delegating web development in favor of web and product design.

The latest project on the GraphCMS website that I've led is the full redesign.

The project is still in progress, but here is a little sneak peak into the process and where we are at. We started with a Miro board, which I cannot stress enough is a game changer in any kind of brainstorm/collaborative work. In a 3 day design sprint, we were able to brainstorm and shortlist on all major changes to the GraphCMS brand, and therefore website. These main pillars included: Logo Color palette Illustration style Iconography Typography (Headings, body, and code) Brand promises (essentially to be more mid-market/enterprise friendly) Mission statement: To enable forward-thinking teams to build future-proof experiences at the highest velocity. From those pillars, I started iterating on logo variations, color palette possibilities and more. I was very adamant that we should focus on the atoms of the brand (like the color palette rather than composition) and therefore gave variations in order to detach from the exact composition.

These are three of the color variations that I presented to the team from the shortlist:

The first stayed very close to our current brand, which reduced the risk of jarring our current users too much, and loosing the brand recognition that we've built up until this point. The color palette is darker which is comforting to our target customer(a development manager), while retaining an approachable cheerfulness.

The second and third were slight variations with the similar variations of the primary color. These new colors had a possibility to support the brand promises and innovative spirit that we wanted to instill with the rebrand. One color way goes in the direction of blatantly cheerful, where as the other in a more melancholic direction.

Ultimately we decided to combine the two directions and add a third coral color into the familiar and updated purple palette.

In these screenshots, you can see the work that went on behind the scenes of interpreting the brand decisions. This entailed the cleaner more open layout, product based illustrations, abstract icons, and the new content structure.

This is a work in progress and will continue to be for a while. The post will be updated as progress is made.