My role in the project
A bit of background…
Knog is a Melbourne based company who make innovative bicycle accessories, in particular, bike lights. They had some new products and wanted a whiz-bang way of demonstrating how to use them.
The new products were a range of modular bicycle lights aimed at cyclists who have specific needs based on their riding conditions. For example, a cyclist who only rode to and from work would likely only need a smaller light with a lesser battery life than a cyclist who rode in the mountains on a late Sunday afternoon. Generally, a cyclist would need to purchase two or more lights to get the most out of their riding experience, or they would only have one light that worked well in one situation and not so much in the other.
The new product range enabled a cyclist to purchase a set of modular lights, batteries, mounts, and accessories that would be suited to all riding occasions.
Knog wanted a way of displaying the new product range that would both wow customers and distributors — the idea was to create an online product configurator.
This was my first UX Design Lead role on a project of this scale, and I saw the challenge as both anxiety-inducing and exciting.
Anxiety-inducing because although I had completed a course in UX fundamentals, all of my applications of UX had been theoretical or ad hoc. The excitement came from the prospect of being able to:
- apply my UX skills in a formal manner
- gain valuable experience in the process
- learn from mistakes and in the process become a better UX Designer.
Getting my head around bike lights & configurators
Another challenge in addition to those listed above was the uniqueness of both the product and the brief. For one I had no idea what a modular bike light was and hadn’t encountered (from my memory) any examples of online product configurators.
“What the heck’s a modular bike light and more importantly, what the heck’s a product configurator?” I thought.
Fortunately, the client was able to explain the ins and outs of their modular lighting system, and they also had an example of a product configurator that semi-matched what they wanted.
Ready, set, UX!
Due to the requirements of the brief, I had two weeks to have high fidelity mockups ready to hand over to our UI designer and dev team.
Decisions, decisions, decisions… tree that is
One of the most vital aspects of the project that would equate to a better user experience was around the IA and how it was displayed visually, especially considering it wouldn’t include a standard top nav. I needed to make a clear decision tree that would not only assist the dev team but also help me stay on track with the user journey.
Rapid wireframing and prototyping
With some research and inspiration under my belt I was ready for some rapid wireframing and prototyping. How rapid? 7 days to be exact. 7 days of wireframing and prototyping in Sketch and InVision. Just to add to the degree of difficulty, I had never used either Sketch or InVision before.
I found Sketch easy enough to pick up coming from an Adobe background.
My favourite feature was the ability to create symbols that updated across every artboard with just one edit to the master. I did find that Sketch was heavily reliant on 3rd party plugins which were a little buggy at times. I also found the Sketch to InVision process to be a bit laborious. I installed Craft so uploading artboards to InVision was easy enough, I just couldn’t understand why Sketch didn’t incorporate a prototyping capability natively. *The Craft Prototyping feature hadn’t been released at the time of this project. I am yet to test it out - it looks promising though.*
Guerrilla usability testing
Up until this point, I hadn't been able to conduct any formal usability testing. So, I decided to do what every desperate UX designer does when in need of some usability testing… I called on my better half to give some feedback. Does she ride bikes? No. Does she understand what the benefits of modular bike lights are? No. Does she fit within my target audience? No. But desperate times call for desperate measures.
It turns out that I’m thrilled I did run my early prototype past her because she helped identify some major usability problems using her pair of fresh eyes. See, I was staring at this project for at least 10-12 hours a day — including time on the weekend — so I guess I was caught in that strange vortex where if you are looking too intently, you start to see things that aren’t there.
I came in to work the next day with a great deal of confidence to make some changes to some of the wireframes that I kind of knew weren’t working — but I previously couldn’t put my finger on it. Big shout out to Phoebe for your help on this one (probably won’t be the last time either).
Client and internal feedback
We arranged a meeting with the client to run over the wireframes and identify any possible requirements we may have missed. It was my responsibility to lead the client through the wireframes, explaining my thoughts behind my decisions and assumptions.
The feedback on the wireframes was really positive, both internally and from the client:
Quote from the client to our project manager:
“Talha – great job by team today. You’ve got us very excited.”
Quote from the project manager to me:
“Hey Matt, I just wanted to thank you for being an awesome member of the team. Really appreciate your amazing work on KNOG... We are very happy and so much confident to have you in our team.”