Online Shopping Experience For New Residents

mATCH style | UNDER BUDGET | save time

CONTEXT
This is a modified one-person Design Sprint Challenge for an E-commerce startup called "House2Home", a company that aims to help new residents decorate their new house or apartment into style within budget.
DURATION
5 Days, Nov 2020
MY ROLE
UI/UX Design.
TOOL
Sketch logoMiro logoInvision logo
DAY 1 - MAP
In this challenge, the research highlights, personas and user interviews are provided as primary resources, which helps to understand the problem, the goal, the constraints and the users. Based on the findings, by following the sprint model, I come up with ideas, test them out and find the greatest solution to the problem.

The goal for DAY 1 is to familiarize myself with the problem, read through the existing research and map out the most important user flow.
The Problem
Research shows that the majority users of House2Home are recent movers who want to personalize their space, but lack of confidence to makeover their rooms by themselves in control of style, budget and time.
The Solution
House2Home provides a "Starter Kit" to help customers quickly pick up a few items they like to instantly adapt a new style to their places. In order to assemble the kits according to every customer's style, budget and space needs, adding a quiz process would help to filter the options for suitable products.
My Role
My role in this projects is to develop a solution by synthesizing House2Home's previous research and worked through the design sprint process, including ideation, prototype, test and evaluation, to help customers assembling suitable products to fit their style and budget.

Project Brief

Through the primary resources provided by House2Home, here are some quotes that demonstrate the key insights of user demands, which will become the foundation to ensure a user-centred solution is provided.
According to the research highlights, quickly matching items into preferred style within budget is the goal, while style match is the common priority. Therefore, I formed my HMWs to stay focus on the pain points.

HMW Questions

HMW helps users to recreate their preferable style in their own space?

HMW helps users to pick items that match together ?

HMW helps users to keep purchase under budget? 

HMW helps users to save time on shopping ? 

User Flow Map

If you wanna get into more details, fell free to click and enlarge the picture.
Mapping out the path that a user would take to find their perfect match helps me to better understand how should I build the basic structure of the website. However, to avoid miss focus, I don't want to jump into the question arrangement so quickly. I decided to do a bit more research on the next day, before settling the quiz.

Day 1 Take-Away

After a day spend getting myself be familiar with the issue, trying to understand the real challenges to users, regarding style match, budget and time. The pain points and its priority seem clear, which set up a solid foundation to work around. The questions shall be included in the quiz are still up in the air, which is a decision I've made to settle after doing more research.
DAY 2 - SKETCH
The goal for day 2 of this design sprint is ideating and generating possible solutions by sketching. In order to set up the effective questions in my quiz while understand what other competitors in the market offer, I started off my day by conducting a round of Lighting Demos to get some initial ideas. Followed by applying "Crazy 8s", I come up with some possible solutions. By the end of the day, I created a Solution Sketch for 3 subsequent scenes.

Crazy 8s

The information collected on Day 1 provide the insights to the users and their pain points, while the Lighting Demo gives me the opportunity to look into the potential competitors on the market and the standardized ways to fulfill customization service.

As the users of the House2Home's primary key pain point is Style Match, therefore, I think the most important page would be the one choosing their preferable styles from the pictures.

Here is the overview of the 8 solutions I designed for the Style Match Page:

Solution Sketch

The "Style Match Test" and the sub-sequential "Result" page are the 2 critical steps that help users to identify their requirements and reveal their "Starter Kit". To visualize how the users would complete the quiz step-by-step, I included a total of 3 scenes into the Solution Sketch.

Day 2 Take-Away

At Day 2 of the Design Sprint, it effectively boosts my creatively in design. I get to visualize the possible solutions in a short time, the way of brainstorming really helps. By drawing out the scenes step-by-step, I set up the questions for the quiz and the whole process encourages me to think practically and the visualization shows the most effective way to display the options for user to choose.
DAY 3 - DECIDE
Though Day 3 is the decision-making day, I've had my preferred display during the sketch process on Day 2. Before moving into making the full experience in Storyboard, I decide to create a User Test Flow to go through the most typical scenario of user visiting the site.

User Test Flow

User just moved into a new place and started wondering how they can personalize the space

User searched online for inspiration and saved a few photos for future consideration

