Virtual Design Center

Responsive website design for customized design needs.

DESIGN CHALLENGE

What would change if we can make it easier for the customers to better select items for their new homes and make confident decisions?

When building new houses for customers, The housebuilder holds a store(it can be offline or virtual) to exhibit their upgraded showrooms for customers, it is a place where new home buyers get to choose their upgraded materials and finishes during the house construction process. However, customers may face many challenges in the Design Center( showroom store): the confused and labored process of selecting different items, the back and forth revision, and concerns for the final outcome. Based on this, How can we create a design center to make it easier for the customers to better select items for their new homes and make confident decisions?

THE TEAM
MY ROLE
INSTRUCTOR
Siyang Ye - Product Designer
Nuoran Chen-Product Designer
Silin He - Product Designer
User Interview
Journey Map
Ideation
Wireframe
Hi-fi Mock up
Usability Testing
Junying Chang
PROJECT TYPE
TIMELINE
03.2021- 07.2021
Self-driven project
03. 2021-07.2021

Design outcomes

As a result, we designed a customer-oriented website from scratch to serve as the ‘virtual’ design center, saving customers time on getting back and forth to the offline built-in design center several times to finalize their home design.

Main website interface
Main feature 1: preference survey
Main feature 2: Customize and preview style
Main feature 3: Make reservations to visit offline design center

DESIGN process

The design process consists of three phases: 1. Research, 2. Ideation, 3. Design. Throughout primary and secondary research we defined our design questions and narrowed the design scope to get an ideal design outcome within the given time. After that, we spent months iterating our design. By designing products, we’ve grown a deeper understanding of what design problems we should focus on to improve the customer experience at the design center.

01 Research / Ideation/  Design

How is the current user experience of design center?

In order to answer this question, we did contextual researches of the design center, and interviewed 6 customers that have used design center to upgrade their homes .

Understanding Stakeholders

Competitive analysis

Due to Covid-19, we could not research with local vendors. Instead, we did a competitive analysis for online platforms. We figured out what the must-have and special features differ from others, concluding that most online design centers allow customers to freely choose and change singular pieces freely. However, none of them support the customer changing items based on overall/ preferred styles, leading to customer frustration or back and forth effort.

Competitive analysis
Heuristic Radar Graph
Competitor screenshots

Journey map

We studied the current user experience of how people use the traditional offline design center. We found out the main pain points occur when/after they visit the design center for the first time, having to make decisions from scratch, feeling overwhelmed and frustrated very often.

User Journey Map

Persona

Our target users are newbies designing the home but desire a high-quality lifestyle and products. They care about both the cost performance and aesthetics at the same time.

Insight A 👨

Insight B 👵🏼

Insight C👧

“Homebuyers find it hard to visualize the effect of choices and wonder what will be the final result. ”
“ Homebuyers care about unified style and prefer a whole set of recommendations.”
“A well-organized selection list helps customers make choices more efficiently.”
This is aligned with the previous hypothesis that homebuyers need instant visualization to make confident choices. In addition, from the interview, we also found interviewees cared about the instant price after they made upgrading.
Although Interviewees couldn’t precisely describe their preferred style with words, they wanted their upgrading to look consistent. Also, two interviewees mentioned that they were always unconfident about whether the individual revision of items could match the overall style.
Three interviewees mentioned that although the housebuilder sent them the selection list in advance, it’s impossible to make decisions by themselves. In the end, they had to schedule the appointment several times with the design consultants to finalize the design plan.

02 Research / Ideation/  Design

Brainstorming and
sorting ideas

We brainstormed 23 solutions for the virtual design center and picked 3 main features to develop after voting and thorough discussions, because we think those are the key features that lower the difficulties for customers to make decisions.  AI auto upgrading based on preference survey; Real-time rendering visualizes style-related substitutes; Generating overall upgrading list to help offline visit.

Storyboard

By drawing the storyboard, we better presentsed users the scenarios and solutions of the product, and collect their feedback for design.

03 Research / Ideation/  Design

Refining design outcomes and doing usability testing

Wireframe

Design Proposals

To test our initial design concept, we made prototypes and conducted the online test with the previous four interviewees, generating four main feedbacks to improve our design. Insights we got from the tastings are.

Usability Testing C

Usability Testing A

Usability Testing B

Usability Testing D

Don’t know what to do next...
Overwhelmed with choices
Unsynchronized visualization
Unpleasing color theme
“I have no idea what will happen next, and I don’t know how much work I have to do to get to the end, it’s a bit annoying.”
“I was confused because after I filled out the style preference survey of a certain room, I still have to choose a preferred set of this room from many collocations”
“ It would be good if I can see all the selected materials together with the rendering interface instantly. The visualization will help me make decisions more confidently.”
“ I kinda feel like the color is too serious to chill people down of this already overwhelmed work”

Design Proposal 1:  Make the cumbersome process more guidable.

Before: there’s no sign telling customers what to do
After:
After: recommend styles by understanding users’ preferences

Design Proposal 2:  Use the welcoming color palette

Before: there’s no sign telling customers what to do
After:
After: natigation bars with different priority

Design Proposal 3: Recommend styles according to users’ preference

Before: there’s no sign telling customers what to do
After:
After: recommend styles by understanding users’ preferences

FINAL DESIGN SOLUTIONS

DESIGN GOAL: CLEAR NAVIGATION
Solution 1: Clear Navigation
PROBLEM
With the complex tasks to design, sometimes users get lost with all of the functions provided on the website.

SOLUTION
We designed a navigation bar to clarify all the customer processes.We created the filter design to help users customize their homes for efficient selection.
DESIGN GOAL: SIMPLIFY
Solution 2: Narrow down user choices by survey
PROBLEM
With too many styles provided, people hesitate to choose the style that fits them most and waste time.
‍
SOLUTION
At the offline built-in design center, users cannot view the design result right away, and it’s hard for them to imagine the visual effects from scratch.
DESIGN GOAL: INTUITION
Solution 3: Real-time Visualization
PROBLEM
Users cannot view the design result right away at the offline built-in design center, and it’s hard for them to imagine the visual effects from scratch.
‍
SOLUTION
We designed a real-time rendering function in the website; users can see the visualization synchronously when they make changes.

DESIGN reflections

Challenges

  • Make sure the design scope is not too big or too small. This is my first time designing a web from scratch. At the beginning, the project scope is broad, we have a lot of fascinating ideas we want to realize, but with finite time, we have to decide what’s the biggest design problems and dedicate most of our time into it. In this project, we have agreed that we should focus on the specific user experience of how they choose the whole package in the selection list, instead of other parts of the whole upgrading and construction process.

Takeaways

  • UX Design is not a linear process. We have learned that sometimes former research/ design conclusions are refined afterward. It’s more like a cycle: first, we want to change the current design center experience. However, we only specify the problem with future research. Even the development process helps us become more aware of the design problem we want to solve.
  • Conduct competitor analysis wisely. We compare furniture apps and apps from other categories as well. In our case, our design consists of a strong ‘step-by-step’ logic; therefore, we compared many products with similar logic. In the end, we have derived our most thoughtful insights actually from a tax app called TurboTax, which is very surprising and fruitful!

Potential Next Step

  • Consider other stakeholders’ needs in our design. Due to the limited time and budget, our project only focuses on improving the customer’s experience by choosing their upgrade plans for their new homes. However, the actual process consists of other stakeholders, including contractors, builders, and designers. Their interactions and collaborations are crucial parts of user experience, so we hope to develop designs that work well for those stakeholders if possible.
  • Integrated IoT system. Help the whole process work seamlessly.
→ Next Project: Weibo App Redesign