Given the much larger percentage of mobile users versus desktop users, Found's desktop platform was largely built as an MVP. As the product evolved, the desktop experience quickly became outdated. It lacked feature parity with mobile, it used inconsistent, legacy design patterns, and it didn't attract the type of upmarket customer Found was targeting – who oftentimes prefer a desktop experience for more substantial tasks.
Internally, various teams wanted to build features on desktop to bring parity with mobile, but actually doing so was a tough roadmap sell: the existing design and tech debt created a significant time cost that was usually too high.
This project happened in tandem with Found's typical feature work – so there was no product manager to coordinate timing and sequencing. As the lead designer, I wore somewhat of a dual designer-PM hat, where I assembled project timelines, vetted component ideas, coordinated resourcing and roadmap buy-in with product and engineering leads, relayed updates to company leadership, and designed new components and core page layouts.
The goal was not to design every single page in the product myself, but rather to create a core component framework that other lead designers at the company could leverage on their individual teams going forward.
Making the updates bit by bit meant that we had to be comfortable with some visual inconsistency. This was painful from a design perspective, but was the best approach from an efficient product development point of view. The biggest challenge on this project was keeping the scope small enough that we could complete the work in a reasonable amount of time – while also making sure that we were actually making meaningful, noticeable changes.
We started with front-end styling updates to match with what was current in mobile. These could be updated fairly quickly and included pieces like color value consistency, buttons, toasts, card border radius, table views, and page headers (just to name a few).
Next up was the main navigation, where we decided to move to a fixed vertical nav to give us more flexibility down the road with how many items we could add over time.
This forced a conversation about responsive breakpoints, where we landed on defining specific min and max widths rather than a fully responsive desktop experience. We checked the most frequently used desktop breakpoints for users, and landed on designing for that range specifically, rather than accommodating less common ones with a fully responsive platform, which would have required more ongoing maintenance.
Another specific area that we wanted to address was the stacking modals during interior workflows. This was primarily happening because desktop was leveraging the same components that were used in mobile to avoid having to create separate components (app is built in React). This created a jarring, disorienting experience on desktop, and made it hard to retrace your steps.
Going forward, we designed what we referred to as a "half blade," where workflows could take place inside a half pane on the right side window. It can accommodate consecutive steps, users could go back without the surface size changing, and the user can still see the surface behind the half blade to orient themselves. These are deployed throughout the product today.
The success of this project was twofold: it significantly increased efficiency for product teams quickly creating features, and reduced the tech/design debt barrier to updating desktop.
And on the user side, we created a more consistent, credible, powerful desktop experience that was intentionally designed for more time-consuming tasks. From research, we knew that this was important to larger, more upmarket users for handling things like managing contractor card spend, sending wire transfers, and balance reconciliation.
