Nodeark
Re-design of the player editor. Function to edit groups of screens, new set and forget feature and general improvements to the future design system.
Before
After
Background
Nodeark is an innovative digital signage company that started out a few years ago. Today, they have transitioned their signage product to become one of several modules in a comprehensive ecosystem.
I identified some opportunities for improvement in the digital signage module. One challenge we faced was the need to handle multiple screens simultaneously. Another opportunity arose from interacting with customers on support. It seemed like they had a need to "set and forget" playlists by scheduling content to be removed from the playlist after a deadline and released at a specific time for viewing on the screen over a timeframe. We did have support for part of these needs already, but content was, for example, not removed automatically from the playlist, and the functionality was not utilized, probably because it was difficult to find.
Another usability issue I noticed was that there were several small changes we could make to the front-end to improve user retention. Users seemed to forget how to make changes, as most people rarely log in to make changes. Since the time between sessions was long, the risk of forgetting increased. We needed to improve the structure a bit and make the primary user flow more intuitive.
Revised Navigation Flow
When I started out, to change the screen you wanted to edit, you had to leave the player editor and choose another player. In theory, you could make changes to several clients at the same time, but it required the user to be an expert.
By replacing the secondary navigation with groups, screens, and channels, users now have an intuitive way to make changes to groups or individual screens. This way, they can more easily scan for issues by looking at the new status dot. The groups functionality was already developed in the backend but had to be adapted to suit this design.
Before ideation, I conducted some desk research, investigating how our competitors had designed this navigation, as well as interviews with communicator users. The resulting navigation borrows patterns from several existing CMS products, making it easier for users to remember how to use it, thus solving one of the main challenges.
As a bonus for more advanced users, by combining groups and screens, it's possible by design to override one screen in a group. By choosing the individual screen, they can make changes that override what the group has set up.
Set and forget
While helping out as a support engineer, I noticed a pattern: some users seemed to log in simply to check if there was any outdated content in all the playlists. This resulted in a heavy cognitive load since they had to jump between pages to check out different playlists. Through this new kind of navigation, the interaction cost would become much lower.
We already had functionality for a "set and forget" approach to content. There was a tool to set a start and end date for a media file, which resulted in it going offline from all screens where it was used after the deadline. However, it did not automatically disappear from the playlist, and the change of state (online/offline) wasn't clear.
I created a new pill badge to indicate the content's status more clearly, highlighting if it's online, planned, or offline. Additionally, I changed the hover interaction for the schedule icon to always be shown and replaced the lightning icon with the standard clock icon in our primary color. While I was at it, I also designed an "add to playlist" button for novice users to increase user retention over time and ease onboarding. This makes the primary flow of adding content to the screen more prominent on this page.
In the design, I added several small improvements to different parts, such as improved labels, changes to the color palette to elevate content depth, and changes to the layout to increase a sense of structure. These changes were more as inspiration for our future design system.
This design has not been implemented and more testing needs to be done.