How do i put this..Coherently
Coherent is a coworking space management platform that handles everything from billing and invoicing, to bookings and lead management via CRM and access control
I joined Coherent as employee #1 back in 2016 as a business development manager. As our team grew and requirements changed, my role shifted into project management, then product management, and then eventually into product design
I’ve been directly involved with every piece of work we’ve ever released, and now day-to-day research, scope, design, project manage and test every new feature we build
Covering so many areas of the product and the business, I’ve got a unique insight into how everything works together; how requirements in one area might drive development in another, or how decisions made by one team can impact other teams.
My designs usually start in Freeform as sketches to dump my initial ideas before then jumping into Figma for higher fidelity designs that I can share with stakeholders, before finishing with animated prototypes to assist with developer handoff. I’m comfortable enough with HTML & CSS to tinker with it in Inspect, but this is an area of my design skills I’m looking to developer further
This portfolio showcases the variety of my design work, highlighting some of biggest or most significant areas of UI design that I’ve worked on. It also features a few references to The Office (US) which I hope you’ll enjoy!
For the past 7+ years, I’ve been wearing a lot of hats. I’m now ready to take some of them off and pursue the role I’m most passionate about. Product Design.
Grouped a bunch of fields together. Form-idable idea.
Overview + Design system
Like most SaaS products, Coherent is full of forms; forms for onboarding new members, forms for signing in visitors, forms for setting up new tariffs, forms for making bookings, the list goes on. And those forms are of course, full of fields; fields for entering names, phone numbers, prices, choosing a resource to book or a setting to apply, again the list goes on
Setting up a comprehensive component library to provide for our fields, inputs and forms was my first significant piece of design system work. I set out to build a consistent, flexible set of components that I could drop into almost any design I was working on - obviously assisted hugely by Figma’s Auto Layout, Variants and Properties features.
In 3 scrolls and 2 clicks, you will arrive at your destination
As Coherent grew, more and more pages were added, and more and more links between those pages then followed. Coherent also consists of several levels of admin dashboards that can be accessed by those with the right permissions. Again, as Coherent was growing, the likelihood of a user regularly moving between dashboards grew too.
To ensure navigation remained straightforward and consistent, we started by revising our sidebar menu. We wanted to refresh the design, but more importantly wanted to establish consistency between the dashboards, easy navigation, a clear indication of your current location no matter how deep into a page’s structure the user had dived, and a component that could grow over time without becoming confusing or cluttered
anchor tags + jump to links
As pages that housed things like Settings, Preferences and Details grew, from a customer support perspective, it became more difficult to direct users to where they needed to be. I found myself saying things like 'Scroll just over half way down, and amidst all those other fields you see is the toggle you want to enable'.
We resolved this firstly by tidying up fields and revising the white space on the page to make it less visually heavy
We then added anchor links to each section of the page so that I could send a more direct link in a support email
And finally added 'Jump to' links at the top of the page so that users could more quickly get to the section they needed
As pages within profiles became longer and more complex, we started to split them out into separate sub-pages, driving the need for in-page navigation. This navigation bar follows the same design language as our main side navigation but uses a clearly distinct colour palette to differentiate it
Back to x
Users will often get to an invoice via a searched, sorted or filtered page. To ensure that they can easily return to their last location after viewing the invoice, we added dynamic 'Back to X' buttons at the top of the page that update according to where the user has come from
A good colour palette needs to be several things
Developing a grey palette
Tricks like desaturating our blue palette, to create our grey palette, ensured readability without turning our web-app into a newspaper
introducing bursts of colour
As Coherent grew, new features were added and new UI was introduced, our need for a broader grey palette grew; subtly distinct dark greys for differentiating headings from body text, and a series of light greys for borders, dividers and shadows.
But alongside this I found an opportunity to introduce little bursts of colour in the form of labels and avatars. Coloured labels helped to break up rows of monochromatic data in our tables whilst simultaneously conveying a message based on their context; a green label on an invoice - everything’s fine. A red label? Something’s gone wrong. And orange? Probably worth investigating, but it’s not urgent.
But colour can also cause problems if used incorrectly. When I designed the first iteration of our error pages, I opted for a red accent colour on the illustrations used on the page, as a way of suggesting that something had gone wrong. But in testing, I found that the red colour made me feel stressed, and like I was responsible for the error - not at all the message I wanted to convey. I swapped the red for calmer blues and, coupled with some passive copy, ensured that the page conveyed a comforting message of 'Something has gone wrong. It’s our fault, not yours. No need to panic'.
01101000 01101001 00111010 00101001
Coherent contains lots of data categories; invoices, customers, files and bookings, just to name a few. And each one of those categories contains lots of individual pieces of data; dates, times, locations, user names, file types, prices, statuses, the list goes on.
As the quantity of data increased, I dove into the world of tables and other structures to house and efficiently display it all
developing a `complextable`
To develop our ComplexTable I pulled out every piece of data we held for an Organisation (a coworking space member), sorted them based on which information I felt needed to be visible at a glance and grouped similar pieces of information together. I discussed these results with our customers to see how their expectations differed, and to get an idea of data they’d like to see, that we didn’t currently surface.
I spent several months designing and iterating on this table, ensuring that displayed this Organisation data perfectly, but also to ensure it was flexible enough to work elsewhere in the app, making sure I communicated this clearly with the development team so that they understood the expectations from this component
The end result was a table that displayed the most important information at a glance, but allowed columns to be swapped in and out as needed. Combinations of single-line and multi-line cells meant that similar data could be grouped together where appropriate, or kept alone for additional emphasis. Updated logic, refined table controls and improved search and filter functionality meant that finding a piece of information from a multi-year history became significantly easier
Words convey everything; importance, caution, reassurance, confidence, emotion, and so much more. Choosing the right words in the right situation is crucial and the difference between a confused, stressed user, and a relaxed, reassured one.
But sometimes our voice isn’t the right voice. Coherent sends out email notifications when invoices are due or a booking has been cancelled or to welcome a new member to their new workspace. And whilst I’ve made sure that the copy used in these emails is factual, appropriate and useful, I can never match the tone of voice that suits that workspace’s brand.
To allow for this, I introduced a feature that would allow workspaces to customise these emails to their liking; providing them with a template to tweak, or a complete blank slate, coupled with powerful variables that pull in important pieces of data to ensure these emails are still valuable to the recipients
As important as the words are themselves, so too is the location, context and timing in which they’re displayed. Toast messages need to display contextual, useful information, fields should use hints to assist the user in filling it out, and errors should appear on the corresponding field, clearly indicating what the problem is with their input
As we’ve introduced things like background file uploads, I’ve reviewed the messaging in our toast messages so that users can more confidently navigate away from the page, with the reassurance that the upload is continuing, followed by a success message once the upload has completed.
Little images that represent words or phrases? Iconic.
Icons are great for adding joy, extra context at a glance, and for improving usability. As part of a design refresh where we evolved our colour palette and revised our fonts, we introduced a new icon library and planned more consciously how, when and where we would use iconography going forward
Once I’d found a library that met our needs, I set up a comprehensive library in Figma that would allow me to easily drop icons into designs and use Properties to switch between variants, sizes and styles
I first looked at introducing these new icons into buttons as a way of making the button easier to understand at a glance. And after this looked at text and data heavy areas like tables, where adding icons can provide more context to the content displayed
Icons have become a very consistent part of Coherent and have been introduced all throughout the app. But it’s also been important to recognise the point at which overloading a page with icons becomes visually taxing, and to then consider which locations take priority
More like inter-great-tions am I right?…
Recognising which features aren’t worth building yourself is crucial, especially at the beginning of a product’s life. Integrations can help to fill gaps in a feature set but also allow a product to fit more seamlessly into users’ existing workflows, and as such have become a very important part of Coherent.
I have managed the development of several integrations; from researching which integrations are most appropriate, through designing their integration flows and considering what we can do with their API, to maintaining relationships with partners to ensure we’re maximising our offering
Some important considerations with integrations have always been
How do I explain what this third-party product does, to someone who might not have heard of it before
How do I explain how this integration works and what benefits it provides
How do I assist users with setting up the integration, who may not be familiar with things like API Keys and authorisation credentials
Testing, testing… Is this thing still on?
I’ve tested every single feature, update and bug fix we’ve released for the past 7+ years. And whilst testing is obviously useful for catching issues before they go to production, it’s also elevated my scoping and design skills which has led to much quicker build and deploy cycles
Over time testing so many features, I’ve learnt which issues come up most often and then been able to include mention of those things in my designs or the scope that I hand off to developers. This has reduced the amount of feedback that comes through testing, and therefore increased the speed with which that piece of work can be pushed to production
It’s also made me much more thoughtful about how we handle errors and what the experience is like for users that might encounter one. Using colour and language to reassure the user that the problem is ours, not theirs, directing them back towards where they need to be, and providing the information they might need to report the issue to us if they wish
In my customer support role I found that when users were submitting bug reports, it would take several emails back and forth just to understand the nature of the issue which could sometimes send developers on an aimless hunt for the cause of the issue. We introduced a feature that would pre-fill support emails with helpful details, and display error codes more clearly on the error page for users that might contact us directly
Website designed & built by ninethreeone