We want you to have the best experience. As such, we highly recommend viewing on a desktop/laptop.
If you are currently on your desktop/laptop and see this message, increase the width of your browser screen. Thank you!
Indochino Website Redesign
2015 was a significant year for the brand and business of Indochino. As the lead UX designer, I had the opportunity to work along side the creative and development teams to bring my mockups and design to production. This case study is an overview of the redesigned homepage, collections pages and navigation bar.
Homepage Metrics & Analysis
I worked with the e-commerce team, stakeholders and business analyst to uncover the key requirements for the homepage redesign. We meticulously analyzed customer insights and user behaviour through tools like Crazy Egg and SessionCam. I also researched our competitors and took note of their unique features or lack thereof.
Wireframes & content strategy
After research and gathering requirements, I sketched up wireframes to share my vision and content strategy with the rest of the company. It was weeks of iterations and negotiation of features for the homepage.
Our highest priority was to ensure content was shown above the fold to increase engagement by increasing the number of access points to our most popular collections and products on our site. As well as, display our value props and first-time discount offer for new customers.
I worked with the creative team to find the best assets and content to display on the homepage. I worked with the e-commerce team to showcase the most popular and highest converting products. I worked with the marketing team to add retention and value props. I worked with the development team to bring my design and mockups to life using tools like Sketch, Zeplin and Flinto.
The Homepage Result
I used tools such as Sketch, Zeplin and Flinto to communicate the aesthetic and interaction to the development team. I also worked side-by-side the front end developers during our QA cycle to ensure the production design aligned with the design specifications.
The design increased the traffic flow into more collection and product pages. It also increase the number of subscribers for retention marketing. And implementing a homepage content management allows the e-commerce team to change the homepage quickly based on seasonal or special promotions.
Navigation Bar: Out with the Old
The Indochino navigation bar was dated, had limited access points and did not display some of our company's initiatives such as our showroom and wedding pages.
New Navigation: In with the New
The navigation bar project was worked on the same time as the homepage and collection pages. After gathering requirements with our stakeholders, I wireframed and mocked up designs based on competitive and common design pattern research. The idea behind the redesigned navigation was simple - easily navigate to any page, collection or sub-tier page from one area, rather than having to click through multiple pages to find what you want.
Old Collection Pages
The old collection page were dated aesthetically and lacked functionality. We were missing basic e-commerce functions like colour or pricing filters. Working with the marketing team, we also discovered our suit assets looked "cheap" compared to our competitors suits.
New Collection Pages
We implemented common features found on many e-commerce websites like filtering colours, patters and pricing. We also introduced a filter switch that enabled users to compare suit fabric side-by-side - this was by far the most engaged feature on the pages.
We changed the aesthetic, dimensions and overall look of our collection pages by introducing full body image assets, from head to toe. This required a complete overhaul with how our creative team shot products during photoshoots and deliverables. A dimension and web style guide had to be produced, which was done on my part.
I learned a great deal working with different teams rather than directly with the stakeholders and product owners. It took a lot of research, patience, analysis, meetings, iterations and effort to get everyone aligned with the same vision.