Redesign Woodland Website


Woodland is a shoe manufacturing company. The Aero group of US is the parent company of Woodland. The company was founded in Quebec, Canada. In 1992 it entered the Indian market, before which in mainly exported its leather shoes to Russia. Woodland is the first company to market hand-stitched leather shoes in India.

Woodland website redesign

Objective of Case Study

This case study explains how we re-invented Woodland as an e-commerce platform from its usual brick and mortar nature. It documents how we created the e-commerce platforms, all the challenges we faced and all the learnings we gained.


My Role

I was part of the design team and responsible for the experience strategy and design of the website. Being a UX lead, I was responsible for all the deliverables.


The Challenge

Creating an e-commerce platform for a brand that was typically into only the brick and mortar.

Our client approached us with two primary objectives — to design their website with e-commerce functionality and usability beyond their competitors, and to increase their sales.

To coincide with their launch of new and premium products, our team was under extreme pressure to move fast. We were tasked to deliver a responsive high‐fidelity prototype to our technical production team within 1 months. The combination of a fixed deadline, security testing, and usability testing meant I needed to get the experience right in the first week.


Problem

1. Woodland didn’t have an e-commerce platform because of which all its customers/prospective customers had to go to a physical store to buy the products.

2. Platforms like Amazon and Flipkart couldn’t list the entire product range because of which customers didn’t find their favorite products. Also, these platforms didn’t list the new arrivals frequently, hence customer couldn’t find the latest products.

3. The woodland official website at that moment was running on flash and the user experience was really horrible (since users have to install flash player)

4. Because of the lack of online presence, the sales were declining constantly.


The Process

Creative Workshop With Client

Before we start our research we thought it would be better if we can get exactly what our clients have in their mind regarding the structure of the website. To start the day we had our client to draw a rough wireframe of the website that they are looking for.
Then later that day we took an interview session with them in which we asked questions related to their brand, the colour that they think will look better on their website, most important things for their business and much more. It helped us to know what all are the important features of the website are.


The Discovery

What does woodland stands for?

The discovery phase was a quick, high‐intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client’s vision, and begin research into user needs, behaviors, and pain‐points. We also kicked off a technical discovery phase to understand feasibility and constraints.

Our research revealed that most of the users that lands on the website were not able to actually access the website as it was developed on flash and requires a flash player to be installed on the system to give access to it. Also, the website as per the mood of the brand wasn’t looking that adventurous or appealing.

After designating persona types and aligning this with our strategy we were able to prioritize who we would be focusing on supporting in the early stages. Phase 1 was focused on supporting the goals of our primary personas. We planned for later phases to support our secondary personas

User Persona

We made sure to use our personas throughout the project to guide design decisions, priorities and create empathy amongst the client and our team and to make sure that we are all on the same page.

We also got few key insights about their brand which helped us in visual design

Rough Look — Look of the website- nothing in sync

Adventure — helps to finalise kind of Images that we should use

Close To Nature — helps to finalise colours

Our persona hypothesis consisted of five different archetypes which we used to facilitate discussions about our user needs, desires and varying contexts of use. Through careful analysis of our research, we identified sufficient behavioural variables to segment our user audience. These variables could be categorised into activities such as frequency of accessing the website, activities they perform and motivations to buy the product online. We discussed the personas with our client to develop a clear picture of who the design of the website would target in phase 1 and later in future improvements.


Buyers Empathy

Tight timing meant that we needed to be efficient conducting user research and collecting feedback. It was really hard to select participants so we went to their store and asked people buying products in their store to take part in our research. Luckily we got few excited people out there that took initiative and help us to conduct our research.

We conducted a range of interviews with stakeholders, co‐workers, and friends. These varied research techniques helped to quickly gain insights into the needs of our users and gave us a concrete understanding of the environment and workflows.

The immediate next day I ordered a pair of shoes from reebok’s and puma’s website to actually know the psyche of buyer’s as what do they think while performing a transaction.


Visualising the end‐to‐end

We used experience mapping techniques to visualize and communicate the user’s end‐to‐end experience across various touch‐points with the website. This allowed us to represent user pain‐points and see where we needed to focus our attention. Mapping out the user’s emotions was key to setting client expectations about the aspirational emotional state we were aiming to design for.

Customer experience map


Combing through our research and brainstorming the different things people think while they access our website and even before buying a shoe. I categorised and segmented the tasks into behavioural affinities and aligned content and features. This gave me a way to visualise what existing functionality and content would be useful, what tasks needed supporting, what opportunities were available to innovate and also what could be discarded from the existing website.

Afterward, I entered all the ideas into a spreadsheet and prioritised them against our persona’s needs, tech feasibility, and business objectives.


The Framework

Setting the Design Direction

We took a top‐down approach to defining the overall structure of the experience. Sketching and storyboarding, I generated stacks of ideas about the arrangement of UI, functional and data elements, and interactive behaviours. Starting broad, our vision began evolving into something tangible. A high‐level design language, interactions, and the website’s anatomy began to piece together.

Early sketches exploring different navigation patterns for the app’s main screen.


Structuring the content

Once our client approved the content and functionality to roll‐out in the website, we started to structure that content. I used Jesse James Garrett’s visual vocabulary to represent the architecture of the website. Adopting a numbering system early was beneficial helping our team stay in sync.


Structuring the experience

After identifying the main ‘plot‐points’ in our scenarios, I defined the primary pathways our personas would explore through the website. Crafting several key user journeys for each of our personas, was the best way to conceptualise and structure the proposed content and functionality. I began to think about particular usage contexts, the opportunities they present and how elements manifesting themselves in the interface would help to support the user.


Defining the interactions

We decided to use Marvel app to communicate the website’s interactions and transitions. We decided to put micro-interactions on our website to give a feel to the user that he has performed a certain action.

Unfortunately, much of the interaction design work didn’t make it into the final product because it was considered ‘cosmetic’ and consequently de‐prioritised. Although I was quite vocal about the importance of transitions in helping the user maintain context while navigating and increasing the perceived performance, they were only re‐prioritised after Usability Testing.


Detailed Design

Few pages of websites


The Impact

The new site structure makes it straightforward for visitors to find important information and get drawn into exploring the new woodland collections, exhibitions, and events.

We saw a reduction in bounce rates post-launch, as well as a really impressive increase in e-commerce conversions.