Morgan

Email me

Back

Helping SME owners love their business again

Helping SME owners love their business again

Manage your team, roster in minutes.

Anywhere. Anytime.

I worked with the lead designer on overhauling the entire product suite. I was responsible for the redesign of the desktop web app. I performed user research, iterative prototype development, and developed the design system still used on their web app today.

  • Led overhaul of desktop app design, resulting in jump from 40k to 270k users the following year.

  • Deputy is now worth over $1 billion

Launch Deputy

Deputy is a workhorse application for any company that needs scheduled shifts for its employees. It supports scheduling, timesheets, workplace communication, and integrates with supporting software like Xero, Vend and Shopify. Deputy works with a desktop web application, an iPad app, an iPhone app and an Android app, all handling the same data in various ways, for various use cases (the mobile apps are primarily for employees, whereas the desktop app is primarily for employers).

When I joined Deputy, the product had been in development for just over 6 years. They’d gone through two major iterations of the software. The first version was fairly well-designed, but was overly complex and used dated design patterns. The second version simplified the UI significantly, but it had no conventions or consistency. This led to a lot of cognitive effort trying to understand each screen, as it had no relationship to the others.

Project goals

What are we actually trying to do here?

My task was to lead the third iteration of the software - Deputy 3. This iteration had a few major goals:

  • It needed to support all features of both Deputy 1 and 2, while at the same time simplifying the UI

  • It had to unify the design and product development of the desktop, tablet and mobile apps that had drifted apart over the years

  • It had to work on any device (previous iterations were fixed-width, desktop-only apps)

  • We needed to update from Bootstrap 2 to 3, which meant rewriting the CSS codebase from scratch

  • It had to be more fun, inviting, and intuitive.

On top of all of this, we were also implementing new features. We planned to expand the functionality of the News Feed, adding comments and attachments; this would be rolled out simultaneously with updates to the mobile and tablet apps. We also added an easy way for employees to view past timesheets, upcoming shifts, see who they’d be working with, and claim open shifts.

And we only had 6 months.

The second half is visualisation. This is where the executives—generally removed from the ground-level operations of the company—can investigate the data gathered by the coaches and use it to make decisions.

My task was to lead the third iteration of the software - Deputy 3. This iteration had a few major goals:

  • It needed to support all features of both Deputy 1 and 2, while at the same time simplifying the UI

  • It had to unify the design and product development of the desktop, tablet and mobile apps that had drifted apart over the years

  • It had to work on any device (previous iterations were fixed-width, desktop-only apps)

  • We needed to update from Bootstrap 2 to 3, which meant rewriting the CSS codebase from scratch

  • It had to be more fun, inviting, and intuitive.

On top of all of this, we were also implementing new features. We planned to expand the functionality of the News Feed, adding comments and attachments; this would be rolled out simultaneously with updates to the mobile and tablet apps. We also added an easy way for employees to view past timesheets, upcoming shifts, see who they’d be working with, and claim open shifts.

And we only had 6 months.

My task was to lead the third iteration of the software - Deputy 3. This iteration had a few major goals:

  • It needed to support all features of both Deputy 1 and 2, while at the same time simplifying the UI

  • It had to unify the design and product development of the desktop, tablet and mobile apps that had drifted apart over the years

  • It had to work on any device (previous iterations were fixed-width, desktop-only apps)

  • We needed to update from Bootstrap 2 to 3, which meant rewriting the CSS codebase from scratch

  • It had to be more fun, inviting, and intuitive.

On top of all of this, we were also implementing new features. We planned to expand the functionality of the News Feed, adding comments and attachments; this would be rolled out simultaneously with updates to the mobile and tablet apps. We also added an easy way for employees to view past timesheets, upcoming shifts, see who they’d be working with, and claim open shifts.

And we only had 6 months.

Getting to work

and down to business

One of the benefits of working with start-ups is that there’s always someone new joining. I like to take these new employees and test the product with them while they’re still fresh-faced.

This user testing allowed me to focus my efforts on the aspects of the product most people found confusing. With tens of thousands of people using Deputy, I didn’t want to fix what wasn’t broken. The response we’ve received from the majority of users indicates we were successful here.

Once we had some direction, I started work on all three aspects of the project - code, user interface, and visual style. I like to alternate my focus. It’s useful to remove the restrictions of a developer mindset and focus purely on the design. I don’t usually bother with prototyping applications, as I can code up a functional prototype quickly, and once it’s in the browser it’s much quicker to edit data and design details.

