A UX case study | Made.Designers

The best-personalised interior advice without leaving your house.

The brief

Made.com is a brand based in London that designs and retails homewares and furniture online, with a network of versed showrooms across Europe. They work directly with independent designers and makers to create pieces that are made to last and are affordable.

The primary goals:

• Finding an opportunity in the virtual interactive space.
• Introduce a new feature, an online video consultancy for interior design.

Important to know:

• This will be a paid service to help potential customers to decorate their home with furniture, colours and composition.
• The service is not meant as a sales pitch for Made.com but as a way to have remote access to interior design advice.
• Users can browse and choose designers, book a slot for an appointment and have a session all contained within the app.

My role

This collaboration was a concept project of two weeks with three other designers during the 12-week UX Immersive Design Bootcamp from General Assembly. Through the course of the project, I have shared the role of facilitator of the group with another teammate.

• I conducted user interviews and user testing to collect relevant data.
• I played a key role in synthesizing our user interview results into an affinity map to highlight the key findings.
• Taking responsibility for building the wireframes and prototypes of the Homepage and “Meet the Designer” page.
• Additionally, I developed the final concept of the “Style Board” pages which then got implemented in the final prototype.

Key deliverables

Several deliverables were required for the project, including:

Competitive Analysis | User Interviews | Affinity map | Personas | Empathy Map | Problem Statement | Experience Map | Information Architecture | Design & Usability Testing | User Flows and Screen Flows | Wireframes | High Fidelity Prototype | Presentation to the class.

Results

The app we developed for Made allows users to:

• go through a short onboarding process if it pleases the user and has the freedom to complete profiles on their terms.
• create a style profile in a few easy steps before or after booking an appointment.
• book an appointment with prompts to prepare themselves for the consultation including a measuring tool.
• have a seamless online session with an interior designer through video call and an augmented reality product recommendation.

Double Diamond

We followed the Double Diamond process with its four phases: Discover, Define, Develop, Deliver.

Discover Phase

Competitive research

We started the discovery phase by trying to understand the competitive market of virtual interior design, we compared the features of 8 competitors.

I narrowed down our findings to 3 direct competitors and 1 indirect competitor.

From this, we discovered that most of our competitors offer some form of video consultation, but there seems to be a gap in getting a personal touch to interior advice. The ability to get advice tailor-made to your needs and your style has been seen for styling your apparel but still rare in home decoration.

We also noticed there was an opportunity to explore an augmented reality feature, which would make us stand out from other services.

User Survey

To understand our potential user we send out a survey to find insights about users’ interests, abilities and confidence towards home decoration. A question that is important for us to know; Would users consider paying for interior design advice?

We had 59 participants and these were the key findings:

User Interviews

Taking insight from the survey, we prepared a scenario of open-ended questions for user interviews. We questioned 15 participants about their experiences with home decorating.

I took a lead in organising the data and analysing the key findings in an Affinity Map.

Our key findings were:

• Users value interior aesthetics more due to increased time at home.
• Users want inspiration and teaching about interior design.
• Some users know their style but require practical information.
• Other users don’t have confidence in their decorating skills due to a lack of knowledge or time.
• Users are hesitant to pay for advice or assume interior design advice to be expensive.

There are many assumptions users made around the cost of interior advice. So here lies the question; How are we going to show users the value of paid interior advice on the app?

The solution would make our product stand out from other services.

Definition Phase

We arrived at the definition phase of our project. Here we aimed to determine who our target users are and their main concerns about home decoration. To understand our user frustrations and goals, we create a persona.

User Persona

From our user research, we have potential users who know their style but need help with a problem or to achieve a specific goal.

This is Bonnie. She is a professional creative who works from home during the pandemic and needs a practical solution to convert her spare bedroom into a home office.

We made another persona who represents the user who does not have confidence in their interior skills due to lack of knowledge or time.

I like to introduce James. He recently bought his first flat in London and he needs to decorate it.

We kept Bonnie in mind, but for the scope of the project, we will focus on James.

Empathy Map

To get to know James and bring him to life we created an empathy map based on what he says, does, thinks and feels. We want to step into his mind and learn more about how he feels.

James says” I do not have much time to research loads of different brands”. When he does browse online for new furniture and other homeware he feels overwhelmed by all the possibilities.

Problem Statement

To identify the goals of the brief and to outline the scope of this project we make a problem statement.

James is looking to decorate his living room. He knows his style but is not sure about making his own design decisions.

He needs a way to seek advice from an expert so that he doesn’t waste time and energy making the wrong decisions.

Development Phase

Next, is the development phase. In order for us to define features for our app, user flows and start designing wireframes we organised a design studio. Collaboratively we brainstormed and pitched ideas for possible solutions to James’s problem. This method allowed our group to prioritise, critique and generate ideas in a short amount of time.

HMW’s

We created How Might We statements (HMW’s) to keep our focus on James’s problem during the session.

The HMW statements were:

