Best Examples of UI / UX in Enterprise & SaaS Applications - 2021 Review
30 hand-picked web applications + how to search for more on your own
We both know how hard it is to find well-designed examples of enterprise, SaaS, or any other data-rich, complex application. As benchmarking is a common practice in tge UX design process, I will take you through the shortlist of applications that you can start your desk research with.
Backstory
In a rush? Skip to the next section
Back in 2009 I first started working as a “Usability Specialist”, designing enterprise applications for specialized domains. My main problem was that I had nobody to learn from. It was an internal software house with just a technical crowd, not even a permanent graphic designer. Also, I had nowhere to learn from. The examples I have seen around in the corporate environment were just terrible even to untrained eyes. Of course, I packed on books and went to conferences. Still, the design problems that I stumbled upon at work were not the average ones. To make things worse, there was no way to google anything with similar complexity.
Fast forward 12 years and if you are designing a mobile app or a website or a shop or whatever consumer digital product, you have an ocean of interfaces you can compare and Frankenstein into your product (what’s even better is that you have free access to user feedback on your competitor’s products a.k.a. App Store & Google Play reviews).
On the other hand, when faced with Enterprise, SaaS, or another kind of complex, data-rich application, you are still pretty much in trouble. Software enterprises that have out-of-the-box products rarely share detailed screens or give you demo access without you meeting their salesperson.
That’s why I prepared for you a list of available UIs of more complex apps so that you know where to start your benchmarking journey.
Side note: Everything is a remix. UX is not a domain for expressing one’s artistic self, but a craft largely relying on repeating known patterns to improve usability. Benchmarking is just one of the first steps of defining your solution (done before and/or after the initial user research). Whatever is that complex problem that you have, it was probably solved somewhere on the UI already (maybe in another domain, but allowing you to repeat the pattern). There’s nothing wrong with checking what has been figured out before and building up on that in your application.
Consumer & Enterprise SaaS
Best for:
Literally everything. This is as close as you can get to a complex system in action. These still may be simpler than what’s you are normally working with, but you can already see how to break down huge components into smaller, more digestible ones and how to deal with deep navigation.
Examples
As this group is very diverse, I’ll comment one by one.
Google Drive - Navigation, actions on items and groups
Google Calendar - Input forms, events recurrence (think: jobs running on certain schedules)
HubSpot - Great for benchmarking Workflows, Information Architecture & Navigation
Gusto - Workflows, Information Architecture & Navigation, Forms
Google Analytics 4 - Interactive Dashboards, Deep navigation, Forms
Atlassian’s JIRA & Confluence - Some pieces of their UIs are controversial and I know JIRA can be tricky, but hey, navigation-wise it’s a complex piece of software, so some learning curve is acceptable.
Slack - Threads, Actions
Also worth checking: Monday, Zendesk
Financial Applications
Source: Kraken
Think: Investment apps, online banking, tax and accounting, personal finance management.
This group of applications is really versatile and you can find many solutions to your design problems.
Best for…
Dashboards, Charts, Reports or any other numeric data
Check for complex navigations that can run deep, transaction history for table examples
Less good for…
Just a note: be aware that Dark UI’s, as enticing as they can be, are extremely difficult to pull off in most text-rich applications, and nearly impossible to be usable, accessible, and good-looking when you have input forms.
Examples
Your online banking, if it’s any good.
Stripe, Turbotax, Mint
Atom Finance, Kraken, BitPanda
Marketplaces
Source: Etsy Blog
Be sure to check both sides - seller and buyer interfaces.
Best for…
Search & Filters
Deep Navigation patterns, Breadcrumbs
Workflow (especially if you can use the cart analogy in your app too, could work i.e. for request systems).
Account settings
Product pages (structure - how to present an object with many attributes grouped into sections)
Less good for…
Lists / Tables (they put emphasis on pictures, which is rarely the case in business apps)
Examples
Etsy, Airbnb, Amazon
Tools
Source: InVision Build Mode. Design by Author.
Best for…
Pieces of UI where you allow editing an image
Applications for experts in a specialized domain. For example, some healthcare (medical, pharma, diagnostics) apps need to allow working with images (like X-ray images) or videos. If you have people working with annotating medical images, you may want to look both at graphical tools and map tools.
Not good for…
Non-tools. Usually, there is little direction of user flow in tools. Normally you would prefer to incorporate more structure into your application.
Examples
Adobe Suite (e.g. XD), Sketch, Sketch Up, iMovie, Google Maps, Zillow
Design Systems
Source: Atlassian’s Design System
Best for…
An exhaustive list of individual components, like form controls, buttons, menus, breadcrumbs, actions, tables, handling errors, all sorts of containers like tabs, modals; and also more abstract guidelines for designing an application.
Not good for:
User Flow, Information Architecture, Navigation. Design Systems most often have fragmented information and it’s hard to see how it should work together.
Examples
Atlassian’s Design System, IBM’s Design System (Carbon)
UI Portfolio platforms
Source: Dribble Screenshot - Advanced Filters by Alex Tsibulsky
Best for…
Specific UI pieces like dropdown, table, calendar
Less good…
User Flow, complex components or features.
Examples
Dribbble, Behance
Hints
On Dribbble: look up the component by a specific word. It can get hard if you don’t know the exact words to use. If you need to expand your UX patterns dictionary, go browse UI patterns names.
Please be aware, these Dribbble pieces are often beautiful, but not available to be seen in full action. Well-designed components may need to have tens of states designed & tested. On Dribble you are mostly seeing a static snapshot of the best-looking case: when there is just enough data (not too much and not too little) when all users have profile images and names up to 20 characters when all categories are balanced when there are no errors - you get the idea.
For whole projects, it’s better to check Behance as it puts more emphasis on complete works. You can check featured projects in Interaction Design and then search by a keyword.
Where to look for examples
In general, you may want to look at:
- Products that have in-house UX teams. It’s not always obvious, a way to guess it is to check who’s recruiting, who’s speaking at UX events, which companies are blogging about design, and in recent years - which companies are publishing their design systems.
- Products from a different domain that have similar features e.g. request system - look at marketplaces; scheduling or recurring events - google Calendar...
- Obviously, your competitors. More and more often there’s a demo, trial or at least a promo video showing pieces of UI. If a product or company website does not show any UI of a product, you can be pretty sure it’s no good, UX and UI-wise.
See you soon!
Well done, you got this far. You will probably enjoy our Monthly Newsletter.
Sign up below and see you soon in your mailbox.
