My role in the project

UX Design Lead
100%

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.

 

 

The Challenge

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.

Looking at the Aiaiai configurator (in case you were wondering it's pronounced "eye-eye-eye" ) I could see the idea that the client was trying to convey.

 

 

 

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.

 
The Knog user journey map

I put together a quick user journey to help get a clearer idea about what steps were going to be involved. The head of UX was also there for me each step of the way as a guide and mentor.


 

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.

Knog decision tree
 

 

Research & inspiration

Before jumping into wireframing, I spent time researching other configurators and some of the UI/UX patterns they incorporated. There weren’t many great examples out there but here are a few that I referenced:

Renault car generator by Boris Petrovitch Njegosh

This is purely a static mockup of a Renault Car Configurator by Boris Petrovitch Njegosh that I referred to for some basic layout and UI inspiration. I was drawn to how he heroes the car by keeping it centred on the display - presumably, the parameters and buttons would remain fixed to the edges of the screen and scale responsively.


Tailor Store shirt configurator

Tailor Store offers an extremely comprehensive shirt configurator with over 100 options to choose from. I used this example to guide my decision making on how the options would display - in particular when options become incompatible based on the user’s selection.


The Ford Mustang configurator

The Mustang configurator is a great example of what can be done with WebGL. We did discuss the possibility of using WebGL for the project; however, the timeline and budget wouldn’t allow for it so we said it could be a phase 2 feature later down the track. I like how the annotations occur around the car.


The Ruff Cycles configurator

I really like the way the virtual camera zooms in and out on the product depending on which component you click on.


Photography mapped

Although not really a configurator, this interactive website shows how adjusting parameters can result in live changes on the page. It’s a pretty clever concept to teach the principles of photography too!

 

 

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.*

Wireframes
Wireframes
Wireframes
Wireframes
See the full working prototype in InVision.
 

 

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.”