• How might we give James confidence in the ability of a virtual design service?
• How do we help James get good design advice via video?

Feature Prioritisation

To organise our ideas, we did a feature prioritisation workshop to determine what features were essential, nice to have, high effort and low effort.

The feature outcomes

A selection of 4 key features would help James make the right design decisions for his living room and ensure he gets the best results from his video call.

These features were:

• Ability to choose the designer allowing James to select an expert that matches his style.
• Style board so designers can learn about James’s needs and goals before the call and make recommendations.
• Measurement tool to help James selecting products that will fit in his space.
• Video call with augmented reality allows James to visualise items in his living room.

Iteration in Wire Flows

To test ideas gathered from the design studio we created a Low Fidelity paper prototype and shortly after we developed a mid-fidelity prototype in Figma. After a total of 3 rounds with 14 users testing the wireframes, we worked as a team on the visual design for the high-fidelity prototype.

These are the user flows we iterated to get the best journey for James:

• Selecting a designer and booking an appointment.
• Creating a style board and measuring his room to prepare for his consultation.
• Making the video call which includes using the augmented reality feature.

To show the iteration process clearly, I have synthesized the user flow and the wireframes explain how the journey has changed in the different stages

Low Fidelity Wireflow: Style Survey

We developed this flow into a paper prototype, conducting usability tests, iterating and testing repeatedly. This flow showed the — Style survey — our initial idea for helping users to identify their style and goals to connect them with the right designer. This idea to guide the user into making an appointment took too long and was very confusing.

After Testing

This was problematic as research showed users didn’t like the mandatory steps of the style survey straight after the onboarding. Upon entering the homepage the user did not understand what the reward or result would be.

Restricted by time limitations, we realised there was a lot of focus on getting to know the user and not enough time being put into the video call features. We decided to drop the — Style survey — to make sure we honoured the brief’s objectives by focusing on improving the — homepage and video call — .

The style questionnaire

• Our first digital wireframe was confusing and long. It felt like too much of a commitment with no clear understanding what the reward or result would be at the end.
• We decided to not use the style survey. There was too much focus on getting to know the user and because of this there was a lack of focus on the video call feature.
• After some personal user interviews without the style questionnaire, I realised that the personal touch would be lost if there is no option for the designer to get to know the user. I reworked the survey into a optional “make a style board” and presented it to my team. They loved the new version of the questionnaire and it was decide to put it back.
• The key findings were to keep surveys and questionnaires concise and optional so it doesn’t feel like a heavy commitment.

Iteration — The homepage

We wanted the homepage to make a personal approach to the user, to feel inspired and encouraged using the service. For this reason, we focused our sketches on making sure the service revolved around the designers.

After testing on 4 users, we received feedback that they were confused about who the designer Sally was and they asked where they could learn about the service. We realised the homepage needed to be as informative as possible as it‘s the first opportunity to introduce the service to users.

Listening to the feedback, we moved the explanation at the start of the homepage and followed by a shortlist of the designers.

Iteration — The video call

During the Design Studio, we brainstormed many ideas about the video call section of the app. To understand which ideas would work the best we performed several rounds of user testing. Our mid-fidelity screens had a fixed settings menu, additional features menu and various icons on the augmented reality section.

Problem

A concern came up about the settings bar taking up a lot of space from the video call screen preventing them from noticing the designer. The number of icons and features were confusing and overwhelming for the user on the augmented reality screens.

Solution

In high definition, we developed a collapsible menu and merged the settings and features menu with more streamlined icons to make them clearer for the user.

Iteration — Style quiz

2nd Iteration Flow — Bringing it back!

We reworked the user flow while moving into the Mid fidelity prototyping. In this flow, we transformed the style survey into an optional style quiz that was offered on the homepage instead. We included the feature — Measuring room tool — to help the user get the right dimensions of their room, to help them, and the designers prepare for the video consultation.

Problem

After doing user testing without the style questionnaire, I realised that the personal touch would be lost without the option for the designer to get to know the user. I reworked the survey into an optional “Make a style board” and presented it to my team. They loved the new version of the questionnaire and it was decided to implement it again in the flow.

The key findings were to keep surveys and questionnaires concise and optional so it doesn’t feel like a heavy commitment.

Deliver

Final User flow

To conclude all our iterations I made a screen flow to show James’ journey which let him:

• Booking an appointment
• Creating an optional Style board
• Measuring his room
• Having the video call

Final Prototype

High-fidelity clickable prototype on mobile app

Key Learnings

This was my first group project for the UXDI course, we did some ambitious work in the short amount of time we got to work on it. During this time I became aware of knowing when to listen and when to speak. In the overall picture, you’re trying to contribute to getting to the end goal as a group, for this reason, I try to make considered decisions and arguments, making sure my input was valuable.

Furthermore, I observed where each person strength lies, trying to learn how to improve my methods where needed. But also, standing my ground on issues I believed in and ensuring I had researched data to back the arguments up, in this project lead to getting the Style board reinstated.