Freelance WEB DESIGN
Cosmic Wax Studio
The story of a brand & website redesign overhaul for a local small business!
Role
UI Designer
Graphic Designer
Platform
Web, Tablet, Mobile
Tools
Figma, Illustrator, WordPress, Square, Zoom, Google Drive
Timeline
16 weeks
Project Overview
This redesign was unpaid, taken on for the purpose of gaining experience working with a real life client and content management systems to create a website the owner would love!
Client information, planning, original site analysis, site map
Moodboard, sketches, and logo work
Style guide & sticker designs
Page format & design iterations with usability testing
Promotional materials & final designs
Next steps & lessons learned
Discovery & Definition
The Client
I met Katie Gaebe, owner of Cosmic Wax Studio, through an instagram group page for members of the LGBTQ+ community living and working in Austin, Texas post-COVID quarantines. The community was rebuilding the social atmosphere with small, COVID-conscious activities that introduced me to her and several of our mutual connections. Many of these mutual connections are clients of hers that heavily endorsed her work. When I first learned she had her business, I visited Katie’s studio site to consider booking her services. I remember just being curious and had been unimpressed with the site, so much so that I actually navigated away from it and did not end up booking.
While I was in UX/UI Design bootcamp, we were tasked with finding a small business to offer free design work for the experience of going through a redesign plan without actually implementing the design. I worked in a group setting on another local business’ square site (another friend I met through the same group, you can check out the process here!) and it got me thinking about how I would approach a real redesign campaign.
As I approached the end of my school, I reached out to Katie with a proposition: in exchange for allowing me to showcase the process and present the live site for future employers to interact with, I could redesign her website at no cost. Katie was thrilled at this offer, as she herself did not like the website a friend set up for her at the launch of her business two years prior. In fact, she disliked it so much so that she did not link any social media or her Google business account to it! Yet she was still paying for the domain and hosting! She did not know where to start to improve it, nor did she have the capability to do so. Furthermore, she no longer felt her the logo and branding materials represented the business.
At our first meeting, we discussed brand identity and how a new look would help her communicate this identity to her clients. While Katie was very flexible when it came to design choices, she absolutely wanted her website to clearly communicate the overarching goal of her business: to provide a safe space for clients of all walks of life, demographics, and identities to receive waxing services. For many of her clients, these services can be gender-affirming and in general contribute to a boost in self-image. It is an intimate process and therefore the comfort of her clients is essential to the success of her business. It was vital to her that clients specifically within the LGBTQ+ community know they are safe and celebrated in her studio. Additionally, her services are uniquely priced at one rate regardless of gender, which sets her apart from virtually all other waxing studios.
From this meeting, I gained a greater understanding of the importance of Katie’s work, her business values, and identified several goals to accomplish through this redesign.
Project Goals
Clearly communicate her studio's mission & goals on her website
Design a home page that includes the studio's value proposition front and center for users to see right away.
Create a new branding kit for the studio's social media presence
Design a new logo and style guide for her to use in Canva for the studio's instagram.
Personal Goals
Before launching into the project, I outlined some goals for myself as a designer and what I hoped to gain from this project. I felt this was necessary as a means of measuring personal success at the end.
Gain a better understanding of WordPress and Square
Many small businesses utilize Square websites and technology and even more websites are hosted by WordPress. These are powerful tools for me to get to know and add to my skillset!
Create custom graphics & merchandise
I am a painter and graphic artist, so it was important to me with this collaboration that I exercise not only my skillset with UX and web design, but also that I might create designs that represent the brand in print material.
The Plan
After meeting with the client, the next step was to create a plan of action. I created an analysis of the original site with screenshots of each page and annotated areas for improvement for accessibility and navigation, defined a site map and proposed an improved version, and created a value proposition. I presented each of these materials to the client for feedback and finalized edits based on the feedback.
The timeline for the project was not rigidly defined for several reasons, the primary being I was still finishing projects for my bootcamp that had to take priority. Additionally, she felt that she was not in any rush to have a new site up and running as it was not something she was presently using and we wanted to create some hype on social media around launching a new site that included some promotional materials. In this way, a waterfall approach was used rather than an Agile method. We felt it was best for the project to follow this course because the website is an informational source to usher users to the site they would actually book through and while we expected iterations and some changes after the launch, we would not be developing new features to test after launch.
Original Website Analysis
Landing, About & Services
Booking Service
Testimonials
Style Guide
Site Map
Ideation
Once the information architecture was finalized and I had a plan of action, I moved on to my favorite part of the design process. During the ideation phase, I practiced moodboarding and played around with style choices informed by the client’s brand identity. Katie is a very body-positive person and expressed desire for illustrations on the site that reflect a wide range of body types and demographics. With this in mind, I found illustrations and pictures of different, realistic bodies to use as inspiration. Additionally, I considered how Katie’s astrological sign could play into the design since the name is “cosmic.” She is a triple cancer (sun, moon, and rising signs are all Cancer) so she is ruled by the Moon, according to this school of thought. It therefore felt fitting to explore representation of the moon by incorporating circles and rounded edges into elements throughout the website.
Katie also identifies as a lesbian and her favorite color is pink, so the lesbian pride flag color scheme seemed like a fitting color palette that is easily identifiable to folks in the LGBTQ community. However, there was not enough contrast between the colors to pass accessibility standards. The dark blue was added to create this contrast and maintain accessibility for all users.
Moodboard
Sketches & Early Logo Iterations
Design
Style Guide
Some small easter eggs I put in this style guide include the use of the font named Bitter. It is a visually appealing font when paired with Open Sans and happens to be the name of a famous song written and performed by popular lesbian icon Fletcher.
Illustrations
Below are the final versions created in Illustrator of the sketches I made on Sketchbook on my iPad. I wanted to capture many skin tones and body types. Since Katie wants it known that her studio is an inclusive space for LGBTQ+ community members, I felt it was necessary to include some subtle top-surgery scars in the depiction of the chest for the chest & torso services menu. The ring around each drawing is meant to be a nod both to the moon and the rings around planets in the cosmos.
Wireframes
Lo Fi Figma Mock Ups
Iterations
The website was already using WordPress, so I installed and started using Elementor to construct new pages.
Home Page
The first iteration was constructed based on the design made in Figma. While I tried out the same design with a “Welcome to Cosmic Wax Studio” like typed out, I decided I really wanted to showcase the logo. The same tagline used on the original site was added to the right, with a call to action button to book an appointment. This was important for returning clients who already knew what services they wanted to book and would want come to the site specifically looking to jump right into booking. The point of the website, after all, was to usher users to the square site bookings page. However, I realized the full hero image did not translate very well into a responsive layout and it was not intuitive that there was more to the page below the fold. Additionally, the client gave feedback that she wanted more of the color palette highlighted in the design. I played around with the dripping effect and gradient, leading the eye down the page and subtly indicating there was more than just the hero section. Ultimately, the gradient with orange at the top and pink at the bottom was selected due to the high contrast between the navigation elements and low opacity transparent header.
Services Page
Ultimately, the client liked the look of the header taking up nearly the entirety of the viewport with text over the gradient. The font was increased for readability against the gradient background. At first, the copy highlighted eyebrow shaping as a service under the category of waxing but Katie asked that instead her specialty 15-minute Brazilian waxes be highlighted, as it is what she is known for and also brings in more money for the business than eyebrow waxing does.
The menu design went through even more iterations from the starting mock up in Figma to ultimately how it is featured on the live site. Due to the client’s preference for a longer gradient header, the design was made simple and clean underneath for emphasis on the service information and not overwhelming design.
Contact Page
For this design, I reached out to several designers in my UX/UI Design Certificate bootcamp to see what they thought of each design. I wanted to incorporate all of the elements – actual contact information, a map showing where the studio was located, explicit directions to the studio, and a picture of the building the studio is located in. The directions were created based on a text message the owner sends all clients who book as a way to cut down on how many new clients reach out after failing to find the studio. It is located within a salon suite style building with no signage for the small business.
The designers and client all agreed – the second design was the strongest with a map view on the side and the pertinent information stacked on the left. Everyone agreed that it was easiest to read a column of information with limited words per line as opposed to a large section.
Before launching, I went to the studio and snapped a new picture of the building since the owner changed the name recently and the storefront looks a little different than the one used in these test designs.
Formal Launch
Final Designs
You can interact with the final designs of each page by following this link to the website! It is up and running as of September 22, 2023. Below is a preview of the responsive design of the home page.
Promotional Materials
The client has a premium Canva account that I was able to utilize to add in the style guide kit and make promotional materials for her instagram account to post in the days leading up to the new design launch.
Merchandise
Square Site
Edits to the Square page were made, although much customization was limited due to the account not being on their premium plan. The client wanted to continue using this booking page separately from the WordPress site, as this account was how all of her business is tracked.
The new logo was added, changes to the font and buttons were made in accordance with the style guide, and the correct hours of service were updated in the system. Additionally, services were edited for consistency (all prices have a display with a $ where previously many services were missing this sign) and reordered according to popularity. The client liked having services on the informational site (WordPress) ordered from head to toe but specifically wanted her specialty Brazilians and pubic area waxes ordered first in the bookings site for her regulars to find easily.
The hardest part of the design process was choosing between all of the options I was presented with, they were all done with such care and dedication.
– Katie Gaebe, owner of Cosmic Wax Studio
Conclusion
List of work produced
- New logo
- Style guide & new Canva branding kit (all graphics, logos, colors, and fonts uploaded for easy use in the studio Canva account)
- Favicon
- Merchandise designs + studio Redbubble account
- Promotional materials for website redesign launch
- Frequently Asked Questions, Services, Products, and Contact pages
Impact of Redesign
The greatest impact this redesign made was on the confidence of my client to link the site to her Google Business account and social media links. Before, she had not liked the site and linked everything directly to her square site bookings page, with little brand identity presence or details about the business besides the services and prices.
Katie can now direct new customers to a website that clearly communicates what she does, who she serves, and what kind of business she aims to run. This is so important to building her brand and gaining new customers as well as returning guests. The joy she expressed at being able to use what she has been paying for the last two years (domain and hosting) to achieve these goals gave me such a sense of pride in the work I was able to do for her.
Additionally, the goals outlined for the new website and materials were exceeded. She now has all the branding materials needed to create consistency in her online social media presence and show customers her business is the real deal!
Lessons Learned
This was my first project as a freelance UX/UI and graphic designer after my intensive bootcamp. I had the opportunity to improve on many skills while working on this redesign, as well as teach myself new things in order to best serve my client.
I spent countless hours researching how best to build specific parts of the site, how to use plug-ins like UpDraft, and even how to search and replace lines of code to be sure everything was working properly. While I had some familiarity with WordPress going in, I had to learn the ins and outs of Elementor to create a website that is responsive across desktop, mobile, and tablet. Additionally, I learned how to set up a Redbubble account and edit designs for optimal print usage.
My biggest challenge during this process was also my biggest asset - owning every step in the design and implementation of this project. I not only had to dream up the concept but then bring it to life through a content management system. Ideally, in the future, I want to learn how to code it using HTML and CSS. I found that I got to learn parts of CSS through building this site, as I worked and reworked so many customized sections. Getting to know WordPress y was a personal goal I set for myself through this project that I believe I met, as I am much faster and better at building from designs than I was prior to working on this project.