Taking Furious Fur Online
Designing the E-commerce Platform for Furious Fur
Target Platform: Desktop, Shopify
Project Length: Three week sprint
Client: Furious Fur
Team Size: 2 UI Designers and 3 UX Designers
About The Client, Furious Fur: Furious Fur is a Toronto-based company that designs and produces high quality faux fur products that feel just like real fur. Their products are sold in retail stores world-wide and can even be found in The Bay. In order to expand their market, they want to take their business digital and start selling their products on the e-commerce platform, Shopify.
The User Personas
Our UX team put together some great user personas. These are the simplified versions, as this is a UI case study and we don’t need to go too in depth with the research and preliminary steps to the design process.
The Process
We began our work like very other project: with the why. It took a while to pinpoint exactly what the end goal was. We started with a really general statement: to get people to buy Furious Fur’s products. It made sense, but only covered a small portion of our end goal.
This website would have a blog section, social media connections, and a story. The e-commerce store would be the core of the site, but these other additions have a purpose too. This means that the end goal is not to only drive conversions.
The blog would be great for SEO and giving people context to the brand and their mission. The about page would tell the story of the mother-daughter team driving this company forwards to becoming a world-wide brand. The social media portion would encourage user engagement.
Our final version of the why statement is as follows:
To showcase Furious Fur’s products by creating an e-commerce platform where Furious Fur can communicate the brand, showcase trends, increase digital presence to ultimately drive conversions.
Because our client provided a thorough package of branding materials and guidelines, it was easy to complete our notes. The colour palette already had black, white, and gold in it, but our client was open to adding another colour. This mystery colour would be the focus of my mood-boards, but I’m getting ahead of myself.
Research
Our client gave us a list of direct competitors and our UX team came up with a list of indirect competitors.
I took notes of colour palettes, typefaces, and other visual features found on these sites. My goal was to put together some fonts and colour palettes that would make Furious Fur’s website look cohesive with other fashion e-commerce websites, yet still stand out as its own unique brand.
Our client had already provided us with the typeface, Champaign and Limousines. I ended up setting that font aside for another typeface.
You can read why I decided to ditch the Champaign and Limousines typeface here.
After a gut test, I learned that our client did not like the colour purple and preferred blue. It was just her personnel preference, but a good bit of information to note. Their current website had shades of purple, so I initially wanted to include that in my first style pitch.
Skinning the Mid-Fidelity Prototypes
I created two mood-boards. The royal blue board is based off of luxury and royalty. The wine-red board is based off of femininity and classiness.
Both boards include a gold like in the original colour palette we were provided by our client. Instead of black, I used a really dark shade of either blue or red. I dabble in digital painting, and one lesson I’ve learned is to never use straight black or white. Our eyes will look at colours in relation to its surroundings.
The dark versions of either colour I chose would be seen as a shade of black because of all the white space surrounding it. It wouldn’t be as ‘black-hole-ish’ on your screen as true black.
I went forwards and created my style tiles. The Royal Blue tile showcases the fonts Roboto and Helvetica. The Wine Red tile showcases two versions of Avenir. Personally, I preferred the fonts on the Royal Blue tile, but I wanted to leave the decision up to our client. Avenir resembles Champaign and Limousines, but is cleaner and more readable.
My UI partner also created two style tiles.
We took these four tiles to our client and let her mix and match what she liked. Using what she liked and disliked, we combined our tiles to create a final style that would be used in the creation of the website.
Using this small sample of the overall style, we created a full style guide for Furious Fur’s website.
By this point, the UX team gave us our mid-fidelity prototypes and we began skinning it. I won’t take you through the whole process of skinning because it was relatively basic. I only had one hiccup and you can read about that here.
Essentially, we turned what you see on the left into what you see on the right. If there’s anything I learned from this experience, it’s that I do not like Sketch at all when it comes to collaboration. Nooooo thank you.
The Finished Product
I’m pretty happy with the end product. It was our first project as a full team at RED Academy, so things were a little bumpy. That just means that things are only going to go smoother for the projects to come.
