Safemoon | Case Study

Published Feb. 29, 2024 by Jacob Smith

referenced version: web.archive.org

Website: https://safemoon.com

Disclaimer: This case study outlines my creative process for creating the SafeMoon website. The design process was basic and rushed with limited time in an attempt to keep the project alive. Despite that I'm being transparent.

Immediately, coming into SafeMoon was stressful. I was given plenty of information but the pressure was high because they were beginning to “moon”. Their traffic had spiked to nearly 200,000 unique concurrent users very quickly and their website had went offline because it was Wordpress.

The first design I made was written with PHP. It was my language of choice at the time and I had written a new framework prior that I wanted to use. I already knew it was fast enough to handle it, I just needed that validation so I took the gamble. It had worked perfectly but there's one oversight I didn't catch in the rush.

The API for some of the stats on the page were baked into the front-end, so each visit was making 5 calls back to the same script. Basically, this was causing 6x the normal traffic for each visit. 200,000 concurrent users where impacting the site with the power of 1,200,000 users and the server wasn't meant to handle that. It was only meant to handle around half of that. Lesson learned - don't be a moron.

This is when I begin to go down the rabbit hole of how to optimize and scale php and ended up just learning React and NextJS in favor of it's scalability right out of the box. After a few weeks of RND, the website was converted to NextJS and deployed on Vercel while the backend was deployed separately using NodeJS on a Linux machine. The issue was only occured randomly and was ableto be mitigated by blocking bots via Cloudflare. As a temporary fix for speed, we ended up removing all stats and API calls from the homepage.

The design process is actually pretty simple here. I'll be quite frank on this one. I'm not going to sway you with color theory, foundations, or sketch boards. For a background in design I don't have much except a natural artistic ability and years of experience, but that doesn't always translate well to web design. It's like having to learn how to draw all over again. It comes in small steps and a lot of practice. For inspiration starting out I usually just surf around on the internet until I find a general theme I want to go for and just start building components in that style until I get something together that flows well to the eye.

With everything from my block placements to colors and image placements, I'm attempting to draw your eyes down a specific path so it's easier to follow. It's a technique I learned while taking Art classes. Some artists use the technique on paintings, for example, to lead your eyes from one part of the piece to the next. This can in some cases allows the artist to invoke deeper meaning into their pieces. The idea here is to keep the viewer focused on the page and lead them along a linear path to prevent distraction.

Each section is also spaced consistently, with equal space between blocks so nothing out of place catches your eye and distracts you. I even compensate for optical illusions, adding or removing padding to make sure it appears even versus actually being even when measured.

Color selection here was also relatively painless. Using their logo color and paint, I just darkened the colors and played with the saturation until I found a suitable background color for a dark themed website that had a blue hue that wasn't too loud.

While I make this process sound fast, I tediously test all of my components for responsiveness, readability, cohesiveness, accessibility, and more. I do this as I build out a page instead of building a rough draft first then prettying it up later. This might mean I have a slower turnaround than some - but it also means I take more care in minor details to assure the viewing experience is pleasing.

My “rough drafts” are basically already polished, responsive, and QA tested by the time it's submitted for review to upper management. This actually eases the burden on both parties, because I don't have to go back and correct much of anything and the CEO doesn't have to stress with going over every little detail.

Of course my works aren't perfect, or anything “god tier”, but I'm dedicated, and with practice comes perfection.