Logo and Website for Duddy Performance

I brainstormed a bunch of logos on my ipad, which we narrowed down to two, and finally picked and edited the winner. Here's what I was thinking about during the process:

The company initials: D and P.The lowercase letters 'd' and 'p' are the same shape, just rotated. How could that be used in the logo to create a combined form?

Performance... Performing Arts? The name Duddy Performance on its own could be confused as a performing arts company at first glance, and we don't want that! How could I evoke a sense of movement, improvement, or strength into the logo to make sure people understand it's a fitness company?

Multiple Contexts! Would the logo look good at multiple sizes and ratios? I created a couple different versions.

I created other brand elements and colors based on the idea of movement, fitness, and strength/cardio training.

Shapes. I used the rounded edged lines in her logo to create what I call the 'interval hill' shape for her website. Notice it behind her and her employees in the coaches sections below! I also rounded the smaller dimension of images to mirror this element as well.

Colors. Liza had one request for her brand and that was that it included teal in some way. I chose colors that would go with teal and evoke a sense of energy and fitness. The highlighter yellow, or chartreuse, felt especially energetic, and worked surprisingly well.

When I first designed Liza's site, she was the only employee in the company. As her company grew, her coaches section and about pages needed to be updated. Here's how I tackled these changes:

From one to three: Instead of one static section describing Liza, the second version of the coaches section and about pages would need a little more thought. I put the coaches next to each other in a row, and on the about page, added a tab functionality to see details about each of the coaches' qualifications.

Three to four and beyond: What worked for three wouldn't work for four because there wasn't enough space horizontally to make it accessible. For this iteration, I implemented an accordion functionality on the about page, and instead of dynamically placing coaching images on the home page, I left the space for a group photo instead. Because Liza didn't have a group photo at the time we made the change, I arranged their headshots in a single graphic instead.

I wanted to give Liza the ability to maintain her own site in a simple way. I started by giving her documentation to help her access and change the text and images in the Wordpress siteI designed for her, but by the time she needed changes made to her site that she couldn't do on her own, I convinced her to migrate her site to a newer, more easily maintainable, and natively secure platform, Webflow.

Webflow allowed me to develop the site in one mode, but gave her a different editor to make changes to copy, CMS content and images.

This project occurred over the course of 5 years. In that time, my skills as a designer improved and I've learned so much when it comes to accessibility and best practices. Here are some of the changes I've made as the project progressed and I continued working with Liza.

Typography. I learned that the Primary and Secondary fonts I chose on the first site were too similar to warrant having two. When I rebuilt her site in Webflow, I removed Poppins as the secondary font and stuck with Montserrat throughout the site. I also learned a few things when it came to typographic hierarchy.

Purple. Or lack there of. The bright purple in her brand colors felt out of place and didn't have a clear use case as a highlight color, so I removed it from her palette when I migrated her site to Webflow. The result is the site feels much more cohesive.

Accessibility. I learned so much when it came to accessibility. Some of the main things I implemented were descriptive alt text for images and contrast between the typography and the background colors.