Introduction

About the project

PlanetVerify is a tool for streamlining the document flow process for property letting & real estate professionals. The company has now expanded its global portfolio to help businesses across commercial and private real estate, HR, telcos, professional services, and other sectors.
For this Industry Defined Project (IDP) project, I collaborated with two other UX designers from Springboard. PlanetVerify wanted our team to improve and develop the UX/UI on their webapp. They would like to see suggestions for any improvements of their current process by the end of the project.

Role

UX design, UI design, User researcher, wireframe, high fidelity prototype, and usability test.

Tools

Figma, google doc, Google meeting

Problem

Users feel frustrated with current onboarding experiences.
Some users have mentioned the current webapp looks a bit outdated, the company would like to see if we could redesign their interface.

Solution

Redesign for document uploading page and add a review process before submit forms

Goal

  • Short the time for users fulfilling a data request by finding pain points on current user flow and improve it;

  • Redesign the user interface by finding out why users feel it is outdated and how to improve it.

Empathizing with users

Research

Our team wants to better understand how to improve the onboarding experience for Planet Verify users. We concluded that the best way to do that was through secondary research & user testing of the existing interface.
Here are the key takeaways:

  • Users were not sure if each step was completed;

  • Users were not aware that their information would be saved until the end;

  • Users requested that they know how far along they are in the process;

  • Many users expressed the desire to edit their information;

  • The input fields are inconsistent.

How might we?

After sharing all the research and test results within the team, we prioritized on problems we wanted to focus and did a brainstorm on the how might we help users have better experience with current flow.

User flow

The title for each page on PlanetVerify’s user flow is customizable, it really depends on what kinds of documents the client would like to ask from the end user. However, the interface and features would always be the same.
For our project, we decided to work on Tenancy’s form as it is asking a good variety of questions, and it requires the end user to upload different kinds of documents.

We came up with below revisions based on our 1st round test findings:

  • Add a save feature after each step;

  • Add a “review” page at the end of their current flow.

Design

Sketches

PlanetVerify has already built their WebApp; I took screenshots for each screen for myself to compare and review along the process, just in case I missed any essential features or content that are needed for each step.
Based the users feedback, I decided to include below features:

  • Add a “Save” button on each page;

  • Add a progress bar;

  • Add a “review” page at the end of their current flow;

  • Add a confirmation message when users submit a form.

Wireframes

After sketching all the essential screens, me and my team went through each screen and iterated our sketch by:

  • Adding a go back arrow at top, so users could have a option to go back to previous page;

  • Keeping one “Save” button on the data request page for consistency purposes;

  • Considering the time we have left, we decided to use the published wireframe kit that is already built in the Figma community.

Design system

PlanetVerify has a style guide for their website which includes their Logo, Colors, Typography and Language style. There is nothing built for their mobile or Webapp yet.
We discussed this with PlanetVerify’s product manager, and we suggested using the same Color and Logo from the website style guide.
For Typography, Icon and Component, we suggest using Pegaus’ mobile design style kit in Figma as the interface for mobile App would be really different from a website.

Style guide Planet Verify shared with us:

Style guide we build for Web App:

High fidelity screens

After publishing the design system, we applied everything to the Hi-fi screens.

Here are some examples of main screens we worked on. 

Left: Screen PlanetVerify currently has. 

Right: Screen we create.

Usability Test

The second round test, we tested it with 6 users.

Key Findings:

😃 It takes less than 10 minutes for users finish the whole process which is faster then what we did in first round;

😃 Users were glad to see the progress bar to show the total questions they have;

🤔 Users would like to get a hint or tip on how IBAN# looks like;

🤔 Users feel a little anxiety because they do not have related documents to upload at the moment, but they were not sure if they could skip and upload things later.

High fidelity Test

Iteration

Problem:

User were not sure if they could skip and upload things later.

Solution:

  • Adding a “skip” button on each page;

  • Adding a context under “SAVE” button, state “you can save first and edit later”;

  • On the landing page, adding a tutorial video to show users they may edit everything before submitting.

  • Add a bubble message next to the “SAVE” button when users enter the upload page.

    For the consistency and time management perspective, we decided to go with second solution for now.

More screens

Final thought

I enjoyed the entire journey starting from meeting with the client to delivering the final prototype together with my team. I’ve learned a lot during the process and realized how important communication and collaboration is as a UX designer.
I am really glad to see that users are using less time on the onboarding process, and also the PlanetVerify’s team is happy with the final solutions and designed screens we delivered at the end.

What could have done more?

  • We can update the placeholder for box such as “bank info” “phone number” with more clear instructions so user could know they format of the information they need to enter;

  • We could work more on the navigation bar; 

  • We only did the usability tests with 6 people, if we had time, we could conduct more test to find out the pain points.