iOS & Desktop

Escrow - My Transaction

iOS & Desktop

Escrow - My Transaction

iOS & Desktop

Escrow - My Transaction

iOS & Desktop

Escrow - My Transaction

Background

Project background

Escrow.com is a trusted online platform that provides secure and efficient escrow services for a wide range of transactions, offering peace of mind to buyers and sellers worldwide.


With Escrow.com's My Transaction Dashboard, users gain full visibility into their transactions and real-time status updates, empowering them to stay informed and in control every step of the way.

My role

Being the only designer, I closely cooperate with the product manager and manage a group of engineers. In unison, we join forces to turn concepts into outstanding products. I interpret user requirements into instinctive designs, harmonizing them with the product plan.

Research

Research

Research

The users

Before we get into the rest, let's look at who our users are.

Buyers & Sellers

Buyers and sellers are typically individuals or businesses that conduct their transactions on third-party platforms, such as eBay for general merchandise or vehicles, and GoDaddy for domain names. However there are cases were buyers purchase directly from the sellers.

Brokers

Escrow.com is also used by a variety of brokers such as domain brokers, automotive brokersm, art brokers, jewelry brokers, and intellectual property brokers just to name a few.

What does our users say?

We gathered user feedback through surveys and direct complaints. Here is what they said:

"What do I need to do?"

"What do I need to do?"

"This is so messy"

"This is so messy"

"What is going on with my transaction?"

"What is going on with my transaction?"

"What is going on with my transaction?"

"This looks outdated"

"This looks outdated"

"Looks very old"

"Looks very old"

"Looks like early 2000s website"

"Looks like early 2000s website"

"I don't know what to do"

"I don't know what to do"

"The status looks like a button"

"The status looks like a button"

"The status looks like a button"

"No visual heirarchy"

"No visual heirarchy"

"I want a filter function"

"I want a filter function"

The Problem

From the user feedback that we gathered, we identified the main problems that we need to address.

  1. Lack of Clear Prioritization for Urgent Matters:

    Users faced difficulties identifying urgent tasks within transactions. Without clear distinctions or cues, crucial actions got lost in the information overload, leading to delays, misunderstandings, and potential consequences.


  2. Outdated and Cluttered User Interface:

    Users struggled with a cluttered and outdated interface, hindering their focus on transactions. The overwhelming design and disorganized layout made it challenging to locate essential features efficiently.

  3. Poor Visibility and Readability of Transactions:

    The previous system lacked visibility and readability, making it difficult for users to understand the transaction details and statuses. Locating important information like status, dates, and involved parties became a struggle, causing confusion in transaction management.


  4. Absence of Sorting and Filtering Functions:

    Users lacked sorting and filtering options, forcing manual searching through a growing list of transactions. This inefficient process added frustration, impeded productivity, and hindered workflow efficiency.

  1. Lack of Clear Prioritization for Urgent Matters:

    Users faced difficulties identifying urgent tasks within transactions. Without clear distinctions or cues, crucial actions got lost in the information overload, leading to delays, misunderstandings, and potential consequences.


  2. Outdated and Cluttered User Interface:

    Users struggled with a cluttered and outdated interface, hindering their focus on transactions. The overwhelming design and disorganized layout made it challenging to locate essential features efficiently.

  3. Poor Visibility and Readability of Transactions:

    The previous system lacked visibility and readability, making it difficult for users to understand the transaction details and statuses. Locating important information like status, dates, and involved parties became a struggle, causing confusion in transaction management.


  4. Absence of Sorting and Filtering Functions:

    Users lacked sorting and filtering options, forcing manual searching through a growing list of transactions. This inefficient process added frustration, impeded productivity, and hindered workflow efficiency.

Design goal

To create a dashboard that is easy to use, efficient, and effective for managing transactions.

Design

Design

Design

Sketches

I began sketching solutions based on the problems and design goals. One solution that received positive feedback from stakeholders was to add an "Action required" tab and status tag to address the lack of prioritization problem.

Lofi wireframes

I started with low fidelity wireframes to communicate my ideas to my stakeholder and get initial feedback. I started by creating a simple sketch of the overall layout of the design before slowly adding the required details.

1st Hi-fi designs

The initial feedback on the lo-fi designs were mostly positive. The main criticism was the tabs were confusing. So we changed it from "ongoing", "pending", and "complete" to "outstanding", "open", and "closed", a language that our users are more familiar with.

Preparing for user testing

