The Challenge
Customers needed easily brandable document designs
Our customers — manufacturers, distributors and resellers of chemical products — need documents tailored to their brand guidelines, i.e. logos, colors and more.Additionally, many customers sell their goods under different brand names or as private label products to other companies. So, they need custom branding for those situations as well.
The old editor was for coders only — with no simple way to see design changes
Previously, technically minded users had to edit web code (CSS) to make custom designs. For every change, the user would have to go through a cumbersome process of generating a new document to see the result.Due to that technical barrier, 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.
Thus, to enable more customers to create and edit their own designs, and to promote a sense of ownership and engagement, we needed an accessible, visual editor requiring no knowledge of web design technologies.
As an aside, I have tagged this case 'New feature' — as opposed to 'Redesign' — since the new version was such a big step forward thus in reality a new feature.
The Process
Sampling documents to uncover properties to support
As part of the research process, I sampled documents from both our customers and competitors to investigate which design attributes to support, such as colors, borders and font styles.This way we could also gauge what we could reasonably leave out, for instance, borders around the entire page content.
Trying to find a solution for quicker feedback when editing designs
As mentioned, the previous flow for seeing design changes was to generate an actual document.While Almego was designed for that very thing, the process still takes time, as the system needs to gather and process all the data and assemble a PDF.
So, to create a much quicker flow, in these concept sketches, I explored a design with property panels, featuring input fields, sliders, color pickers and more, and a live document preview with example data.
A coded prototype helped us determine if the design worked in real life
To explore the interaction design of the most promising concept more in-depth, I implemented an advanced prototype using HTML/CSS/JS.This was necessary due to all the moving parts, not easily captured in static wireframes or clickable Figma prototypes.
The prototype was used in user testing with both internal and external participants.
Some of the implementation concepts were later reused in the final production version.
Handover to developers for implementation
As part of the handover to the developers, I organized a workshop going through the design concepts and my ideas and input for the technical implementation of the UI and aspects of the architecture.Since I was also involved in the development process, I could help clarify questions and make design adjustments along the way.
The Solution
Demo of the final SDS Designer UI
Property panels affecting a live document preview. This provided gratifying immediate feedback to users, as they manipulated 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.
Nudging customers to buy the new SDS Designer add-on
The new editor was powerful as a demo tool for sales representatives and customer support.Every subscriber received basic editing access, with the option to unlock the full SDS Designer experience through a paid add-on that we highlighted throughout the product.
As a sales leverage the add-on could be offered for free/at a discount when negotiating contracts.
To help Almego gain traction and improve retention, customers needed to get started quickly using the software, and in that regard the editor was a low barrier to entry — compared to the more complex chemical management.
Customers also needed to show internally, that their organization had bought a new system, and non-chemical experts could more easily relate to the visual design of documents.
Same content, different designs
Examples of different designs for the same document content, easily created with the SDS Designer.