Phil Swan / Trade Clients

Prototyping the Trade Clients app

A fully featured mobile application for tradespeople who don’t typically work in a traditional office environment. An initiative by the ambitious technology startup, Innovosys.

My role: Design lead
Interaction design, application design, branding

2012 – 2013

Innovosys came to Erskine with the idea for an app that tradespeople such as electricians, joiners and plumbers could use on the move. They understood their target demographic and had already conducted market research. It was our job to develop their idea into something tangible so that the concept could be properly tested with real users.

We ran workshops with both the client and the target audience which helped us to prioritise functional requirements from user stories.

The next step was to turn sketches into wireframes and link them together using InVision. Working in this way allowed us to make rapid changes and get a feel for how the application would flow.

As the product started to take shape, we moved into working code. We decided that to work as quickly as possible; we’d work with standard web technologies such as HTML and CSS.

Greyscale screenshots of Clients, Reports and Print queue
The prototype began as a series of low-fidelity linked images
High-fidelity screenshots of Clients and Jobs
After some early iterations, we built a high-fidelity HTML version

Though the scope of the project was ambitious, the navigation was straightforward: Clients, Calendar, Reports, Settings and Print queue. The design enabled users to fully manage their jobs through the app, allowing them to create and manage estimates and invoices and take mobile payments while on location.

Site map
Mapping out the mobile application functionality

I worked closely with the developers to create both a style guide and a set of modular, scalable components, which we then assembled into a full prototype. Throughout this process, we continued to refine the application while improving its usability.

Demo of the prototype

The aim was to design an app that could be rolled out to iOS, Android and have a native web version. Rather than designing for one particular platform, the prototype was designed to be device agnostic in its style and behaviour. For time efficiency, we focused on the small screen experience first but made sure that the layouts would adapt to larger tablets using responsive design principles.

Job screen on an iPad
More options are in view on larger screens

An important part of the branding was to incorporate a symbol that would clearly be identifiable at small sizes. This was based on the initials ‘T’ and ‘C’ and can be rotated to indicate loading progress.

Logo variations
Design style guide

The outcome was a responsive front-end prototype optimised for mobile and tablet devices. The prototype helped Innovosys bring their vision to life and secure a second round of funding to develop a beta.

Logo with caption - Keep track, get paid

More projects