UX Case Study: DJ Lani Love’s website redesign
Background
With 19k Twitch followers, 8k+ Instagram followers, and partnerships with countless high-profile brands, DJ Lani Love is a prolific DJ with a vast following across the world. Lani came to me looking for a website refresh to match her rising success.
Discovery
First, I conducted a discovery call to learn about her goals. I learned that she wanted to attract more deals with luxury brands, particularly in fashion. She also wanted to create a schedule that would make it easy for her fans to find upcoming events.
I asked her to send a few examples of websites she liked. I then annotated both her website and the references she sent, keeping an eye out for elements I could incorporate into her design.
Original Design & Annotations
Inspiration
Looking at the references the client sent, I picked out a few common themes:
- Bold, punchy color
- Strong, brand-driven imagery
- Large text
- Ample white space
Lo-fidelity wireframes
Knowing that the audience would include both potential clients and fans, here are some of the improvements I made from the original design:
- Borrowed John Summit’s hierarchy in the navigation to direct potential clients to the most important areas of the site
- Added client logos to the front page above the fold, prioritizing those most similar to the client’s target brands
- Used a more recent photo as the hero image and allowed it room to breathe against white space
- Moved socials from the bottom to the top of the page so both clients and fans could stay updated
I then brought these up to mid-fidelity and shared them with the client for feedback (as well as a 3rd wildcard design):
After the client decided to move forward with Version 1, I got to work on bringing it up to high-fidelity.
Final design
You can view the full website live here: https://djlanilove.com/
I built the website in SquareSpace and decided to go with a dark mode color palette with bright accents to emulate the look/feel of nightlife. I made sure to keep the bold colors to reinforce Lani’s brand while also creating enough white space to draw the user’s eye to the right places and avoid visual clutter.
Using custom HTML and CSS, I added animations and ensured the homepage didn’t scroll on any device so that the brands would always remain above the fold:
To add some dynamic branding flair, I pulled imagery from the client’s custom Twitch emotes (that grew organically from her fanbase) and merch. Using royalty free images and Adobe Illustrator, I created background assets to separate sections on the scrollable secondary pages:
Testimonial
“I wasn’t proud to share my website until Cat redesigned it. I linked my website out to promoters following the redesign, and since then, I’ve booked to open for Sofi Tukker, Megan Thee Stallion, Twitchcon, and Society of Women Engineers’ WE23, the world’s largest conference for women in engineering and technology. They definitely browsed the hell out of my website and social channels cause they referenced it a lot.”
Takeaways
This was one of my favorite projects I’ve ever done because it allowed me to not only make structural improvements but also play around with visual design using an established brand. The client and her community had already built up such a strong visual language through other media like Twitch and Instagram; she just needed to translate it over to her website. I felt very honored to be the one to make it happen!
I was a little nervous about my ability to translate my design from Figma into SquareSpace, but I was pleasantly surprised by how much customization I could achieve with HTML/CSS and Adobe Illustrator (and lots of Googling). There’s something very satisfying about seeing a vision come to life in a way that is both visually striking and highly functional.
I’m looking forward to working on more projects like this!
