Projects

TradeEpay.

TradeEpay is a desktop and mobile platform that facilities payments and contracts between tradespeople and their clients. The engaged me to assist in addressing issues with users not understanding their core workflow, and poor build quality.

This feature case study outlines the process we I went through to improve user's ability to understand and complete the setup of a Job on the platform.

Defining the problem.

User Personas

Most features of this platform involved two user types - the client and the tradesperson. I broadly defined these as a mid 30s male, not so tech savvy and self employed on the tradesperson side, and the client as an early 40s female with renovating a property with their family.

Beta Test

The client was testing with a subset of closed beta users when I was approached. Through this they had identified several trends pain points from the users, and wanted a rethink of the platform’s key job creation workflow based on this feedback.

Audit

I ran through the existing platform workflows several times from the perspective of both user types, and identified both some low hanging fruit that might need addressing, and larger chunks of work we could look at in ideation.

Ideating solutions.

Low-Hanging Fruit

With a design direction already in place, it was straightforward to begin addressing smaller low hanging fruit improvements I predicted would see positive results immediately. These would also keep the developers busy during ideation and design. Many if these pertained to obvious bugs.

Mockups

I came up with a number of approaches to solving issues with the Job creation workflow. These were reviewed and voted on internally, and with a small subset of closed beta users. I proposed simplifying the workflow to contain less modals, give more glanceable information in a dashboard format, cut back on redundant UI elements (such as having two progress bars for a project). The motivation was to always make it clear to the users what the status of the project was, both from the tradesperson and client perspective.

Testing assumptions.

UI Design

Once a clear solution was decided upon, I went through and ensured the rest of the platform designs were aligned with the new direction. This involved updating a very large set of existing workflows in Figma to align with the newly proposed design patterns and component architecture so the developers could properly interpret the designs.

Proto-tests

Because certain key design patterns had ben updated in the existing screens outside of the key workflows I was tasked with improving, we decided testing rounds should include this broader scope. This resulted in the creation of a large Figma prototype that could be broken out into discreet stories for testing. I set these up for testing in Maze, with a framework the client could use to test with their beta users.

Post-Signup

  • Depending on the user’s options during signup, a card is shown to suggest what hey should do next.
  • This approach was chosen to prevent drop-off post signup from users getting lost as to their logical next steps.

Jobs List

  • A dock was added to the app to assist in ease of navigation, where previously the linear structure lead to many users becoming lost or running into dead ends
  • Job status is clearly shown on the job card to let the user know which jobs require attention. This is relevant for the tradesperson user type who might be running multiple jobs.

Job Details

  • Tabs were used here to clearly delineate the most important data sets of a job, where previously this was a flat list that was difficult to navigate.
  • Job status was simplified to a linear progress, with clear actions and explanations shown per-step to give clarity to the workflow.

History

  • A job history was added to record key events in the job’s lifecycle. This was important for both user types so they could keep track of any disputes or unexpected changes to a job that might result in a negative experience if not clearly recorded.

Implementing and iterating.

Design System

The existing platform had no rigid design system in place, so I created one based on our new design approach and used this as the basis for briefing the developers on moving forward with a consistent component set. Another intention behind the design system was to prevent the occurrence of visual bugs that plagued the existing platform.

Development

With a clear design system in place and a well furnished prototype, the handoff and sprint process with the developers went very smoothly, with an iterative review process that still continues. The app currently remains in closed beta.

Iteration

I went through several rounds of design iteration based on both user and stakeholder feedback at this stage, and fed iterated feature sets into the sprints of the client's development team.

Glamour shots.

More Work

Check these out next.

More projects upon request.

Let's chat about more projects in more detail, and see if I’m a good fit for your team.

Let's Chat