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 doing freelancer, studio, and agency work and clients don’t always want to pay for research work. What the public expects from you be misleading. But times have changed.
It’s been a while since I’ve done a project on my own but when I was approached to redesign the user experience of a shirt customizer, I knew it was time to put some of my new tools 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 the 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
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.
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.