Design of a new web service for Debenhams
Helping to create your own room style
This was the second project at General Assembly, developed in 2 weeks. The goal of this sprint was to deal with an articulated desktop website focusing on an advanced shopping process and delivering a low fidelity prototype.
The complexity of the project has requested a large number of UX techniques, and a lot of feedback from different users.
My task was the design of a Microsite for Debenhams that makes easier for customers to find inspiring room design ideas, and create “the look” they are interested in for their homes. This site should help people to plan and making decorating projects.
Included in the brief, there also was a three personas document, provided by Debenhams itself. I was asked to select one of them and to focus my full research and project on that. My persona was Midori.
“I want to find a decorating look for my new apartment. I’m enthusiastic and have lots of design ideas, but I struggle to create a look for my home I’m happy with. I would also love to share my ideas with friends and ask them advice.”
So, to clearly identify the problem, I jotted down a storyboard that summarises my persona, her pain points, and what the microsite is supposed to do.
- Midori has to decorate her new home.
- She travels a lot and always thinks about furniture,
- but she struggles to manage all her ideas!
- What if there was a website …
- that allows her to browse by style …
- provide her selections of items …
- create her idea rooms …
- to finally enjoy her new home?
Now, with a clear focus, I was ready to start my research. My first question has been:
How people currently buy furniture online?
User research
To answer this question I decided to interview people with similar profiles to Midori. More in detail my goal was to investigate their behaviour, how they get inspired, and which are their pain points.
The first person I interviewed was Giulia, who recently had to furnish her new home.
The second person was Carolina, who had a massive experience in browsing e-commerce websites.
The two interviews provided me with a huge amount of information. When I was going through the notes, I decided to reconstruct the two browsing experiences described by Giulia and Carolina and visualise them by using two flow diagrams. With surprise I discovered that they had an entirely different approach to achieve the same goal: Giulia is more methodic and often use lists, Carolina instead use the website as an inspirational tool, always following suggestions and related items.
This was the first turning point of my research. This discovery inspired me to combine those two methods of browsing in the design phase, with the idea of meeting both the schematic and the impulsive user needs.
What are competitors doing?
After user research, I dive into a business analysis to see wich services the other brands are currently offering and if they already give solutions to my personas pain points.
I chose 7 different brands that represent all the levels of the spectra: from the less pricey broader market to more expensive brands.
What I took away from here was that the only brand that provides a consistent planning service is John Lewis. But even so, I tried the service and I found it not so intuitive and flexible. On the other hand, the cheapest brands don’t provide a planning service and the most expensive propose alternative ones, like the personal shopper.
Another outcome of this exercise was a clear overview of all the services included in the furniture e-commerce experience. To get ready for the next steps I visualised all the components of the experience in a concept map.
At this stage, I decided to broke the task into chunks and address them with different UX techniques. At the same time, on the back of my mind, I was building a bigger picture and investigating possible solutions.
A clinical eye
The first step was to break through information architecture. As I was given a hundred items to organise throughout the site, I used card sorting to investigate the most intuitive and tidy way to group all the products. When I come up with my first solution I decided to test my hypothesis with some people, and, thanks to their feedback, I was able to refine my idea with a second and more organised version. This process was vital when putting a site map together.
Flows & Sketches
In the meantime, I was using different user flow diagrams to understand how to design the whole shopping experience. The flow has been the best way to define how many steps I needed to lead the customer to create his room style in the best way. In particular, I mainly focused on the one that represents the “create room” process and put all my effort in making the navigation as fluid and flexible as possible.
This study, together with the user journey’s one, was my second turning point that gave me a clue on the website’s wireframe logic. If we think about a website in a spatial way, we can say that there are different levels of deepness you can reach. In my case, the further you go in the shopping process, the deeper you go. Now, each level is a different digital space or, in other words, a different page. So, I just defined a journey and grouped all the steps into levels.
Due to the previous work, the wireframe phase was quite simple. I quickly designed the frames that were essential to ensure an enjoyable shopping experience and put them together in a digital prototype. At this point, all I needed was a feedback from people.
First of all was good to see that my flow was solid and the wireframes were quite clear and understandable. The problem that I came into was a lack of in-between steps, so often user asked me what they had to do to continue the navigation. They understand what they were doing step by step but didn’t have an overview of the whole process they were involved in.
Here are reported just some tester’s reaction and my relative understandings:
Iteration after iteration, I was able to shape my prototype until I reached a point where the users were confident with the process and the whole experience.
