case study
mojo surf camp
In collaboration with digital agency New Beach Co, I did some freelance work to redesign the product page of their client Mojo Surf.
This was short, sharp and extremely satisfying project as I had in fact been a client of Mojo’s myself as a surf student a few years prior.
As a lover of surf and surf camp culture, this was a dream project for me.
As almost a hackathon-style project, I was given 8 hours, no more, no less to answer the redesign brief and pleasently surprised the guys at New Beach Co with my output.
Deliverables
Desktop and mobile screens
KPIs
Bounce rate
Exit rate
Avg. time on page
Current state
In collaboration with digital agency New Beach Co, I did some freelance work to redesign the product page of their client Mojo Surf.
This was short, sharp and extremely satisfying project as I had in fact been a client of Mojo’s myself as a surf student a few years prior.
As a lover of surf and surf camp culture, this was a dream project for me.
As almost a hackathon-style project, I was given 8 hours, no more, no less to answer the redesign brief and pleasently surprised the guys at New Beach Co with my output.
Deliverables
Desktop and mobile screens
KPIs
Bounce rate
Exit rate
Avg. time on page
Current state
details
the brief
the context
Mojo Surf want to increase the conversion rate of their key products. They are not currently in a position to redesign their whole site and we feel that the easiest way to increase conversion is to improve these pages.
The pages need to show all the awesomeness that Mojo has to offer. That means using great images, punchy headlines, reviews, listed inclusions, experiences and more.
the ask
Paint a picture about why the Mojo audience should trust Mojo Surf and part with their hard earned cash.
Feel free to be flexible with any of the design elements of the page, but the logo and the primary colour (#ff0000) should not be changed.
Current product page
Mobile wireframe
Step 01
Internal discovery
In a normal scenario this would involve me talking with the client to understand their current state (why the website the way it is, design choices, restrictions, barriers, etc.) and their ideal future state. I’d ideally also look into the available analytics to identify areas of the site / page that were driving high conversion rates, time on site or had low bounce rates.
As this wasn’t available to me, I performed an analysis of the current state product page, identifying opportunities based on best practices.
Step 02
External discovery
Ideally I’d work with the client to identify key competitors they would like to emulate or websites they look to for inspiration. In this case, I took at look at popular surf camps across Australia and Europe to identify the trends, differences and websites that clearly communicate the brand’s mission.
step 03
Define
Defining the needs of the future state. In this case my early definition was the following:
Responsivity (ideally mobile first) with fast load time
Simplicty: there is a LOT of information to be conveyed on the product pages. Mojo experiences aren’t necessarily cheap (especially the surf instructor course) and so customers want to understand everything up front before doshing out their hard-earn cash. Also because the awesomeness of Mojo is best conveyed with real, engaging and inspiring images and video, these assets need to stand out. So, the layout needs to be simple enough that this content shines (i.e. well structured and a lot of white space)
Logical: As there is a lot of information, customers need to be able to logically move through the website and find everything they are looking for.
Exciting: Mojo is awesome and so should it’s future website.
04
design
I usually split design into a few steps, working closely with the client between each.
Low fidelity wireframes
Usually done on paper with a few options to choose from. This allows the client (or at least the design team) to discuss a few different options for layout before committing to a digital version.
Mid-fidelity wireframes
This is what I produced for this particular challenge. These are layout and content focused rather than asset & branding focused. Because of this, these wireframes are in grayscale with touches of the brand colour throughout.
High fidelity visual design
After a review of the wireframes with the client and after confirming on the ideal structure and layout of the page I would then add in either placeholder or reccomended visuals and more colour to the designs. This would be done with access to their assets on hand or an understanding of the types of images to be purchased.
I usually split design into a few steps, working closely with the client between each.
deliverables
feedback
“Thanks so much for doing this! We are really happy with what you have come back with. We went through it this morning and feel that the process and outcome is great. The way you have approached the task and skills you have demonstrated fit what we were imagining for this project really well. “
“I would rather die of passion than of boredom.”
Vincent Van Gogh