Challenge

Stealth mode startup (name withheld for contractual reasons) came to me with a product concept ready to disrupt a major FinTech market. They had rudimentary wireframes, and a placeholder logo, but not much else. It’s rare that you get to design a product completely from scratch, so I jumped at the opportunity.

User Research

Despite the fact stealth mode startup had some early wires, I prefer to start a design project at the root problem and not an interface. I spent 2 weeks interviewing users in their target audience; seeking to understand their environment, needs, challenges, and existing toolset.

Branding

I conducted competitive research on B2B products with distinct design languages, and presented three aesthetics to the team that I felt worked with the brand and the target demographic. We decided the product’s aesthetic should be a bit more “playful” than their competitors, while also feeling professional, trustworthy, and powerful.

Typography

I consulted Typewolf and a few other sources for inspiration, and found some fitting options on Google Fonts. Google Fonts are a good starting point for a young brand pushing towards MVP launch - they’re free, easy for developers to implement, and typically offer more widespread browser support. The team went with Poppins for the main font (super versatile product font) with Spectral for body font.

Colors

I designed a selection of color palettes that I felt matched the “Playful but Professional” vibe mentioned above. After some internal debate, the team decided on Palette A.

Design System

I spent an hour with their development team discussing pros and cons of using a library for their MVP launch. While I felt Material Design was maybe not the best language for a B2B SAAS product, we decided to use the Material UI React library as it would reduce workload on the frontend developers, the team had prior experience implementing it, and it has a rich integration with Figma.

I used their brand colors to flesh out a Design System, complete with all Material UI components.

Final Designs

My philosophy with this interface (and most B2B interfaces) is that it should have some personality, but not so much that it inhibits a user’s ability to efficiently accomplish their goal.

I utilized Material Design to create a clean, but modern look for their platform UI.

The biggest challenge with this project was the “invoice edit” screen, which needed to fit a large number of input fields onto one page, while also allowing the user to simultaneously reference a PDF document.

I created two structural concepts, one that I felt would accomplish a more optimal user experience, and another featuring a horizontal scrolling table, which the client said would feel more natural for their users, despite vertical scrolling being a more prevalent convention.

The client ultimately decided on the horizontal table option, noting they would re-evaluate usability once the MVP was launched. You can view the finished product below.