I am a UX Designer passionate about turning complex problems into solutions with simple, beautiful and functional designs. When I am not pushing pixels, you might find me eating dessert in a café, or snapping photos on a mountain.
We have a dream of making the functionalities in our company’s 3D scanning hardware available at a price point that is accessible to everyone. After several iterations of research and development, we came up with the technology to leverage the camera in mobile phone and turned it into a 3D scanner in a pocket. This significantly reduced the onboarding cost to zero, and made the 3D scanning functionalities available to everyone. I had the privilege to be part of the product team to define this product and witness its evolution.
Scenes is an app which creates a 3D model of the world around you. With a Google Tango compatible smartphone, the app could turn it into a hand-held 3D scanner. Using the app to scan a space, it will result in a 3D model which you can trim, measure, and share with others. We call the app Scenes, like a movie scene.
Scenes was initially launched in November 2016 - It was the first product I involved after I joined the company in April 2017. I was responsible for the next release of the app which included improving the UX of the Measurement tool, and designing the new feature of the Note Tags.
Based on our user data and quantitative research,
The targeted audiences are Interior Designers, Architects, Engineers, and Contractors. and improving the measurement and note tagging will help them do precise measurement more easily and document their 3D model better for communication.
If our solution works, we will see more users engaged in scanning more 3D models.
The improvement in the measurement tool has created a positive impact on the experience in creating and sharing 3D models. Two months after releasing the updated Scenes app,
"It gave me a lot of peace in mind reassurance that perhaps I wouldn't have to come back two or three more times to get that one measurement that might be missing."
Jaime Chiang - Interior Designer (Watch her video)
Unfortunately, later that year, Google announced that they no longer supported the Tango platform. We as a company decided to discontinue further development of this app.
Our dream resumes in December of the same year, as I paired up with a Product Manager and a Staff Engineer to work on a special R&D project called Snappy. The goal was to use a premium Android device with a low-cost spherical camera attached, to do 3D scanning by converting 2D photos into 3D walkthrough model using Google ARCore.
We talked to 8 of our loyal customers to learn about their pain points of using our products and services.
Their general feedback are:
We worked with these customers to tested the Snappy prototype, and their feedbacks were:
While the feedback on the user experience was good, the ones on the technical side were real concerns. As a result, the company re-evaluated the project alignment in the context of the company’s business goals:
Matterport provides high fidelity solutions at price points accessible to everyone.
Unfortunately the prototype didn't meet our goal, and the Snappy project was put on hold.
Our dream finally came true! This was the most exciting moment as we successfully turned any mobile phone into a 3D scanner! Customers with an iPhone / Android can scan a space and use the new Handheld 360 feature in the existing Capture app to turn the space into a 3D model.
With the stated principles and goals, we have 3 options to scan a space with mobile device:
2. Photo Sphere
3. AR-Enhanced Photo Sphere
We had many brainstorming sessions with Product Managers, Design and Engineering teams, and we also discussed the competitor landscapes, interaction principles, company and technical goals. After evaluating the options, we decided to go with the Photo Sphere approach which meets our criteria of High Fidelity solution with ease of use. We also decided to make the functionality available as a new feature in the existing Capture app, which the existing customers are already familiar with.
We worked with 10 participants to tested the Handheld 360 prototype, and their feedbacks were:
A Low Cost Solution for 3D Scanning
We finally have a promising low cost solution for customers to experience the 3D scanning! It might be too early to measure the impact as we were on private beta stage. However, we are confidence that this feature would significantly drive up new customers sign up to experience 3D scanning.
I was the designer of this 3D model editing tool for mobile and desktop between September 2017 and June 2018, and I also collaborated with two other designers to define the Web experience. To identify the problems and to define the solution, I have organized many brainstorming meetings with Designers, Product Managers, Engineers over many design iterations.
We did not want to offer a massive 3D software editing tool, rather wanted to provide simple and efficient solutions on helping non-tech savvy customers create 3D models with convenient. Our main targeted industries were:
In typical 3D scanning, each scan involves capturing a set of 2D and 3D data from one physical position, and the 3D data from all the scans are then combined to create a complete 3D space.
3D scan has depth.
3D scan has depth
When scanning the inside of a house, the user takes multiple 3D scans. The software automatically connects them to form a ‘constellation’ (A group of stars forms an outline). The end user then explores this constellation in a 3D walkthrough. For indoor spaces, this automatic connection process works very well.
However, outdoor scanning is a problem. Bright sunlight means the camera hardware cannot capture the 3D depth data. So it cannot connect the outdoor scan to the rest of the scans.
In addition, users often scan guest houses that are far away from the main house. So there is no overlap to connect the two constellations together.
Most users understood and accepted this limitation. However, some users did not understand, or wanted to push the limits anyway, or wanted to scan outside because their clients requested it.
In addition, many users requested to embed these 360º photos directly into their 3D models to create a more seamless experience. These users ranged from small, independent photographers to large, well-known corporations such as Redfin and AirBnB.
Therefore, we decided to design and build a workaround so our users could add these cool outdoor views to their 3D walkthroughs.
What we did was create a new scanning mode called ‘360 photo’. This was just like the typical 3D scan mode, but did not capture any depth data. Therefore the scan was not automatically connected to the other scans. But the user could manually place it as they saw fit.
Our primary goal for this 3D model editing tool is to let customers create stunning 3D models easily by integrating 360° photos directly into their 3D models.
The specific high level goals were:
The challenge was to design an intuitive and consistent experience for customers who have little experience of the 3D world on 3 different platforms.
We have observed 5 participants going through the existing end-to-end experience of scanning and editing 3D models, to better understand their pain points and to identify the areas of improvement. We found that:
Our goal is to provide a simple and efficient solution in helping customers to easily create 3D models conveniently. Offering a massive 3D software editing tool is a non-goal.
We believe that users who scan the space on-site have the best knowledge of the area. Hence, if the users could immediately place the 360° photos into the 3D model in the Capture app while the 3D model is still being scanned on-site, we will see better results and it will also shorten the overall 3D model editing time.
We did qualitative research by interviewing 8 participants:
We conducted a private beta testing to gather customer inputs on the product. Many of them were very excited, and below were their high level feedback:
Design Solution 1: GPS Auto-placement
To make the product Functional, Reliable, Usable and Convenient, it would be ideal if the 360° photos could be placed into the 3D model automatically. To do this, we could leveraging the information available from GPS Auto-placement during the 3D scanning.
Why we need this:
85% of our participants love this feature!
Design Solution 2: Overlapping 360° photos
Occasionally, customers might take more than one 360° photos and they were placed too close together or in a straight-line.
Why we fix this:
The example above has total of four 360° photos displayed on a single view, and two of them are overlapping.
I've proposed two solutions to avoid multiple 360° photosphere markers.
On the left: Merge all the photosphere markers into a single photostripe market. User can scroll up and down the photostripe to navigate into the specific photosphere.
On the right: Display a single marker and allow user to navigate multiple 360° photosphere markers one at a time.
We tested both solutions with 5 participants and learned that "Less is more". We decided to go with the option on the right without the photostripe, as it creates a more seamless navigation experience.
Design Solution: Edit 360° photos marker placement
Let customers make adjustment to the placement of the 360° photos markers in the 3D model
Why we need this:
I proposed two solutions to edit the placements.
On the left: Floorplan View - simple to implement
On the right: Inside View - require significant more engineering resources and high risk
We tested the two solutions with 6 participants. 5 out of 6 of these participants preferred the second Inside Vew option. That said, they also stated that the first option served what they need too. Eventually, we picked the first option solution to reduce risk.
We launched the iOS 3D model editing tool globally in December 2017, and the Web support followed in September 2018.
The new 360° photosphere tool and the Workshop 3.0
are great deals for many of our customers.
The new 3D model editing tool was well received by our customers:
The overall usage of 360° photos was increased by 28%
The usage of navigating 360° photos by 32%
The 3D model editing time was decreased by 1 hour
In March 2019, Matterport launched a new universal Capture app on both iPad and iPhone, along with the Cortex service which converts 360° photos into 3D model using AI and computer vision. This enables everyone to turn a real-world space into an immersive 3D model using affordable and portable devices.
This project took place between August 2018 and January 2019. I was the primary designer responsible for user interviews, prototypes, interaction and visual design of the new iOS iPhone platform, as well as adding support for the new user flows enabled by the new Cortex technology.
Imagine you are moving from a 3000 sqft living space to a 900 sqft apartment and you want to keep all the furnitures and maintain the same comfort level. The challenge of this project was to scale down the interaction in similar way from iPad to iPhone device.
After meetings with Product Managers and Engineering team, I have came up with a new design to preserve the same functionalities for both iPad and iPhone, while making the user experience similar and consistent with elegant usability. The changes could be categories:
These categories do not only help everyone understand the purpose of each change, but it also helps development team to understand how each change fit into the completed product
Any changes in the user experience might cause user discomfort and induce new learning curve. To better understand our targeted audiences, we invited 5 loyal customers who have been using our products for over 3 years. The goal was to observe their first reaction of the new changes, as well as gather their valuable feedback. We also invited 4 people to test our prototype and observe how comfortable they would discover the features on the app.
Matterport hosted a private event announced the upcoming features and the new design of Capture application in Janauary of 2019. Over 2000 new sign up for private beta within 24 hours after the event.
The results have exceeded our expectations! Since the launch of the new Capture app on iPad and iPhone, the install rate has increased by 86%. Most importantly, we have received a lot of great feedback from our customers and gained their trust in the process.
"I sincerely appreciate all you guys do to move this platform forward, keeping it competitive and the superior system for this stuff."
"I am super excited about this tech and bravo to the folks at Matterport for making it a reality and SO EASY!!!:
Imagine you can talk to anyone around the world without language barrier. This is the story of how we change communication.
This project took place in 2016. The first beta version was featured in TechCrunch Conference in San Francisco. I was responsible for the research, UI/UX design, and user testing.
There are so many meeting conference apps out there. We compared our product with 5 major competitors in the video conferencing space. We highlighted the features that other competitors covered that we didn't have.
We interviewed regular video conference users to understand their overall experience. Let them tell us a time when an online conference call failed to connect successfully. Asked them what were the features they wished to have.
Imagine you have a personal translator who speaks multiple languages. In a meeting, she translates for you and your Japanese client in real-time. In a restaurant, she translates your food order into Chinese. Language is no longer a barrier.
This project took place in 2017. We are designing a translation application for frequent business travelers. I am responsible for the research and UI/UX design.
This project is to design a cross-platform mobile application that enables users to print 3D models remotely to 3D printers. The design solution must satisfy the following:
This project is to design a photobooth which allows users to purchase 3D figures with their own facial images. The design solution must satisfy the following:
This project is to redesign the user interface of a web application which enables users to have a fun shopping experience while purchasing 3D printer cartridges. The design solution must satisfy the following:
I started from studying the shape of the the printer cartridge. Does it look like a donut or a sphere? What about colors? Maybe I can use low poly to display different color options?
This project is to create a marketing campaign to highlight a product of DHC skincare that targeted to specific audiences. The campaign included a microsite, a video, Facebook page, newsletters and promotional banners: