Beppie

Background

Beppie (Stephanie Nhan) has been shaking up the children's music world since 2017 with her vibrant, multi-genre sound. A two-time JUNO nominee, she brings energy, creativity, and fun to every track, earning multiple accolades along the way.

When I was brought on to re-design Beppie's website, it was clear that her online presence needed to better reflect her unique brand and artistic identity. The site is meant to introduce her to new fans, showcase her music, books, and workshops, and provide a seamless experience for visitors looking to listen, purchase, or engage with her work. However, several challenges had been limiting its effectiveness:

• The user navigation and information architecture were unclear, making it difficult for visitors to easily find key content.
• Opportunities to highlight her activities, such as shows, workshops, and music videos, were underutilized.
• The initial impression of the site didn’t clearly convey who Beppie is or what she offers, highlighting the need for a redesign with a more focused and engaging layout that better represents her brand.
• Inconsistent design elements were affecting the site's professionalism and overall brand strength.

As a web designer, I collaborated closely with Beppie to enhance her website, ensuring that her vibrant personality and career were at the forefront. The re-design created a more user-friendly and cohesive experience for her audience. Working within the Weebly platform, I also supported the implementation of the new design to ensure it aligned with her vision, while making the most of the available resources.

Live site: beppiemusic.com

Target audience

The website caters to two primary groups:

1. Customers – including listeners, audiences, merch purchasers, and songwriting workshop attendees
2. Potential employers – such as media, press, and performance bookers

Research and strategy

Website audit

A website audit was performed to identify opportunities for improving information architecture, navigation, brand consistency, and SEO. The audit utilized tools such as Weebly’s built-in analytics, Google PageSpeed Insights, and Dead Link Checker to assess performance and usability. For brand consistency, a manual review was conducted to evaluate the uniformity of fonts, colors, imagery, and design layouts across the site. Additionally, a competitor analysis was carried out to identify industry trends, best practices, and opportunities to differentiate Beppie’s brand from peers in the children’s music industry.

Site map

I created a site map to outline both the current navigation and the recommended structure for improved information architecture. During this process, we eliminated and reorganized content, prioritizing the areas where we anticipated users would naturally go to find specific information. Following that, we made changes directly within the theme editor, with brand exploration planned as the next step.

Key recommendations

1. Enhance site structure and navigation
   • Create a site map: Define a clear site structure.
   • Simplify menu: Reduce main menu items from 9 to 5-7. Combine related sub-pages into a unified “Music” page.
   • Improve readability: Use readable fonts, appropriate sizes, and clear text hierarchy (H1, H2, H3).
   • Add clear CTAs: Implement engaging calls to action.
2. Optimize on-page SEO
   • Update title tags and meta descriptions: Ensure they are unique and keyword-rich.
   • Use header tags: Organize content with H1, H2, H3 tags.
   • Integrate keywords: Incorporate relevant terms naturally into content.
   • Enhance content quality: Improve and consolidate key pages like home, testimonials, and bio.
3. Fix broken links
   • Resolve 404 errors: Address all broken links identified in the audit report.
4. Improve accessibility
   • Replace text on images: Use live text instead of embedded text.
   • Add alt text: Include descriptive alt text for all images.
   • Ensure text scalability: Make sure text on images scales properly for different screens.
5. Boost performance
   • Optimize images: Compress and resize images to under 2 MB.
   • Reduce unused code: Minimize JavaScript and CSS where possible.
6. Ensure mobile responsiveness
   • Optimize mobile layout: Ensure the site is fully functional and readable on mobile devices.

Discovery & design concept

A discovery board was created to explore design concepts for Beppie’s brand to be reflected on the website. It included examples that Beppie liked, as well as designs I identified as fitting her brand. The goal was to ensure the website conveyed a kid-friendly vibe while reflecting Beppie's edgy, fun, playful, and relatable personality.