Collov-Mood Board Dashboard
PROJECT OVERVIEW
Collov is a virtual interior design platform, where interior designers use mood boards to communicate their concepts with customers in order to turn their feedback into a final design proposal with a 3D rendering.
This project is about designing a dashboard that allows customers to review and leave feedback to the mood boards sent by Collov interior designers.
MY ROLE
I heavily participated in every step of the product development process, from concept to launch. I helped project roadmap planning, conducted user research, designed the end-to-end experience, and supported engineer implementation.
TIMELINE
Oct. 2020-Feb. 2021
DEFINE THE PROBLEM
Why a Mood Board Dashboard is Necessary?
Currently, all design concepts/mood boards discussion between customers and interior designers were via Email, which caused a lot of chaotic back and forth communication.
THE DESIGN GOALS
How To Make Both of Them Feel Satisfied.
Different versions of mood boards will be displayed in an organizing way
Customers are able to view and compare their mood boards in one place
Customers can request design changes with detailed comments.
Designers can understand customers’ requests seamlessly.
LOGIC MAPPING
Jumpstarting Service Blueprint
Because of the project dependency, we decided to kick off this project with a service blueprint. Creating this logic mapping helped us better understand the structure and relationship between the customer-faced mood board and our internal (interior designer-faced) mood board dashboard.
DESIGN PROCESS
How Do We Approach?
DISCOVERY
Studying User Cases
We collected around 40 mood board cases to go through customers’ feedback and interior designers’ responses to understand the user needs.
Based on the user cases study, we found out that customers’ feedback can be divided into the overall mood board feedback and the comments for one or several specific items in the mood board.
DISCOVERY
User Stories And Project Scope
To better identify the project objectives, engineering difficulties, and task priorities, we had meetings with stakeholders and engineers to go through all the user stories we sorted out. After several sessions of the meeting, we had a much clear project vision that helped us plan out the design scope in phase one.
DEFINE
User Flow And Different Scenarios
After studying the user cases, we created user flows that covered 3 different scenarios:
1. Approve the mood board
2. Request a redesign
3. Request a design change.
The users in different scenarios will be led to different flows.
DESIGN
Block Wireframes
Once got the flows and logic done, we started to sketch out lo-fi wireframes to visualize the content structure. We found out that listing key features under the corresponding pages really helped us see the logic conflicts and sort out what we were missing.
DESIGN
Kicking-off The First Draft
1. Mood Board Dashboard
The initial design concepts come with two mood boards. Customers can compare them side by side and decide if they want to approve one of them to move forward or request a revision.
All mood boards are organized in reverse chronological order. The updated version will show on the top, with a status of Review Mood Board, and the old version will be pushed down to the past version section, with a status of Revision Requested.
2. Mood Board Overview
The Mood board overview page shows more detailed information, like the design concept description, budget, and product list. Customers can shop any products they see on the mood board.
Customers are able to view and compare the enlarged mood boards with corresponding product lists.
3. Request Mood Board Changes
For customers who are not satisfied with the design, we will first ask if they don’t like both mood boards at all and want to have a total redesign, or they like some parts of the mood board but want to have several retouches.
The flow of the redesign option will not go to the commenting page, which is different than the rest of the three.
We categorized 4 reasons for the redesign option: Style wrong, budget too high, functional issue, and other concerns. Customers can select inspiration photos to visually explain their preferred room style.
4. Make Comments
The commenting page is for customers to specify why they want to request design changes. They can leave overall feedback for the mood boards in general or click on either one mood board to give comments for specific items.
Testing
Conducting Usability Test
For uncovering the usability issues, we conducted 3 rounds of user testing on 11 interviewees. 7 participants we picked internally from the marketing team, interior design team, and product team, who were already familiar with our target audiences as well as this mood board idea but have never been involved in our design process. We also recruited 2 interviewees from Userlytics.com with screener questions, in order to make sure they have a certain level of familiarity with online interior design products.
We observed how they click through the prototype. The followings are our main takeaways:
Takeaway 1: Request revision flow is not intuitive.
Testers didn’t expect that the “Request Revision” button would take them to the evaluation for two mood boards.
Takeaway 2: Commenting page is over complicated.
Most of the testers had no idea what they were supposed to do by only looking at this page. They were also confused about the switching tabs of overview, mood board 1, and mood board 2.
Takeaway 3: Not a good experience of making comments for a specific item.
Too much information showing on the product commenting card increased testers’ cognitive load. Besides that, the comment box below the mood board was barely noticed because it was out of the viewport and far away from the commented product.
ITERATION
Design Changes
Revised The Commenting Flow
Based on the usability test result, we decided to revise the commenting flow. Leaving detailed product feedback is now an optional step happening after the revision request submission.
Redesigned The Revision Reason Page
We simplified the steps. Instead of opening up a new page, revision reasons reveal right under the mood boards once the request revision button is clicked.
BEFORE
AFTER
Redesigned Product Commenting Card
We removed all the tags on the product commenting card, and used three icons to represent “Don’t Want”, “See More Options” and “Keep the product”. Besides that, we moved the commenting area to the right side.
BEFORE
AFTER
Added Tutorial for The First Time User
For making a good first impression and eliminating as many confusions as possible, we added a quick tutorial to introduce first-time users how to interact with the mood board dashboard by explaining the most common operations.
IMPACT
What Are The Outcomes?
According to the surveys, customer's satisfaction level to the overall mood board experience is around 8.3 (10 is the highest score).
The total mood board completion time is reduced from 25 days to 11 days.
WHAT I HAVE LEARNT
Final Thoughts & Self-reflection
Good early-stage research is necessary
It’s better to get the engineering team involved as early as possible
Usability test can help you see the design from a different perspective