The second half is visualisation. This is where the executives—generally removed from the ground-level operations of the company—can investigate the data gathered by the coaches and use it to make decisions.

One of the benefits of working with start-ups is that there’s always someone new joining. I like to take these new employees and test the product with them while they’re still fresh-faced.

This user testing allowed me to focus my efforts on the aspects of the product most people found confusing. With tens of thousands of people using Deputy, I didn’t want to fix what wasn’t broken. The response we’ve received from the majority of users indicates we were successful here.

Once we had some direction, I started work on all three aspects of the project - code, user interface, and visual style. I like to alternate my focus. It’s useful to remove the restrictions of a developer mindset and focus purely on the design. I don’t usually bother with prototyping applications, as I can code up a functional prototype quickly, and once it’s in the browser it’s much quicker to edit data and design details.

One of the benefits of working with start-ups is that there’s always someone new joining. I like to take these new employees and test the product with them while they’re still fresh-faced.

This user testing allowed me to focus my efforts on the aspects of the product most people found confusing. With tens of thousands of people using Deputy, I didn’t want to fix what wasn’t broken. The response we’ve received from the majority of users indicates we were successful here.

Once we had some direction, I started work on all three aspects of the project - code, user interface, and visual style. I like to alternate my focus. It’s useful to remove the restrictions of a developer mindset and focus purely on the design. I don’t usually bother with prototyping applications, as I can code up a functional prototype quickly, and once it’s in the browser it’s much quicker to edit data and design details.

Challenges

Potholes, hurdles and pitfalls

The project really challenged my ability to design on a micro and macro level simultaneously. One moment I would be organising the information architecture, fitting each of the features where it made the most sense, and the next I would be researching and testing how best to provide affordance for a particular button.

Macro design - card sorting helped us place each feature in its ideal place within the navigational structure.

The project really challenged my ability to design on a micro and macro level simultaneously. One moment I would be organising the information architecture, fitting each of the features where it made the most sense, and the next I would be researching and testing how best to provide affordance for a particular button.

Macro design - card sorting helped us place each feature in its ideal place within the navigational structure.

Macro design - card sorting helped us place each feature in its ideal place within the navigational structure.

Micro design - the iteration of accordion buttons

One problem we ran into again and again was the lack of time. A few really interesting ideas ended up being pushed out, but might get revisited later on. One idea that got cut was an ‘inline modal’. We needed a way to place a modal over a modal over a page, so I came up with the solution of making the first modal inline, not overlaid. This video is a messy prototype, but it demonstrates the solution pretty well.

Another major issue was that we were trying to bring the desktop visually in line with the mobile apps, but many design decisions simply didn’t translate from mobile to desktop. We started by questioning some of the assumptions that had been made previously, and we ended up overhauling some key aspects of the mobile apps and meeting the designs in the middle.

Another major issue was that we were trying to bring the desktop visually in line with the mobile apps, but many design decisions simply didn’t translate from mobile to desktop. We started by questioning some of the assumptions that had been made previously, and we ended up overhauling some key aspects of the mobile apps and meeting the designs in the middle.

Results

Results

40k to 270k users in 1 year

In the end we finished coding right on the 6 month mark, and after a few weeks of QA, we launched in June. I was expecting a substantial amount of push-back, as it was a massive redesign (and I’ve seen how Reddit reacted when the design team increased the font size by 1px), but the response to the new version has been really positive. With this new release, and a few other key strategies, Deputy has gone from 40,000 users to 270,000 in less than a year.

Of course, this is just the beginning. Shipping a new version or feature will always bring really valuable feedback, and constant iteration is the key. I’m looking really forward to seeing how Deputy continues to develop.

In the end we finished coding right on the 6 month mark, and after a few weeks of QA, we launched in June. I was expecting a substantial amount of push-back, as it was a massive redesign (and I’ve seen how Reddit reacted when the design team increased the font size by 1px), but the response to the new version has been really positive. With this new release, and a few other key strategies, Deputy has gone from 40,000 users to 270,000 in less than a year.

Of course, this is just the beginning. Shipping a new version or feature will always bring really valuable feedback, and constant iteration is the key. I’m looking really forward to seeing how Deputy continues to develop.

Legacy links

Home

Case studies

Writing

Legacy links

Home

Work

Writing