Applying user research to a small e-commerce website — a UX case study
How I used contextual research, user interviews and user testing to help redesign an old e-commerce website.
TL;DR;
Atelier de Camisa is a small shirt tailor with an online customizer. Through contextual research, user interviews and user testing, I gathered data about context and user behavior and delivered a comprehensive report of the findings as well as an interactive wireframe prototype. Practices that usually would only be used for larger products but that worked out beautifully for them.
Context
Atelier de Camisa is the oldest fashion e-commerce website in Portugal, dating back to 1998, and born after a tailor shop with the same name. The website works as an online customizer for tailored shirts. At the time of this project, it had seen a few redesigns but the current version was over 7 years old.
Problem
Despite its great PageRank, thousands of monthly visits and being a helpful tool for client acquisition and follow-up purchases, the shirt customizer had a very low conversion rate.
Several potential causes had been pointed out by the client and some users, such as the complexity of the process or its’ length. But these and other assumptions about the user’s behaviors and context had to be validated.
Goal
How might we improve the user’s experience, so that we attract new users and the conversion rates increase?
Process
Through contextual research, user interviews and user testing with the existing platform, I intended to:
- Document the offline and online purchase processes;
- Understand the usage context and user’s needs;
- Discover what worked well and bad with the current website.
Results and Deliverables
A comprehensive 9-page report with key conclusions regarding the user’s context, intention, and interaction patterns, drawn from 6 interviews with both clients and non-clients.
An interactive wireframe prototype which included dozens of fixes to problems found during research and solutions to speed up and improve the interaction.
Status
Finished. Awaiting for development to end and for the final launch to test results.
Intro
—
I remember doing design used to be jumping into an empty canvas and convert inspiration into creation. Needless to say that this process resembles more to the work of an artist than of a designer.
“Design is the intentional solution to a problem within a set of constraints. The most significant constraint is what you think you’re solving for.”
Like many of my fellow designers, it took me a few years until this was completely clear for me. I have worked many years as freelancer, in a studio, at an agency and clients don’t always want to pay for research work. What the public expects from you are expert answers! But fortunately times have changed.
It had been a while since I had done a project on my own but when I was approached for this project, I knew it was time for me to put some new skills in practice. Here’s a brief description of what happened.
Stage 1 — Contextual Research
—
It was early July and I was having my third meeting with the client. This time we met at their store so that their tailor could guide me through the tailoring process, just as a regular client would be.
She explained me things like how the choice of the fabric could affect the final look and feel of the shirt, how one should choose a specific collar model to use a tie, among other scenarios. All the info I had up until then was mainly analytics data and a few assumptions, so learning how and why clients were buying their shirts was crucial for me to learn about.
I was asking all kinds of questions when, unexpectedly, a new client came in. Immediately I decided to step back and sit on a couch, eavesdropping on the conversation between him and the tailor.
He fitted the description of the personas I had so far: a middle-aged man, with a liberal profession and, in this particular case, needed a shirt for his daughter’s wedding. He had no previous experience with tailor-made shirts which allowed me to witness all of the usual questions that come up in this scenario.
Listening to them interact, I could tell that the tailor was sharing information that wasn’t available on the website. Her expertise in guiding people through their choices wasn’t reflected on the task-oriented interface. But still, the experience was rich and I came back with a ton of notes and need for direction.
The Research Canvas
I had absorbed and documented so much information that I needed focus to make sure that my research stayed meaningful and had clear metrics.
A few weeks prior I had welcomed my friend Stephanie Troeth at The New Digital School, who had shared her Research Canvas with our students. It is extremely useful while doing research since it asks all the right questions you need to ask before a project.
After filling it, I sat down with the client and introduced my vision of why we were doing this redesign. The canvas also contained what we knew, needed to prove true, need to learn, and why each bit of research mattered. The client loved the clarity! And I loved the way Steph’s canvas was straight to the point in this case.
If you want to know more about it, tweet back to Steph who I’m sure would love your feedback on it.
Stage 2 — User Interviews and Tests
—
It was then time to continue the research and talk to clients to validate our assumptions. With the help of the client, I managed to schedule a total of 6 online user interviews: 4 with regular clients and 2 with non-clients who use shirts on a day-to-day basis. A gift shirt was promised to the test subjects to thank them for their time.
It took me about a week and a half to prepare the script, schedule the calls and conduct the tests. These interviews were composed of an initial survey, a live user test, where users were invited to customize and buy their gift shirt, and a final set of questions about satisfaction, usability and speed perception.
After conducting the interviews and having a closer look at the data, it seemed clear that there were the 4 distinct stages of the flow:
- Fabric selection
- Component selection (like collar and cuffs)
- Measurements input
- Checkout
These stages had similar durations in each session and some users seemed to mention them by name as if they were isolated. This was an important finding since we were trying to find a structure to organize the steps of the new wizard-like interface.
Stage 3 — Processing Data and Findings
—
Processing interview data took a few hours of work while going through answers, live notes and, in some cases, going back to the screen recordings to check for facts. A few patterns quickly emerged and we made discoveries that could have a serious impact on the interface and the business, and major blocks to the whole experience.
For instance, just on the 1st stage we discovered that users spent 33% of their session time merely selecting the fabric for the shirt. There were comments on how hard it was to perceive the final look and feel of the fabric from the tiny images, and how hard it was to choose among 800 options. In the end, some acknowledged that these specific negative points made them uncomfortable about finishing the buy and would probably make them leave.
Another curious lesson was how the tailor’s name was mentioned 8 times during the 4 tests with current clients. Every time there was something that caused any confusion, her name was mentioned as part of a previous solution or as being the one who knew what choice to make. She had clearly been a helping assistant in previous purchases, which lead us to conclude that some of her knowledge was missing all across the flow.
Many other conclusions were drawn from these tests which ended up influencing design and business decisions, all of which were compiled in a 9-page report.
Stage 4 — The Prototype
—
After presenting and discussing my research with the client, I started working on a solution, with a large set of notes by my side. The final result was an interactive low-fidelity prototype which was achieved after 3 versions of a mind map, 1 version of a paper prototype and finally 1 version + 2 revisions of the wireframes. The final version is open if you want to take look.
The experience was organized in 5 steps, where each screen displays just enough information to make a considered choice on a specific component instead of the whole shirt. Along with existing usage analytics, each choice informs the wizard on what to show next, guiding the user in their choices.
And because the digital experience shouldn’t be so distant from the offline one, the users will sometimes need to be guided through what’s best for their specific case. Small bits of microcopy and help buttons were distributed along the flow to help with that.
This prototype was presented and validated with the client but also with the designer in charge of the UI, who was very satisfied with how much hard work had already been done. Alongside the InVision prototype, a series of recommendations were also delivered to make sure that the user needs would be met throughout production.
Conclusion
—
Projects like this are usually a simple task for any UI designer. It’s a matter of having all the content and options that need to be displayed. But had this gone straight to interface design and we wouldn’t have found out so much about how people interact with the brand, the website and the business.
Overall this was a very interesting challenge to be involved with, and it was only possible thanks to the collaboration of 3 client stakeholders (including the tailor herself), 4 online clients, 2 guest users, and the final design/development team.
I’m currently waiting to see the final results and to measure the impact on the conversions but it was a pleasure to find solutions for these users. This website isn’t going to change the world but hopefully, it will improve the growth of this business and the clients’ experience.
Thank you for your time ✌️ Let me know if you disliked the article by giving it 1 👏; or if you were mildly entertained leave 40+ 👏 (for user research purposes…).
I would love to read your comments on this article and get to know about your projects too 😊
