I regularly get asked what software platforms I think have beautiful UI/UX design. I’m reviewing 10 products I think are worthy of sharing. This is a great review whether you’re a SaaS founder or you’re working in a product-related role. These products represent an exemplary standard of beautiful UI/UX design. They are notable for their elegance, simplicity and ease of use. If you’re interested in what makes an interface great, this article is for you!
What to Expect
There are several things to note about this run-down. For the most part, I’ve selected sophisticated interfaces from established SaaS companies. Primarily, I’m going to talk about what makes these products great stylistically. In addition, I’m going to highlight design techniques and tactics used to create exceptional user experiences.
Productboard
Firstly, we have Productboard. They have an exceptional interface. It is for product managers and teams to validate ideas, evaluate feedback, manage feature prioritization and more. It’s the product team’s tool for creating great software. What stands out to me is the finesse within this flawless interface.
First off, the interface is complex and detailed yet has a soft and welcoming feeling. This is achieved by using a clear and muted workspace. That paired with cool grey backgrounds and sparse use of bright colours to lift key elements on the screen.
Undoubtedly, the interaction design is outstanding. Almost every element has a hover state that triggers an element highlight, tooltip or overlay with useful information and functionality. The animations on these elements are graceful; they fade and slide quickly yet gently with an accelerated or decelerated motion. The subtlety in these animations is impressive and demonstrates obsessive attention to detail and exceptionally good taste.
Also, Productboard does an excellent job of educating the user during the onboarding process. They do this via a detailed onboarding checklist that presents a thorough journey designed to drive product adoption.
The product presents a variety of screens that demonstrate the features available, what they do and how to use them. These screens include graphics that show examples of each interface element or feature. For example, Productboard’s roadmap feature has a great introduction that shows all the options. It even includes tabs to navigate and explore the templates. This shows what a rich feature it is. Moreover, it piques curiosity and guides the user to get started with a relevant roadmap to suit their needs.
Before moving on, I also want to highlight the in-app pricing screen. If you’re taking a demo or exploring this product, be sure to check it out. Without a doubt, it’s a work of art on how to present pricing plans without users needing to leave the product experience.
Stripe
Secondly, we have Stripe. It is a well-known payment platform with a fresh and vibrant brand. Stripe can be considered a leader in setting trends for design aesthetics within the SaaS industry.
For a very complex product, the UI is minimal. It has a very clean, fresh aesthetic which benefits from plenty of white space. Also, it benefits from a really well-structured grid and subtle visual references to divide sections of data and content.
The menu structure is easy to navigate because Stripe has grouped sections logically in a detailed top-level menu. Additionally, they’ve made excellent use of vertical/horizontal tabs for subsections, enabling users to easily dive deeper into their workflow.
Stripe has used a series of vibrant colours to counteract this clean white styling. This enables key elements to jump out of the screen. This is demonstrated across the design of icons, which all have a bright and contrasting two-colour scheme. It is a clever use of colour that lifts the UI with a very sparing and thoughtful detail.
SendGrid
Next is SendGrid, a platform for sending email communication at scale. Sendgrid is another great example of a tasteful UI. Personally, the thing that stands out is the elegance of the interface.
It has an elegant aesthetic with good use of white space. For typography, they use pale and slate greys and cool blue tones. This allows content to sit back and enable a strong focus for elements that have bold and contrasting colours. For example, dark blue text tooltips, red buttons and overlays.
The software makes great use of screen header spaces to share beautifully designed notifications and messages. The occasional overlay is also used to alert users to features, updates and resources.
The use of illustrations is also really tasteful, often custom illustrations of people with light colours and a positive vibe. This brings a personable feel to the platform. This is particularly relevant due to the nature of the service, sending email communication at scale.
Taking a look at the menu system, pictured left, it has been grouped logically under collapsible top-level items. These then expand to contain up to 15 submenu screens. Despite the extensive menu, it’s fairly easy to navigate even when it requires a scroll on an expanded view. The multicoloured icons give the navigation a warm and friendly feeling, making it more inviting to interact with.
Lastly, if there is any criticism for SendGrid, it’s that some of the screens have a slight delay on load time. However, I think that’s a fairly common challenge for platforms of this scale and complexity.
Calendly
Next up, let’s take a look at Calendly. What I really love about Calendly is its simplicity. It started off as one of the most simple SaaS products I’d ever used. However, I’ve noticed new features being launched such as workflows, but it’s been introduced in a really well-integrated and easy-to-use manner. I found the simplicity and utility of the product refreshing.
Firstly, I should note the layout. Meeting types are presented as cards in a grid format. I really enjoy seeing a grid of all the meeting types set up in the account. It provides an overview, which often serves as a reminder of all the meeting types you have.
The menus are simple with only around 3-5 items in each menu and rarely do they have submenu items. While there is the main navigation, most of the menus are contextual. This way, you have them in the places you need them, rather than one big navigation for the whole product. The meeting edit screens can be complex; there you can adjust all of the settings for a specific meeting type. This is laid out in an intuitive manner with a type of accordion interaction for each group of editing parameters.
Emphasis on a Functional Design
There’s little use of iconography and practically no illustrations in the product. Nearly everything is designed in a functional manner. Even the use of colour is specifically for differentiating meeting types. This is why I consider Calendly a great example of utilitarian design. The simplicity of the product makes it a joy to use.
The meeting setting screens give us a further example of Calendly’s simple and functional interface design. Not only are there plenty of settings, but it remains intuitive and easy to use.
More importantly, let’s not forget what I consider to be the defining screen for Calendly. Here’s the screen that we’re all probably most familiar with: the meeting booking page.
Undoubtedly it is a recognisable and brilliant design. There’s no better example in SaaS than the “Powered by Calendly” label draped over the top right corner. I would even consider it to be one of the most iconic UI of our time… I wonder how many sign-ups it’s responsible for?
Mixpanel
Finally, let’s take a look at Mixpanel. Mixpanel is a product analytics platform, which makes it a SaaS that sells to SaaS. That’s not a bad market once you consider that the SaaS industry is the biggest consumer of software.
As a new user on Mixpanel, the task of integrating your platform is confronting. Mixpanel knows this is the biggest obstacle to adoption so they present it right away. With guides and integrations for a variety of common platforms, they make it easier for the user.
Mixpanel has opted for the horizontal menu structure in order to save screen real estate for viewing analytics and reports. The palette uses white, greys and a purple-blue which feels modern and gives that friendly feeling to a tech product. The font Apercu Pro also lends itself to the friendly look and feel you get. These softer, more rounded fonts are typical of the friendly feel emerging in SaaS over recent years. In Mixpanel we even see the use of emojis making their way into big-name SaaS interfaces.
I love the use of drop-down menus with pretty icons and explanative text for key features. Once you get into detailed screens the horizontal menu really works for secondary menus too.
Table elements and interactions are similar to Stripe. You can see these SaaS companies are leading the trends in interface design. Mixpanel relies heavily on presenting data. The ability for users to select the time period for viewing data is a standout feature. Users can also change the charting format and layout. These are really cool intuitive options where Mixpanel has done the thinking to make it useful for the user.
Conclusion
This has been part one of our two-part article reviewing 10 SaaS platforms with beautiful UI/UX design. What do you think about these products? Tell us what you liked about this interface in the comments below. Also, do you agree with my selections? Let me know of any SaaS platforms that you feel have an amazing UI/UX, too. Lastly, be sure to read and watch part 2, where we’ll discuss the remaining 5 examples of SaaS platforms with beautiful UI/UX.
Need a Hand?
We’re here to help! Do you need help with UX/UI design for your software? Reach out to us on our Work With Us page to answer a few questions to make sure we’re a good fit for what you need. That way, you can book a free 15 minute, no-obligation consult with us. Additionally, you can book now right here. By taking inspiration from these great platforms, you can improve your product, get more users and grow!
