Redesigning the Hederis App Interface
An interview with the team at Design Systems International
Building a browser-based, user-friendly book design app is, in fact, a complex task. Here at Hederis, we love getting new feature requests from our users, and we love it even more when we’re able to actually build those features and add them to the app. It happened a lot in the early days of the app, and while this definitely led to improvements in the way the app worked, it started to get tough to fit all this new stuff into our existing UI design (“user interface” — aka the things you see on the screen).
But things have been — dare we say it — stable and working well for quite a while now (knock on wood), so it seemed like the perfect time to get organized with a nice, new redesign. On our end, the goal was to simplify the Design pane and make it easier for users to find their way around and get to the tools they most needed, without taking any functionality away. We partnered with the amazing team at Design Systems International, who listened to our needs and the needs of our users and came up with something clean and clear to bring our user experience to the next level.
The design journey they took us on was honestly pretty fascinating, so we thought it would be fun to give you a sense of the thought process behind this redesign by interviewing Rune Madsen and Lauren Dukes, our primary design team at Design Systems International:
Hederis Team (HED): First off, how do you approach working with a new client?
DSI Team: For us, the most important thing when working with a new client is the initial context transfer which ensures we understand who we are designing for (both from the client view and the end user’s view) and the process that brought the design to its current state. When building a digital product, teams often work very hard to ship new functionality, and sometimes this can lead to a suboptimal user experience after a while because the UI gets complex. In a redesign like this, it is therefore crucial that we understand which layouts we can simplify and which layouts are deliberately complex. The only way to understand this is to talk to the client and understand the history of decision making.
When building a digital product, teams often work very hard to ship new functionality, and sometimes this can lead to a suboptimal user experience after a while because the UI gets complex. In a redesign like this, it is therefore crucial that we understand which layouts we can simplify and which layouts are deliberately complex.
HED: Publishing processes and book design needs can be surprisingly complex. Was there anything special you took into consideration when it comes to working with books and a designer/publishing user base?
DSI: Several of our team members have a background in publishing which provided some valuable context, and we do feel that publishing projects require special consideration when it comes to certain aspects of the project.
For designers who have only designed for digital media, the complexity of multi-format book production processes might come as a surprise, and we did think about the production process and how our changes will affect that workflow when we redesigned the pages. This is of course combined with a deep knowledge about UX and UI design which we would consider to be universal across our projects.
HED: I think the redesign uses color in really great ways that aren’t just aesthetic, though it still manages to look pretty neat. I would love to hear about the intentions behind these changes and how it helps users. How did y’all think about color, and why did you make the color choices for this design?
DSI: There were a few considerations that went into both the use of color and the color selections in the design.
Something that’s crucial in complex interface design is helping reduce cognitive load (basically the mental processing power needed when interacting with an object or interface) so the user can more easily navigate through the options and complete their goals.
Reducing the number of colors used helps focus a user’s attention and makes it easier to spot the important actions, so we made the darker Hederis Green our primary Call to Action (CTA) color and limited the instances where it’s used.
We also knew we wanted to introduce a darker color for the tool panel because it would ensure light areas become focal points when contrasted against dark colors as well as visually define the manuscript workspace.
Hederis branding uses a lovely dark grey with purple tones so for our color exploration, we expanded it into its lighter shades and tested them. The medium shade we chose provides the right level of contrast to the manuscript workspace without making the whole interface feel too dark, and the clear purple tones make the whole interface feel customized with Hederis branding.
Something that’s crucial in complex interface design is helping reduce cognitive load (basically the mental processing power needed when interacting with an object or interface) so the user can more easily navigate through the options and complete their goals.
HED: What was the overall strategy/thought process in terms of cleaning up the UI and adding some clearer structure? It feels a little incongruous to say that hiding things makes them easier to use, and yet it works — why?
DSI: Our primary goal was to make the interface feel simpler and easier to understand/use, which goes back to finding ways to reduce the cognitive load. We utilized a few different strategies to accomplish that goal, including applying common design patterns to create instant familiarity.
Maximizing the manuscript workspace was another priority for us as the primary area of focus for the user, so throughout the process we looked for opportunities to give it more screen space.
First, we analyzed the existing design and removed extraneous information or redundancies in the site header and workspace header, then we condensed the remaining information into single line navigation bars. This increased the size of the workspace within the screen and made it easier for a user to quickly scan across each navigation bar. Additionally, using a lighter grey for the site navigation bar helps differentiate it from the workspace navigation bar at a glance.
Using icons instead of labels also reduces visual complexity so where we were able to, we replaced written labels with icons and relied on hover-activated labels as support. Stricter alignment within the control panels themselves creates more reliable visual rhythms which are then easier to scan down.
Finally, moving the pages and section controls to a collapsible side navigation gave us extra space in the top navigation and the manuscript workspace. This decision utilized a common design pattern that most users would be familiar with and using tabs and lists instead of dropdown menus makes it feel easy to navigate.
Want to learn more about single-source publishing and Hederis’s browser-based book design and layout tools? Visit our website where you can browse our features and products and contact us with any specific questions.