I continue to build the necessary features and creating a functional prototype in Figma to use for user testing. I have also planned user testing questions to inform and validate my design.

Testing

Testing

Testing

Sketches

I began sketching solutions based on the problems and design goals. One solution that received positive feedback from stakeholders was to add an "Action required" tab and status tag to address the lack of prioritization problem.

User testing

I conducted user testing with 12 participants aged 24 to 46 who have experience with high-price purchases.I gave the participants a scenario of tracking a transaction that required their action and asked them to speak aloud their thought process as they used the prototype.

… And here are the results

4

/12 users

Understands what "outstanding" tab means.

This is not ideal so we had to change the name to something else. A few participants suggested "pending".

12

/12 users

Understands what "requires action" tag means.

This finding validates our solution for prioritizing urgent transactions.

12

/12 users

Understands what "open" & "closed" tab means.

This finding also validates our solution, so we don't have to change it any further.

4.75

/5 rating

12 users rated the filter function out of 5

This means that our filter function works pretty well. One improvement some users suggested is to have the selected filters as tags next to it.

4.58

/5 ratings

12 users rated the sort function out of 5

The sort function is working well, but the sort arrows are too small, causing usability issues. Five users didn't notice the arrows at first.

7

/12 users

Prefers to have an expanding list with infinite scrolling

While the other 3 participants prefer to have pagination as they find it easier to navigate.

User testing findings

User testing confirmed some design decisions, while also revealing areas for improvement. The data suggests that the design is effective and user-friendly, but it's also worth noting the 4 out of 12 users who did not fully understand the "Outstanding" tab, which may warrant further investigation or potential design adjustments.

READABILITY

4.54

/5

ACCESSIBILITY

4.5

/5

OVERAL EXPERIENCE

4.63

/5

Polish and design system update

As our design became more intricate and considering our plans to tackle additional projects, we required a strategy to preserve our aesthetic and functional consistency across varied designs, alongside a more effective method for our engineers toimplement them—thus, we a design system. We opted for Material UI design system, due to their aesthetically pleasing elements and the comprehensive set of components they provides.

What does our key users say?

The next step was sending our newly polished figma prototype to our power users, and their feedback are interesting, compared to our user testing.

Positive feedbacks

  • Aesthetics

Overall, the new design's aesthetics received highly positive feedback.

  • Clear prioritization for urgent matters

Our key users appreciate having urgent transactions highlighted and displayed clearly. This solution addresses the issue of crucial actions getting lost, which can lead to delays, misunderstandings, and potential consequences with their clients.

  • Improved visibility and readibilty

The dashboard is now less overwhelming, with color-coded statuses on transactions that are easier to understand.

  • Sorting and filter functions

Our power users are very happy with the addition of the sorting and filter functions

Negative feedbacks

  • Load more feature is inefficient

For power users who deals with 10+ transaction a day, load more and infinite scrolling when browsing the transaction is the wrong pattern.

"Every time I want to work on the next transaction, I have to click again 'Open' + "Amount' + 16 times on the 'load more', and scroll forever.


This is time consuming, not an improvement."

- User

  • Some status tag aren't clear

Some wording on the status tag are a bit confusing.


"'Delivery' is to broad it should be more specific, something like 'awaiting delivery'"
- User

  • Slightly overwhelmed with the changes

One feedback that stood out was a user found the changes a bit overwhelming, this is due to the change in workflow. Even though the changes are positive, this sense of 'being overwhelmed' when seeing the design for the firs time is not a good experience, especialy for new users.

The final design

To wrap up the project, I did the final changes and polish based on the feedbacks from our power users.

Product walkthrough

To solve the issue of users getting overwhelmed with the new layout, i created a product walkthrough or guide to help user understand where the key features are and

High fidelity designs

To wrap up the project, I did the final changes and polish based on the feedbacks from our power users.

The results

When the My Transaction design was released in october 2021, we found that the revenue was up by 159% from the last 6 months. "This huge growth in revenue and GPV is largely contributed by our Account Management Team as account managed transactions have grown 460% WoW." Which means that the new transaction dashboard has helped improve the process of managing transactions.

Lesson learned

  • When designing a large scale product, a design system is required to maintain consistency, streamline collaboration, and accelerate the development process by providing a centralized repository of design principles, components, and guidelines.

  • Performing user testing with different types of users is crucial, as their feedback may vary, as is the case with casual users and power users.

  • Ask for feedback frequently especially from users to ensure that the final product meets their needs, preferences, and usability expectations.

Site built in Framer

Copyright© 2022.