TB new CS background.jpg

Taylor Brown

Designing an e-Commerce website for a local shoe store maintaining its identity

TEAM

Solo

FIELD

UI/UX

YEAR

2020

DURATION

2 weeks

THE BRIEF

Provide a competitive e-commerce website for a local shoe store. The goal is to maintain the small shop appeal while cultivating a wider audience.

During the second project of our General Assembly UX design course, we were asked to create a website for a local business during a 2-week design sprint. As it was only the second week, we were instructed to leave it to mid-fidelity, so after the end of the course I went on this project and I brought it to high-fidelity, also applying on it everything that I ignored when I created this project.

TOOLS

WHO IS TAYLOR BROWN?

The local business in question is Taylor Brown, a fictional shoe store that opened its doors in 1982 in Shoreditch. The shop has always catered to the neighbourhood and its strengths are a carefully curated inventory and a great customer service.

THE SOLUTION

To understand the role of e-Commerce today user interviews weren’t enough, they would just give me one side of the story, I needed to know what brings people to shop more or to stick with a brand more than others, and users wouldn’t be able to answer very well as they are not always aware of these techniques running in the back.

I also had to create an e-Commerce website while maintaining a small shop appeal. After reading about what works and what doesn’t, I thought about how to achieve this. I did it by giving the store an identity through a curated selection that customers could browse, interaction through social media, and the promise of a quick answer to problems by adding a WhatsApp number for quick messaging.

I wanted the store to stand out but feel familiar at the same time. When it comes to spending money, users have to feel at ease and find the website reliable. That’s why I took extra care in creating a checkout system that would be as clear as possible and to which customers could easily relate to something they had seen before.

To have a look at the screens scroll down here or have a look on Behance.

 

Research and Competitors

E-COMMERCE TODAY

I thought it was important to get more information on the state of E-Commerce today, concentrating on the UK market as that’s the one that this store would be concentrating on. Some stats that I found were interesting

WHO IS THE COMPETITION?

For the competitors, I decided to concentrate on established British brands as Taylor Brown itself has been opened for almost 40 years.

LET'S ASK THE PEOPLE FIRST

I started looking at some of the key features of these brands. Most of them do offer the points from the Drivers for Online Purchases above, except for a loyalty program. I decided that to give Taylor Brown a competitive edge I should give this option. I later corroborated this during the user research.

I decided to take into consideration all of them except for Next-day delivery as it would be harder for a small business to achieve and I left the sustainability aspect as something do to later on down the line.

Another fact worth considering is that:

80% per cent of your future profits will come from just 20 per cent of your existing customers.

$1.6 trillion per year is lost by businesses when their customers decide to switch.

Before getting a complete idea I needed to talk to users as well; people that shop online, asking their process, why they shop online instead of in-store, what are the things they'd like to change about online shopping, and what would make them stick with one store instead of another.

I started with guerrilla interviews with some people I found browsing in shoe stores around Shoreditch and then proceeded with some 1-1 interviews, taking into consideration the whole spectrum, seasoned online shoppers and e-Commerce sceptics. 

A very easy interface is one of the most important things when it comes to e-commerce websites.

Most users tended to go back to the same website or store, not for loyalty, but for convenience; they already trust them and if they found something they liked there once they feel they will be more likely to find something else again.

Everyone was annoyed by shipping fees and would look for the same products somewhere else with free shipping. 

WHO ARE MY USERS

I love creating Personas, it’s the step in the process where I can finally stop using the impersonal “users” and start making life easier with people with a face and personality. Granted, I gave them that face and personality, but I like to make them into people that would actually exist and that could benefit from this product.

PROBLEM STATEMENT

Michael needs a way to find a website with good recommendations for his shoes because most website have a too wide selection and he feels overwhelmed

Defining the Problem

 

SO WHAT'S THE PROBLEM THEN?

Everything I found so far helped me define the problem Taylor Brown might come across in finding new customers and retaining old ones.

We are all creatures of habit, whether we realize it or not and we rely on our own experience to influence our purchasing decisions. So it is of the essence to make any experience for customers an experience they'd want to repeat. The best incentive to make them think about it, it's a reminder they have money to spend with you through a loyalty program.

To increase trust in the store, one of the best options would be reviews about the items, which 3 out of the 6 stores I considered have, and a section where the customer can upload their outfits with the purchase, this would help feel the reviews more authentic.

Targeted recommendations accordingly to previous purchases and wishlist are also important. In time these recommendations would also need to be sent via email, not straight after buying something, but at the right intervals of time to make the customers want to buy something new again.

BUILDING THE FOUNDATIONS

I was finally at the stage where the architecture of the website was appearing. Most shoe stores online will have almost the same categories to divide shoes, but I wanted to check if this method was actually the preferred one for users. I did it through card sorting, where I took all of the inventory and had people tell me where they would expect to see every item on that list.

The categories that came out where what I expected and what most websites would display, so I went ahead and sketched a sitemap. In the card sorting exercise, brands and shoe type seems to be equally important, so I displayed both

I also thought that Taylor Brown should have a curated selection. Using catchy name seemed to be a nice way to get attention to them.

 

Tackling the Problem

SKETCHING

Once I had all of these pieces together, it was time to sketch. Starting from a low-fidelity prototype that would only give a vague idea of what the final product would look like, into mid-fidelity wireframes.

For this project, we only had to bring them to mid-fidelity, so I spent some time once the General Assembly course finished to bring it to high fidelity.

 

During every step of the project, I had the wireframes tested, taking notes of all the feedback and making changes accordingly, sometimes it wasn't easy to let go of a feature I had come up with and I thought was valuable, but hearing that I should change something repeatedly was definitely a red flag.

During the mid-fidelity testings, I asked the users to go through the checkout process and let me know what was their first impression of the homepage.

I also wanted to know they could always find more than one way to go back and forth in the website (Menu, breadcrumbs, footer etc..).

The part that needed more iterations was the checkout process:

According to SaleCycle.com, the cart abandonment rate (CAR) and checkout abandonment for retail are 75% and 41%, respectively. Checkout flows around different websites are similar and even a slight change from what the user expects could result in the user not trusting the website.

THE SMALL SHOP APPEAL

The main point on the brief was not losing the “small shop appeal” typical of Taylor Brown.

I researched what was the best way to achieve this, both through user research and looking at what had been done before.

An easy step was featuring a small history of the store on the homepage.

Interviewing people working in retail, I found out that a common practice for stores with strong customer service is using WhatsApp to chat with clients. It is mostly used by loyal customers to ask whether a certain model is available. As most people would consider inconvenient to call a store to ask whether they have a model or size, so this would solve that issue.

Another step to give an identity to a store is giving a face to its customers. On the homepage, Taylor Brown is featuring customers tagging the store in their Instagram posts.

STYLE GUIDE

I left this project at Mid-fidelity and I came back to it after the end of my course.

It was beautiful to see how much I had learned in those months and it was only natural that I wanted to change a few things to what I had done.

I kept the main structure, it was after all the results of the research I had done and that was still true.

I started experimenting with new layouts and tested them to see if they would be more effective than the old ones.

Even recreating new prototypes, I maintained the same Scenario I was given in the brief.

SCENARIO

A local resident is looking for inspiration for his girlfriend who loves fashion and is wants some great shoes to wear on holiday for her birthday

 

The Final Wireframes

Prototyoes.jpg

I hope you enjoyed reading it as much as I enjoyed working on it

Thanks for your time!

Say Hi!

I love chatting over a cup of coffee.

(or over Zoom)

Drop me a line and I'll get back to you :)