🍋 Lotte Lemon Band Website

A virtual hub for an up-and-coming two-person band.

Lotte Lemon band website homepage

📖 The Story

Lotte Lemon, a band of two who released their EP in June 2021, had many plans for the future. Before releasing the EP, they were already planning for their first album and growing their social media presence. But when I interviewed them for the school newspaper earlier in June, they didn’t have an official website yet.

I offered to help them design it, and we sat down to work out the details:

Goals:

  • Hub for fans to get to know the band, listen to their music, and connect with them on social media
  • Marketing and means of contact for talent buyers, potential stakeholders and for PR opportunities

Target audience: Fans, influencers who might help them grow, talent buyers/stakeholders

Role: Designer (solo)

Tools: Figma

Scope: Homepage, biography, music, gallery, contact form

Results: An official band website for Lotte Lemon.*

*Currently, there is a completed high-fidelity prototype, but not yet a live website. Web development is in progress.

🪜 The Process (Overview)

  1. Product research
  2. Sitemap
  3. Low-fidelity wireframes
  4. Design system
  5. UI design
  6. High-fidelity prototype
  7. Next steps

🔬 Research

First, I drew inspiration from existing band websites as well as those that the client provided me with. I then identified common themes across the websites:

  • Navigation is usually on top or righthand side
  • Each website reflects the artist/band’s personality in terms of style
  • Unique fonts (e.g., handwritten), animations, artwork
  • Features: Music, gallery, tour, merch, social media links, contact/subscribe option

This research gave me a better understanding of what fans might expect from Lotte Lemon’s band website. Overall, I concluded that the band website should have a familiar structure and features, but that it should be unique in some way and reflect the personality of the band.

✍️ Design Iterations

I began by creating a sitemap so that I could arrange where each feature would fit in the website:

Lotte Lemon band website sitemap

Next, I created low-fidelity wireframes to lay out the elements on each page. I made sure to stick with a familiar layout so that the site would be easy to navigate:

Lotte Lemon lo-fi wireframes

🎨 Design System

After establishing the layout of each page and their elements, I was ready to decide what colors, fonts, and designs I wanted to use for the website.

Lotte Lemon design system

🖼 UI Design

I drew out the inspiration pages once more and referred back to my design system while brainstorming and testing out potential page designs. I started with mockups of the homepage until I was satisfied with the overall aesthetic, and then moved on to designing the remaining pages.

Lotte Lemon homepage mockup brainstorm

To give the website a unique touch, I focused on creating a navigation that is both familiar and different. I decided to try a circular navigation in the shape of a lemon slice:

Lotte Lemon navigation sketches

🌟 Results

Finally, I created a high-fidelity prototype and sent it to my clients. They gave me a few suggestions, and then I had three potential users test out the website for usability.

This is the final product:

Open in browser

💭 Reflection & Next Steps

Things I did well:

  • Established clear goals and expectations for the website with my client
  • Researched existing band websites and noted common themes to keep in mind while designing the website for my client
  • Maintaining familiar website layout while making sure it is unique to the band

Things I could have improved upon:

  • More user research — I could have created a survey or interviewed potential users to gain a better understanding of their expectations for the website
  • More user testing — I asked for feedback from a small pool of users, and I should consider doing more user testing to ensure that the website’s efficiency
  • The timeline could be more firmly established so that the website could be up and running as soon as possible

Next steps: Bring the website to life via Webflow or HTML/CSS

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store