MY ROLE
In this project, I was co-responsible for the experience design and delivery of the responsive website together with my ACD. For the consecutive implementation of the e-commerce solution, I was the sole lead presenting back UX solutions as well as visual design and leading prototype reviews.
Our small and agile team consisted of a visual designer and a front-end developer, with weekly connects with our offshore BA.
This was the project that saw the light of our office’s “new ways of working” - rapid sketching, twice weekly connects with the client and moving as quickly as possible into tangible deliverables in the form of fully functioning HTML prototypes.
THE CHALLENGE
DISRUPT THE INDUSTRY BY MAKING US UNIQUELY DISTINCT
Goodlife was a few weeks into rebranding and still struggling with where their new identity would lie. They needed to work fast and start the redesign of their website while the brand was still “in-flux” and came to us looking for a partner that could still progress the work of the website and simultaneously help them identify their strengths and unique value proposition and stake out the steps to market disruption.
THE APPROACH
THE POWER OF CADENCE -
OUR RAPID "SKETCH-TO-CODE" APPROACH IS BORN
OUR RAPID "SKETCH-TO-CODE" APPROACH IS BORN
To be able to work alongside Goodlife’s tight timelines, as well as keeping everyone transparently part of the journey we completely changed our own “ways of working”. To work faster we threw away the traditional steps of wireframing and annotating in favour for high-level, messy sketches and collaborative brainstorming sessions. In these sessions we would discuss everything from experience micro-interactions and technology constraints to design and layout so that by the time the session was over, everyone had a good understanding of the direction and we could just get right into designing and coding.
We also ran twice weekly sessions with the client. On Tuesdays they would see a set of key pages that aligned with a key journey sketched up and we would discuss and adjust the solution together with the client until we knew we hit the right direction. On Thursdays they would then see this experience in a working HTML prototype for final rounds of feedback, while also providing feedback on the next set of experience sketches. And so we worked, until the entire website was complete.
How did we know what, and how do design? We had done our homework by conducting stakeholder interviews, immersing ourselves with real gym members and conducting a series of strategic workshops.
The "War Room" where we ran our sketching sessions as well as twice-weekly meetings with clients.
There's nothing better than being surrounded by the research and all the designs for inspiration.
The steps we took were:
1. UNDERSTAND THE CHALLENGE
We started with interviewing a wide range of stakeholders across member acquisition, member communications, IT and brand, as well as people working within the clubs and at headquarters.
We also looked at current trends and research within the category as well as across other category verticals.
2. UNDERSTAND YOUR USERS
We wanted to understand the members of Goodlife and what their needs, goals and behaviours in respect to their health was, so we conducted 31 interviews in 12 hours across a selection of different inner-city, suburban and flagship clubs.
A snapshot of some of the members and Personal Trainers that we spoke to.
3. ARTICULATE THE VISION
Our key insight from the research and interviews was that health is essential to happiness, but motivation is impossible to maintain alone. Goodlife should therefor be about maintaining energy and inspiration from the people around you.
To achieve this we crafted the Organising Idea Support energising connections at every stage.
4. PAINT THE PICTURE
Given that we’ve learned that the experience of going to a gym can be very different depending on the level of support you feel around you, we took a Service Design approach to our journeys and mapped out not just the member, but all players involved, as well as key touchpoint across all devices.
Service Design journeys - Visualising the future experience for our member personas, with secondary personas also playing their part.
5. SEE HOW IT FITS TOGETHER
The persona driven customer journeys showed us what kind of experience we were after, and mapping out the Information Architecture (IA) helped us see how it would all fit together. We also conducted a Tree test study to validate the IA as well as the labels and nomenclature proposed.
Information architecture and Treetesting results to understand what performed, and where improvements lies.
We also benchmarked this result with the existing IA to track improvements.
6. FROM SKETCH TO CODE
Over the next few months we workshopped and worked closely with the client to craft an engaging and powerful experience that each of the Goodlife clubs could own and translate to bring their unique atmosphere alive and build a supportive community around their members.
7. PROTOTYPE, TEST & PUSH LIVE UPDATES
From experience sketches we went straight into a fully responsive HTML prototype that covered the entire experience from consideration and research all the way to signing up for a membership and 12 week challenge online. We tested the solution across both mobile and desktop and incorporated feedback from users live into the prototype - allowing us to show a new version of the experience to each and everyone of our test participants..
THE IMPACT
NO MORE WIREFRAMES OR ANNOTATIONS!
During this project we completely reinvented how we worked, not just with each other in projects but also with clients. Cross-functionally, transparently, and FAST.
Removing the time-consuming steps of wireframing, annotating and running check-point meetings freed up time for brainstorming, team collaboration and ideating, but most importantly provided tons of creative freedom for the visual designer and the front-end developer to let their skills and creativity flow and truly own the execution of our ideas, without being too tied down in the wires.
