Manhattan ballroom
dance studio

Manhattan’s largest ballroom studio

Manhattan Ballroom Dance Studio

Manhattan Ballroom Dance wanted an updated version to their website.

Issues that arose were:

  • Clients found it difficult to navigate through the site.
  • Lack of clientele
  • Slow on Rental space
  • Content Management
  • Copywriting


The aim is to create a responsive website that shows type of dance services along with community building.


Strategy / Responsive Web Design / Front-End Development
Platform: Wordpress


Looking at existing content and site flow with users reaction helps in the beginning process of solutions.

When discussing MBD’s business goals, we really listened for the underlying value they wanted to provide to their clients/students and dancers. The ideas were a bit ambitious from MBD which was great for all the different paths we could take but we advise them to always remember it’s about the user. Caring and providing value, eliminating a problem that their customers would have. We focused on how to increase more student signups and based the user experience around it.

Structuring around the Experience

During a conversation with the manager, Steve at MBD, he spoke of different scenarios of a new student wanting to try out their classes or attend a private lesson. I created a simple storyboard based on one of the personas created scripted by Steve.

Structuring Content First


Before starting any design, time was taken making sense of workflows and existing content. Since MBD’s existing site lacked organization, task analysis and card sorting work was done to create a simple navigation. Mapping out the workflows was challenging because of the myriad of ideas the MBD team had.

Visual thinking on Paper


In order to help understand the ideas of the MBD team, I visualized them on paper. Doing so helped me to understand the particular points to simplify that would be beneficial to the user and administrative staff. I often refer back in order to make quick changes along the design process.

Annotated wireframes arose from sketching many concepts which ensured a more cohesive design. It helped me showcase ideas to collaborate with MBD where minimal changes was made and quickly moved into design.

Hi-fidelity Mockups

I used Sketch to create sets of detailed mockups. This approach was beneficial in showing MBD design progres.

Prototyping and Usability Testing

I brought the designs to life as a working prototype using Invision.

Then testing requirements face-to-face and discussing constraints and possibilities was an effective way of solving the Interaction Design.

MBD on Desktop

MBD on mobile