Black Sheep Cycling is an Australian brand dedicated to creating sports garments for cyclists. And it’s not just any brand. BSC is a supplier of sports garments for the Olympics.
Now, BSC had come up with a new child product that was going to be something very different from what they have usually done. This was going to be a house of custom sports apparels for cyclists. And here is the big part: the entire customization could be done right on the website by the user.
In case the user would like suggestions, INK’s experts would be willing to do the customization for them. These end users included both individuals and teams.
So, here begins the journey of INK’s design.
Challenge
Now, INK planned on making life simpler and more interesting by allowing garment customization on the website. The mechanism behind it was to be managed by Kit Builder.
One look at the API, and we were concerned about how to match KB’s visuals with that of INK. However, after a few rounds of discussion with the KB team and with John Polson, the founder of both Black Sheep Cycling and INK, it became apparent that while Kit Builder had some good restrictions in terms of changing the CSS, we were allowed to introduce a little amount of styling to it. So, a couple of iterations finally led us to an output that agreed with both Kit Builder and us.
Discover
INK’s target audience consisted of professional cyclists – both individuals and teams.
This could be translated into the fact that they did not have much time to go through lots of information on the website before starting the garment customisation, especially when they are requesting bulk orders.
So, the website had to be to-the-point and yet attractive enough to resonate with a brand that was as large as supplying for Olympians.
Define
What is INK made of? What is its personality?
- Sports
- Cycling
- Thrill
- Adventure
- Passion
- Big
- Australian
- Subtle
- Premium
As obvious from the keywords, INK is both “happening” and “subtle”. The idea was to make a cocktail of these keywords through bold use of colours and strong typography but keep it all simple.
Design
A very simple and subtle layout is what we had envisioned, consisting of not more than a bold text that conveyed INK’s message, a little about their garments and a list of products – simple and to-the-point.
Sketch & Wireframe
Happily enough, John, wanted the same. So, without further ado, we processed to put more life into our structure.
Homepage
The original logo consisted of a water drop (or an INK drop) beside the brand name. The icon was later changed to BSC’s “head of a sheep” to prominently mark its connection to the mothership. And then there was the customisation of KitBuilder’s API.
KB visuals
INK is different. Then why let the same layout tell every chapter of its story?
We decided to have different layouts for every content page, which would definitely be in sync with the homepage but would have a vibe of its own. Doing this would not only allow every piece of content to have its own flavour but would also break the monotony of the ever-impatient user.
Inner pages
Animation Ideas
There wasn’t much room for animation in the case of INK. Too much motion would ruin the subtlety of the brand.
We created an animated jersey that showed what options one could get with INK in terms of customization. This was provided to the development team in JSON format to reduce size and thus loading time.
How It Works
On the home page, we had also suggested a small movement of the garment and the text at the top that would sync with the cursor’s movement. However, John said that it might make the entire thing “too much”. We gave it a thought and decided to drop the plan. Perhaps he was right.
Post Production
INK was originally designed to be developed as a Shopify website. However, it ended up being a fully bespoke WooCommerce platform. It was a big challenge for both the development team and the KitBuilder team as none of them had ever worked on such a big integration before.
As the team that conceived INK’s online structure, our non-stop cooperation with the development team, the KitBuilder team and John continued until the website was deployed, and even later.
The role of a designer never ends!