This is an interactive guide showing the steps of how the 'Travellers Trims' service works. The majority of the assets were created in Adobe Illustrator and completely animated in Adobe Animate (Flash).
A title card appears before each step, with a simple description of what to do, giving context to the viewer.
Step 1 – Book Haircut Appointment.
Continuing will have a hand holding a smartphone appear requiring you to click the ‘Book Appointment’ button on the phone. Once clicking the button, the other hand will animate pressing the button too.
Step 2 – Select Your Location.
You’re required to select the Home icon.
Once clicked the animation plays of the barber travelling to your location. The Home icon changes to Joey’s face and glows around the edges. The moving Barber icon has a circular pulse around it to emphasize that it’s actively moving.
To make it a bit fun I made the Barber go all the way round the round-a-bout.
Animating this red line to appear, especially the dashed part, was painstaking. Seeing the result I believe it was worth it.
Step 3 – Select Your Hairstyle.
I made nine different hairstyles that you can choose from. Like a character selector in a game. Changing to a different hairstyle will have him looking up as the eyes and eyebrows are animated, to give him more life.
He looks up to see his hair every time you change the hairstyle.
Step 4 – Show off your new Haircut.
Which ever hairstyle you chose will have that hairstyle in the dance animation.
I accomplished this by duplicating everything in the scene nine times along the timeline and changing the heads.
The dancing animation itself could be better but I’m happy with all the other animated elements like the lights, star disco ball, speakers and the jumping audience.
Ending the animation with a call to action to get new customers visiting the website.
Overall I really enjoyed this project, I put in a lot of work in to get all the ideas to work and I'm happy with the end result.