The product linked to the inspiration photo directs the user to House2Home

User explored the website and found the customization service with "Starter Kit"

User took a "Style Match Testing"

User received a result of items picked up by House2Home

User consider the items and choose between alternatives

User purchased the ideal items for their own space

Purchase approved, waiting for adapting new styles at home

Day 3 Take-Away

After writing down the User Flow Test and drawing out the Storyboard, I've noticed that I've missed the part where it helps the users to actually see how the items picked up FIT IN THEIR OWN SPACE. Therefore, I updated the questions in the quiz by adding the option of uploading the pictures of their designated space, which will show in the result page with before/ after comparison of products out and in the space. It intents to help them visualize how much change would these products bring while avoiding "surprise" after purchase.
DAY 4 - PROTOTYPE
The prototype to Design Sprint is like a realistic facade. Based on the previous research and design thinking, I created a prototype to illustrate the full matching experience for "Starter Kit".

1. Consistency & Progress Bar

Keep it up with consistent look to avoid learning curves, while to make sure higher completion rate by adding process bar on the top to encourage users finish the quiz.

2. Two Entries for Accessibility

Since selling the "Starter Kit" is the main focus of House2Home and taking the quiz is the first step, therefore, I add 2 entries in the display, one at the top navigation bar and another one as the first hero picture of the home page.

3. Visual Confirmation

By lighting up both the selection and the "Next" button, users are able to receive visual confirmation, which also leads their way to the next question.
If you would like to try out the final prototype (after modification), click button below and feel free to let me know what you think !
Check Prototype

Day 4 Take-Away

It requires me to think more into details when it comes to prototyping, especially for interaction part. How should I design the feedback after user clicks? Which way is better to give user a visual confirmation? How do they know what they should expect to be asked during the quiz? How could they take the pressure off by knowing they can always go back to previous selections? etc.
DAY 5 - TEST
After synthesizing the primary resources on Day 1, with knowing the typical persona of House2Home, I started my recruitment process. There are a total of 5 interviewees, aged 24 to 33 years old, who are new movers that are been actively researching on home decorations and accessories.

Interview Questions:

When did you move into your new place?

When did you start looking for hoe decor and accessories?

Do you know what style you want to recreate?

What is the biggest challenge you have for purchasing home decor?

By looking at the interface, can you tell me what have you seen?

Please try to use the "Starter Kit" and think aloud during the process.

Do you find any difficulties in the process?

Main Findings:

The overall experience of the testing was smooth for all interviewees and they all like the idea of "Starter Kit". I paid extra attention when they read the questions, glad the wording wasn't confused and they could understand the intention behind each questions.

Though the prototype demonstrated the flow, there were still some concerns regard the functionality. For the very first question that asks about their preferred style, the original design was in a long blog style, so some participants felt it contained too much information in one page and some of them scrolled over on this page for comparison in between listed styles, which they felt a bit frustrated as their focal point kept changing on the page.
'Oh what's the previous style? Let me go up and check...
Again... what's the last one? "

"Sorry so much information on one page, my bad memory doesn't allow me to remember them."
Therefore, I modified the design to make it less informative and more visually stable, better for users to compare between the styles.

Day 5 Take-Away

After changing the layout of the Style question, it made more appealing to users comparing in between styles. Especially with the feedback design for confirming selection (both the background of the image and the "Next" button would change to green), users could understand that their action is received and ready to move to the next step.

The Design Sprint provides me so much fun with challenges and opportunities. It feels so good that at the end of each day, there are goal accomplished.

As time is the main constraint, I have to think quickly for alternative design options. I am glad that I managed my time well and started interviewees recruitment after Day 1, so the whole sprint kept in 5 days.

One important lesson for this experience is that users prefer to keep the information visually stable, within their view and same information stay at the same position. So it allows them to quickly pick up similar information and avoid extra learning curve.

You may also wanna see my other work:

Rogers Communications

Responsive Website

Utilize the cart summary page for Residential service, enable the ability for upsell and cross-sell.

Check Out Now

ATB Financial

Website / iOS / Android

Enable sending and requesting e-Transfers via SMS. Adding new features to existing flows.

Check Out Now

Anifie

IOS APP
‍‍
Redesign to create interactive virtual concert experience in a more immersive way.

Check Out Now