IT'S-DIRTY-WORK Created with Sketch.

AUSTRALIAN WEB AWARDS WINNER!

DirtyFeet Website Devices

TESTIMONIAL

Anthea Doropoulos
Director

DirtyFeet
www.dirtyfeet.com.au

The team at MOBLE designed and created our entire website and we could not have asked for a better fit. MOBLE focused on the stunning dance photographs we pride ourselves on and utilised all we had to offer.

It was a privilege to work with such an experienced company who listened to our needs and created a website like no other in the dance industry. MOBLE is extremely professional and efficient and it was a pleasure working with them. I would not hesitate to recommend them.

DirtyFeet 10 Years

The Villain


Any redesign process comes with the creative challenge of working with the same material, while you need be reinspired to redefine the story and present a new lease of life. This challenge can be compounded when you are redesigning an Award Winning Website Design. It can often be compared to much music where the follow-up album, often dubbed DSAS (
Difficult Second Album Syndrome), is hyped before it begins only to set up the inevitable anticlimax.

With DirtyFeet about to celebrate their 10 anniversary, the brief was to reflect the company over the last 10 years and honour people that have contributed to its success as a staple Sydney performing arts Not for Profit. It was important to DirtyFeet that the design did not sway too much from the original, and would use many of the same images as our first design.

Another point to be aware of was that their original content editor, well versed in MOBLE CMS, would be taking an extended break and the company Director would step in to learn the CMS. While having a creative eye, using a website content management system would be an all-new design experience.

The Hero


We were aware of all the Villains and the challenges were set. With a strong brand identity and many similar images, it was clear that we should rely on many of the technological advances on the web over the last four years to modernise the website.


LOGO RETOUCH

We decide to have fun with some of the shapes from the logo. The logo was only available in a flat png file. We realised that if we remade it as an svg we could create a Javascript animation to light up each square (as seen at the top of the page).

We extended the logo to make an entirely new Font from scratch. By doing this we could then use the animation in any text as whenever we required it. Here you can see it used for the company slogan "It's Dirty Work But We Love It', placed in the footer next to the Donation Form, to bring attention to donations at the close of every page.


ACCESSIBILITY STANDARDS

We had approval to slightly lift the colour of the Yellow to make it pop more on black. However, DirtyFeet is a dance organisation for people with and without disability and the website would need to conform to accessibility standards. While the new yellow was great on black, yellow text on white can have legibility issues. We decided that the text links must always be yellow and therefore we would use the traditional darker yellow with bold on white, offering a pleasing contrast.

DirtyFeet Logo Macbook
DirtyFeet Menu Drawer iMac Small
MENU DRAWER

It was decided to strip back the navigation into a Menu Drawer, this would give a more contemporary minimal feel.

MENU BUTTONS

The workshop data defined the navigation. We opted for Buttons to link to the four main parts of the organisation. Button labels like ‘View’, ‘More’, ‘Go’, are unimaginative, and are often less important as a call-to-action than the Button itself. We decided to have some fun and use one of the company maxims ‘Get’, ‘Your’, ‘Feet’, ‘Dirty’ for each of the button labels, which was a nice way to bring some character to the Menu with an almost rhythmic charm.

PAYMENT FORM

Given that on MOBLE you can build custom Menu Drawers, anything is possible. We decided to include a two-step Donation Form to receive secure online payments via Stripe. This was rewarding for the Not-for-Profit as they could hint at donations with every new page click, in a subtle, non-aggressive manner.

PARALLAX DIRECTORY

It possible to create elements of parallax from inside the MOBLE visual page editor. We opted to have some fun by creating some choreography of our own and bring motion to the directory. We opted for a scrolling parallax effect where the dancers would scroll over each other at different speeds.

Dancers are added and removed frequently depending on the season, so we designed the effect in a way that could easily be controlled by DirtyFeet, without any assistance, or without any code.

DirtyFeet Parallax Macbook
DirtyFeet Devices

The Happy Ever After


The website has been well received by both DirtyFeet and their community. Given that we were about to coach the company Director on how to get around the MOBLE tools, we decided to use the opportunity to remake the MOBLE Help area by documenting exactly how we made the DirtyFeet website from start to finish.

The Series is called ‘How to make a Website like Pro’ and is available on this website here:

HOW TO MAKE A WEBSITE LIKE A PRO


If you’re an existing MOBLE client, or about to sign up, this Series is everything you need to know to design, build and grow your own beautiful revenue generating business website.

Thanks for reading this case study. We'd really love to make your business an online success. Please ask to speak with me today, and we'll happily provide you with a free quotation.

Paul Davenport,
Managing Director

HIRE MOBLE!