Mar 22, 2022
🍋 Lotte Lemon Band Website
A virtual hub for an up-and-coming two-person band.
📖 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)
- Product research
- Sitemap
- Low-fidelity wireframes
- Design system
- UI design
- High-fidelity prototype
- 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:
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:
🎨 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.
🖼 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.
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:
🌟 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:
💭 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
