Designing Lightrank

LightRank is a web application, monitoring platform that provides key metrics and solutions for site performance, SEO, accessibility, and security. I was hired on to design a landing page for them so they could launch.

Scroll

Project details

LightRank had zero brand identity and needed a landing page to launch with. That's where I came in. I designed an identity, a landing page, and created illustrations.

Tools used:
My roles:
Branding
Illustration
Web Design
Branding
Illustration
Web design
“Kate was able to establish a brand identity and direction for LightRank even when only provided with a few minor details about the product. She not only accounted for my personal taste in web design and digital aesthetics, but took it ten steps further by helping me vocalize what I wanted [needed] through prototyped animations, illustrations, and high-fidelity mockups.”
—Wesley Chang, creator of Lightrank

A branded, redesigned landing page

My main deliverable for Lightrank was a landing page, mocked up and prototyped in Adobe XD. I decided to go for a "loud" minimalistic look. I did this by adding in bright pops of green, creating sharp lines and page cuts, and playful illustrations.

Creating at the speed of light

Now that I have set the scene with a pun, I can begin. This project was difficult enough as a one-woman show, but was even more trying under the deadline of a few weeks. To prepare accordingly, I organized my process as such:

  • Research
  • Sketches & low-fidelity mocks
  • First pitch
  • Iterations
  • Prototype
  • Final pitch

Research

With hardly enough time for research, I dedicated a couple of hours to market study instead—what are competitor's sites doing? While I may not have the resources to gather data and perform A/B tests, other companies do'; why not learn from them?

My findings

I noticed that each landing page I visited, data visualization was everywhere. The visualizations were bright, large in scale, and took center stage. Makes total sense as a monitoring platform. Unfortunately, Lightrank was relatively new and did not place as much focus on their data visualization. With not much to use on a visual side, I had two options: 1. Use illustration to get the point across, or use what Lightrank did have. After discussing with Wesley Chang, the creator of Lightrank, we decided to go the visual route.

Sketches/Low-fidelity mocks

Now you may be asking—why are these two combined into one phase? While I usually would separate them, I simply didn't have the time. My point of this phase was to have something to present to my client so we could move forward with the process. The sketches were more for me to get thoughts of out my head, and then I would dive head first into low-fidelity mocks.

First pitch

With something created, I could now put something in front of my client that we could talk through. By using Zoom, we could have a natural flow of communication without the annoyance of emails and slack messages.

Iterations

I think iterations are one of my favorite parts of designing. Seriously. Yes, I know it's an unpopular opinion; but I love that I can look back on something and think "I thought THAT was good at one point?" It means that I'm growing. And I would rather be embarrassed for a little bit over a design that I realize is bad now, than be a bad sport about revision cycles and stay stagnant. Here are a few of my favorite iteration moments like that from this project.

The header

Version One

Oh, boy. I wasn't kidding about the embarrassing part. At the time, I thought fluid shapes would work well, hence the blob behind the illustration. I even tried to spice it up with some floating circles. I thought I would add in a highlight of green in 'Create your free account', but I should have highlighed both words (free account) if I was set on that route. Spoiler alert: not good ideas. I even somehow managed to squish the aspect ratio of the illustration somehow... Well, ya live and ya learn.

Final Version

This is leaps and bounds better, in my opinion. A few reasons: the diagonal cut makes the header feel more organic, the simplified illustration helps everything breathe more, and the change of the color palette makes everything feel crisper. Speaking of color palette...

Color palette

Version One

We thought a pop of green against neutrals would make Lightrank feel more tech. Which, we were on the right path there, but the burgundy was killing it. Such a bummer of a color next to something so saturated.

Final Version

I approached the revised palette by asking myself: where else will we be using these colors? I knew that the bright green would be used in CTA buttons and anything interactive—but I didn't think about where the burgundy would go outside of illustration. By balancing the bright green with another green with less saturation, we had more versatility in placement. Plus, this simplified the palette in the way we hoped it would.

All in all

This project taught me a great deal about client communication and the importance of iterating.