Perpay Admin Refresh

The Challenge: Creating a more user-friendly admin tool

The operations team, who manage all client based services and information, came to the product team with a problem: the current admin tool was too difficult to use.

My job was to design a product-scalable and in-scope Admin tool that increased the Operations teams' efficiency and ease of use.

Using Agile Framework

For this project, I utilized agile framework with 2 week sprints.

Research

Conducting user interviews for discovery

Since our target audience was within our company, conducting interviews with the operations team was a seamless process. We specifically chose two members of the operations team who were responsible for tasks related to the most frequently accessed page on the admin, namely the borrower page, or the customer details page.

We requested them to guide us through their task processes, recording the time taken for each step. Then, we asked about their pain points, preferences, and the tools they found most useful in their workflow. The two biggest complaints they had were:

Page Length is too long

The extensive length of the page makes it challenging to swiftly scan and locate customer details. Page length also contributes to longer loading times.

Page loading times are too long

The borrower page's extensive length and data resulted in a prolonged loading time of approximately 3 minutes, significantly extending the duration of tasks.

Workflow not optimized

Each team member follows a distinct workflow, but the inability to customize the order of information hampers their individual processes.

Not all tools are accessible

Users want all essential tools readily accessible within the borrower page since the other tools also suffer from lengthy loading times.

Defining the problem statement

Inefficient workflows in the current admin design

Members of the operations team require an optimized Admin design with shorter page lengths and quicker loading times. This is essential as Perpay experiences rapid growth and necessitates a tool that can scale with its expanding products.

Specific goals to keep in mind:

Less scrolling is better + Show less but don’t hide

Borrower page should be a one-stop-shop

Workflow customizable to the user

Page Load Speed > Page Function

Card Sort

With the team, I led a card sorting session for the information architecture of the new borrower page.

Sketches

In the sketches, I ideated a few potential layouts for the admin, and ultimately landed on the one below:

Horizontal ayout to save vertical space

Collapsible cards to save vertical space

Multi-tabbed for product-scalability

Toolbox with all tools needed

The final solution: Client management made simple

Expanded Page Length Comparison

Conclusion

Key task duration time was reduced by 20%

Following my presentation of the designs to key stakeholders, including the Operations team, product team, and Chief Product Officer (CPO), I facilitated a seamless handoff of the designs to the engineering team, ensuring that we met our scheduled launch date. Upon the tool's launch, we re-evaluated the key task flow, and the time required was notably reduced by 20%.

What would I do differently next time?

Regrettably, due to time and resource constraints, I couldn't develop an Admin tool with the level of aesthetics I had envisioned. Given more engineering capacity, I would have dedicated additional effort to create data visualizations and enhance the organization of metrics for improved scannability. Nonetheless, as this tool primarily served an internal purpose, aesthetics took a back seat to the primary objective of reducing task duration times, which we successfully achieved.