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.
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:
- Sketches / Low-fidelity mocks
- First pitch
- Final pitch
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?
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.
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.
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.
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.
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.
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...
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.
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 muted green, 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.