Effective, compelling design is a high priority for us at Helm. We believe that better, more intuitive design means greater engagement with the software, higher usage, and ultimately increased value for our customers. Modern web apps, like Helm CONNECT, have dozens of pages, each functionally unique, and with many controls and inputs. Part of the process of the design team is creating, documenting, and improving the visual design and interaction of each control. Here’s how it works:
We embed our designers right in the middle of our product and development teams. Communicating changes to members of both teams is crucial to our success. We don’t want to spend months making pixel-perfect mock-ups of pages, only to find that the requirements have changed. Instead our designers live and breathe in the code, slinging HTML and CSS, right beside the developers.
The design team owns the visual design of the application, so we need to provide tools that make meeting those standards easy and obvious. Tools like PostCSS allow us to write rules for things like color usage, common CSS pitfalls, and standardized output across all of the source files. This gives us a major maintainability boost.
One final key piece of our process is internal documentation. With so many moving pieces it’s easy for design consistency to slip. A collection of standard styles for elements, components, and templates provides a shared terminology and single source of truth for the organization. So whether a developer is looking for an icon, or a product owner wants to review the latest component designs, our collection provides a simple way to do that. Here’s a look at our icon library:
At the end of the day, what does this all mean? To us it means more efficient development of our products, but to you it means greater engagement and enjoyment with Helm CONNECT, which is always our ultimate goal.
