(Almost) nothing matters more to customers than their logo and brand colors… 😅 So, to let them brand their Safety Data Sheets (SDS) without tedious, technical code editing, I designed a fully-featured SDS Designer with a real-time preview.
From research and prototypes to user-tested flows and UI design, the tool made creating, editing, and managing custom designs simple and engaging — improving usability, supporting sales, and driving quick adoption.
Web app for creating chemical safety and compliance documents
Design task
New major environment for creating document designs
My role
Sole inhouse UX designer on small dev team
Years
2022
Challenge
While Safety Data Sheets (SDS) are highly regulated documents with a strict content structure, authors have room to customize many aspects of the design, including the layout and branding (logo, colors, font styling and more).
So, several customers requested an easy way to tailor the documents to their own branding. Previously we (I) did the customization in CSS on a customer-by-customer basis — however that was neither scalable, nor an efficient use of my time.
Also, a feature for customers to design their own documents would be helpful as a leverage in sales. So how could we create such a SDS Designer feature?
Process
I analyzed samples of customer and competitor documents to what uncover which design attributes needed to be customizable and which we could leave out. From my design customization work for clients, I also had useful insights into their requests.
In terms of overall design concept, we soon realized the most user-friendly and effective design would be some kind of real-time document preview as the user manipulated the design attributes — this would take advantage of best practice design patterns — and be a tremendous step forward from the previous tedious, technical workflow where a new document needed to be generated for each change to the design code.
As part of the process, I did concept sketches and created a working prototype in code which I tested with users both internally and externally.
Outcome
Over the course of some months I designed a completely new fully-featured editing environment for document designs.
It was implemented by a developer who could reuse several of the technical concepts from my coded prototype.
The feature was adopted by many customers who liked to be able to easily create, edit and manage their own designs. While the domain of chemical safety and compliance is complex, the SDS Designer was a starting point, where everyone would get a good first experience with our software, thus creating vital initial momentum with the low barrier to entry. This was particularly important since we observed some customers stalled in their first use after having started their Almego subscription.
It was a paid add-on, but also provided leeway in negotiating new customer contracts.
VIDEO: Demo of the final SDS Designer UI: Property panels affecting a live document preview. For providing that gratifying immediate feedback to users, we applied horizontal sliders to adjust size settings.
By the way, our PO didn't think we needed to include undo/redo functionality in a first version, but I insisted, since it's such a standard feature in any design tool, supporting safe exploration. In terms of implementation, undo/redo functionality is also much easier to handle, if it's part of the initial technical architecture – as opposed to being added at a later stage.
The previous editor was very technical, where users had to edit CSS code to make custom designs. For every change, the user would have to generate a new document to see the result. As described above, I did most of the tailored designs on behalf of customers. Thus, to enable more customers to create and edit their own designs, and thus boost a sense of ownership, we needed an accessible, visual editor requiring no knowledge of web design technology. As an aside, I have tagged this case 'New feature' — as opposed to 'Redesign' — since the new version was such a big step forward and thus in reality a new feature.
As part of the research process, I sampled documents to investigate which design attributes to support, such as colors, borders and font styles.
Initial concept sketches with property panels on the left and a live document preview on the right.
VIDEO: To explore the interaction design of the most promising concept more in-depth: I implemented an early prototype using HTML/CSS/JS.
Examples of different designs for the same document content, easily created with the SDS Designer.
Open to work I'm available for new UX design positions and projects — either remote/hybrid or located near Aarhus, Denmark.
