← BACK

Palo

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

  • User research.
  • Market study and competitor analysis.
  • Prototypes using Adobe XD.
  • Hosting cross-functional design critiques and client reviews.
  • Developer handoff.

Collaborators

  • Front-end and back-end developers.
  • Co-founders of Insite Finland - the client company.

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.

1-Who will use this editor?

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.

Persona of a professional 360 creator

Persona of a business owner

2-How users are making 360 tours

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.

3-Market study

Four competitors that are available on the market are Walkinto, GoThru, Tourmake, and Marzipano. After trying these products, I realized two things:

#1 No products have enough advanced features but are still simple to use.

Market landscape

#2 The user interface of these products needs a lot of improvements.

Interfaces of competitor products

I attached one screenshot of each product above.

4-User Stories Of Palo

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.

12 user stories for a business owner:

  1. As an user, I want to view, manage, and create my tours online so that I can share the workload with my colleagues.
  2. I want to see my tours’ analytics so that I can track my tours’ performance.
  3. I want to upload all my 360 images to the editor so that I can access my files at any time.
  4. I want to add arrows so that I can connect all 360 images.
  5. I want to add hotspots so that I can add extra information to the tour.
  6. I want to add a floor plan with location pins so that I can show the viewers the location of the image from top-down.
  7. I want to add menu lists so that I can let the viewers easily navigate to different locations inside the tour.
  8. I want to input the tour’s details so that I can show the viewers general information of the tour.
  9. I want to set an initial view so that I can decide the first view of the tour.
  10. I want to preview my tour so that I can correct my mistakes before publishing the tour.
  11. I want to pay for hosting packages so that I can publish my tour to the viewers.
  12. I want to add and edit details of my profile so that I can let my colleagues know who I am.

4 additional user stories for a professional 360 creator:

  1. As an user, I want to add members with different roles so that I can share and control my work internally.
  2. I want to customize the design of elements showing to the viewers so that I can present my company’s brand to the tour.
  3. I want to adjust advanced tour settings so that I can make sure the viewers receive the best experience from the tour.
  4. I want to pay for an estimated number of hosting packages upfront so that I can control my total company’s budget.

5-Designing The New UI

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.

The Dashboard


New dashboard

Here were how I improved the Dashboard layout:

  1. Removed unnecessary items in the left menu after redesigning the payment flow. The new menu only has Tour, Profile, and Analytics.
  2. Moved the menu to the top and align them with the logo. The whole design is more consistent when the menu of the Dashboard and the Editor are both on top.
  3. Removed two buttons — Easy Embed and Cart then put those buttons to Profile tab.
  4. Gave more space to display a list of tours. The text size in the list is bigger, which helps users, particularly in middle age, read easier.

The Menu in Editor

New menu

To avoid making users confused about different icons:

  1. I organized those features into buttons with icon and caption text.
  2. I removed features such as tag this tour, languages, add chat widget, add sound, paste street view URL, guided tour, toggle fullscreen. According to Palo’s observation, those features are not commonly used by users.
  3. The buttons were arranged similarly to the common user flow.

Adding Arrow feature in Editor

New add arrow feature

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.

Adding Hotspot feature in Editor

New hotspot button

First, I replaced pop-up for hotspot types with a drop-down menu.

New hotspot item
New hotspot types

Second, I restructured the process of adding hotspot.

  • The Walkinto’s process: select type -> select template (design) -> select location -> add content -> customize design.
  • My process: select type -> add content -> select location -> customize design.

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.

Adding Menu Lists feature in Editor

New menu list

I reduced the number of icons by using the hover effect and standardize their icon size.

Adding Floor Plan feature in Editor

New floor plan

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.

6-Communicate with developers

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.

Developers can see all components
Developers can view all size


My Learnings

User Flow is powerful

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.

Explain details in the design to the client

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.

Communicate the scope of the project to the salespeople

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!

← Back to all projects