The Dance Box web design case study focused on re-working and improving an existing dancewear store website. It was an individual project where I was able to practice optimizing the user experience and improve the platform’s efficiency. Using Figma, I redesigned two full desktop pages and their mobile versions.
COMPARISON
ORIGINAL
NEW
ORIGINAL
NEW
ORIGINAL
NEW
Design Process
My main focus for this case study was improving the existing site’s navigation, spacing, and layout. I also wanted to condense the website content and remove redundancies to clean up the overall look and feel.
LANDING PAGE - DESKTOP
LANDING PAGE - MOBILE
I simplified the nav bar and footer to include only the necessary information. The footer now displays social media icons, links, an email CTA, and store info such as location addresses and hours of operation.
The layout was improved by increasing the number of products in each row, reducing the padding, and slightly increasing the white space between rows. The buttons were also updated, using rounded corners for a more modern feel.
ABOUT PAGE - DESKTOP & MOBILE
For the about page, a hero image was added to give the landing page a sense of consistency. The layout was again improved by reducing the padding on the sides. I wanted to use the brand colours more in this new version, so I decided to add small pink borders around each image. Finally, the alignment of the text was greatly improved as well.
Typography & Colour
The improved website's typeface, DM Sans, was chosen because it is clean, simple, and great for use in smaller sizes. I used a range of weights throughout the pages to ensure good layout structure and hierarchy.
The original colour palette was maintained as per the project brief. However, I find these colours to work well with the company's brand identity, and provided good contrast and visual interest.
Conclusion
Overall, I think this project went well, as I was able to implement the changes I had planned. If I had more time, I would have liked to redesign more pages as I enjoyed the process as a whole.
