An intuitive editor to easily create 360 virtual tours
Product
Palo - an online editor for making 360 virtual tours.
The context
Insite Finland is a leading service provider that helps companies recording and making custom 360 tours. They saw an opportunity in making an online software that enable their customers make 360 tours themselves.
They partnered with an IT consultancy where I worked as UI/UX designer to build the software.
My role
Collaborators
Timeline
2 months from Dec 2019 to Jan 2020.
PROBLEM
The client wanted a 360 tour editor that both they and their non-technical customers can use intuitively.
PROCESS
After researching, I decided to design Palo based on Walkinto - the most advanced 360 tour editor, but in a more user-friendly way.
OUTCOME
Pixel-perfect designs for development.
Since 360 cameras are getting cheaper, the number of restaurants, shopping malls, and real estates using 360 tours is increasing rapidly.
A 360 tour editor can be used by two types of users - a professional 360 creator and a business owner. After getting insights from the client, I formed the user personas below.
From client's insights and my observations, I summarized 9 common steps for users to create a new 360 tour.
Step 1: Sign in to an editor, then users will see a dashboard where they can view and manage all their tours.
Step 2: Click on button that lead users to the blank editor. Button name can be Create Tour, New Tour, etc.
Step 3: Upload 360 images from a computer, Google Drive, or Google Street View Url.
Step 4: Add arrows to connect all uploaded images. A virtual tour is simply a combination of 360 images linked with arrows.
Step 5: Add hotspots to show extra info. Info can be texts, images, a booking form, and links.
Step 6: Add navigation such as menu, floor plan to help viewers navigate between locations.
Step 7: Edit styles of all elements inside the tour.
Step 8: Preview the tour as a viewer.
Step 9: Pay for hosting package and share the tour publicly.
Four competitors that are available on the market are Walkinto, GoThru, Tourmake, and Marzipano. After trying these products, I realized two things:
I attached one screenshot of each product above.
I implemented the user stories technique to clarify product features for Palo. The stories below were a result of a feedback-loop circle with client team.
From studying the areas of improvements, I decided to design Palo based on the redesign of Walkinto in a more user-friendly way.
I always start designing an application with paper and pencil. It helps me to focus on structure and content, avoiding lengthy thoughts about colors and details that should come later in the process.
The new editor has two primary parts: Dashboard and Editor.
In total, I consumed 50 pages of A4 papers during the entire project. I illustrated some key changes below.
Here were how I improved the Dashboard layout:
To avoid making users confused about different icons:
To help users add arrow to connect multiple 360 images easier, I made one fundamental change in this design — increasing workspace size.
In Walkinto, the workspace for adding arrow is limited in a popup window. It is a bit difficult for users to adjust the direction of the destination image.
With advice from the client, I made the workspace fullscreen. Another benefit of fullscreen is that users can have the same feelings as a viewer when clicking an arrow.
First, I replaced pop-up for hotspot types with a drop-down menu.
Second, I restructured the process of adding hotspot.
The key difference is that I moved the process of customizing design after adding the main contents. The design can be set at the beginning with the Theme feature. Business owners actually prefer the design of elements is consistent and followed by brand guidelines.
I reduced the number of icons by using the hover effect and standardize their icon size.
In Walkinto, I became aware that the path to edit areas and points is not clear. Therefore, I made those editing buttons more visible in my design.
In this project, I worked with three developers — two front-end and one back-end.
Before the development, we hosted a few sessions with them to explain how this product works and how we can work together.
Then, I created for them a simple design system including all text fonts, text sizes, icons, and colors.
Finally, I sent them the development link where they can inspect the pixel of all elements. I already did all the pixel calculations so they only need to focus on the logic behind the product.
After I created the common user flow of 360 tour editor, I felt a lot more confident in designing this product. Furthermore, I was able to look at the competitors’ product from a user’ perspectives.
From previous projects, I learned that clients tend to give extra feedback during the development, which really makes our developers suffer. This time, I helped the client confirm the design beforehand by going through with them all detailed components. The result was that there were nearly no changes to the product interface during the development process.
We didn’t have a project manager at that time so salespeople allocated the resources for the project. I spent more than the expected resources; however, my company and the client were all happy with the final result!