PopStar Booty Camp's Brand Refresh

Putting the "POP" back in Popstar Booty Camp with a logo and website face-lift.
Image of computer showcasing portfolio  about page

Project Type

Logo redesign

Brand strategy

Web redesign

Team

Carol Johnstone

May Sermonia

My Role

Logo designer

Web designer

Tools

Notion

Procreate

Adobe Illustrator

Google Slides

Wix

Overview

Intro

PopStar Booty Camp is a dance group like no other in San Francisco, CA. Founded in 2014, Carol Johnstone helps dancers from all levels learn the choreography of their favorite pop star music video in an 8-week dance series and perform it at a bar or as a flashmob.

Problem

PopStar Booty Camp's existing website appears outdated and dysfunctional which makes for a bad user experience and ultimately bad conversion rate for new prospects.

Goal

Revamp branding with new combo mark, color palette and web layout for enhanced brand awareness, improved user experience and increase in prospect conversion.

Design Process

When I partnered with Carol on this project, it was important for me to understand what her pain points are and catalog the timeline, scope of work, and project details via Notion.

Competitor Analysis

no image
Sketch of website architecture

Information Architecture

Since I knew that Carol would be the person who will manage the website, I wanted to keep the site map simple for her to navigate and easier for users to skim through. As an MVP (minimum viable product), I opted for having only a home, about, services, and contact page. Since Wix charges a transaction fee, we both agreed that all purchase links would be directed to Eventbrite.

Wireframes

PopStar Booty Camp's previous website's home page was oddly formatted and didn't have a good user flow. As a designer, it is important for me to guide the user through the website so that they can get the context they need while also making it a pleasant experience.

Home Page Highlights

  • Promote classes
  • Direct users to other pages of the website
  • Provide testimonials
  • Create opportunity for newsletter signup

About Page Highlights

  • Showcase history, mission and vision of organization
  • Introduce team
  • Highlight media features
  • Integrate Instagram page for user interest and validation
  • navigate user to services page

Services Page Highlights

  • Present all service offerings
  • Explain each service in depth with complimentary media (ie youtube videos)
  • Convert users to purchase a class

Contact Page Highlights

  • Allow users to inquire about media partnerships, questions about programs or connect with Carol/PopStar Booty Camp
No items found.

Branding

Color:

A pink and yellow color palette (analog colors for additional design needs). The pink and yellow together created a lot of visual energy and a pop of color that could be grab the attention of users. Also, since most of the dance classes (at the moment) are female popstars, the pink aligns with the notion of femininity as well as fun.

Logo:

As for the word mark, I went with a bold typeface, Birra Stout, that is almost reminiscent of the Hollywood sign which alludes to the "PopStar" theme of her program. Additionally, bold typeface either all black, or all white would allow for better visibility and contrast when applied over videos or images on her social media posts.

No items found.

Hi-Fidelity Wirefames

You can view the staged website here and the live website here!

No wireframes available.

Closing Thoughts

This was an incredibly fun project for me to work on. As a dancer who used to take classes with PopStar Booty Camp, I'm happy to help promote the programs in a meaningful way. I was also able to learn a lot throughout the process.

Key Take-Aways:
1. There's no such thing as a "bad tool".
While I realize that Wix, a great tool for beginners and non-technical users, has significant limitations when it comes to web responsiveness and design consistency across all pages due to its "absolute-positioning" layout functionality. To solve for this, I readjusted the layout to be within Wix's grid guidelines and created components that would allow to easy repeatability and maximum efficiency. In the end, believe there's no such thing as a bad tool, there are just tools that challenge you to be exceptionally creative when trying to solve problems. :)

2. Ask the right questions.
Branding can be a tricky thing for people to navigate. Especially when it comes to something that feels as personal as a logo. When I was working with Carol on her refreshed logo, the Brand Strategy Toolkit was incredibly helpful in exploring the current state of her branding, what she hopes to achieve with a refreshed logo and words to help articulate a visual direction.

3. Outcomes > Aesthetics.
Design is more than making things aesthetic– it is about partnering with people to achieve outcomes in an accessible way. Which, to me, is more a satisfying and efficient way to design. I was able to practice how to communicate my design thinking, document my thinking process and incorporating input from stakeholders like Carol!