Streamlining the IoT and web automation experience with design.
Improving the user experience and visual design of open-source web automation tool Huginn for self-hosting enthusiast.
Huginn is an open-source tool that allows self-hosted enthusiasts to automate the collection, transformation, and delivery of information from a variety of sources. Huginn watches your favorite websites, API feeds, and RSS feeds for changes and takes action based on what you specify. Huginn allows you to scrape websites and receive notifications when they change, watch for e-commerce deals, track the weather, and receive digest emails for things you care about. The makers of Huginn bill it as a "hackable version of IFTTT or Zapier on your own server."
As a regular user of this excellent application, I felt the need to contribute my skills to help improve the project. Huginn provides me daily utility by automating the collection of content from dozens of sources and delivering it all to my feed reader. With that in mind, I embarked on a usability review of the Huginn application and the development of a visual design and layout system for the application.
Huginn is a solid application functionality wise, but little attention has been paid to the user experience and the visual design of the application. Overall these two shortcomings manifest minor to medium level problems with how the interface is laid out and how users navigate the application.
I chose to focus on 4 primary challenges that I thought would be the most impactful changes to the application without major development efforts.
- Visual design: The current design and layout are implemented with a basic Bootstrap 3 template.
- Agent workspace: The primary workspace for the application lacks a focus on information architecture and usability principles.
- System status & error presentation: Agents currently fail silently providing users with no alerts that something has gone wrong.
- Agent discovery: While users can export and import Agents, there is no easy method for users to discover shared Agents.
Improving the visual design.
Huginn is an open-source application that was conceptualized and developed for highly-technical users that often run their own servers or lease virtual private servers (VPS). For much of the past 6 years development efforts have been devoted toward increasing the functionality of the application and fixing bugs to make it a rock-solid application. Not much attention has been paid to either the usability, consistency, or visual design of the application. With the proposed design I hope to invigorate participation in the Huginn community and make the application both easier and more efficient to use on a daily basis.
Replace the generic Bootstrap design with a bespoke visual design.
Develop guidelines for a new visual styling that will replace the current generic looking Bootstrap 3 design and layout.
Improve information hierarchy and navigation structure.
Within the new layout system, designate standardized locations to provide consistency for common navigation components and actions.
Constraint: Incorporate the new layout without adding or removing functionality in the application.
In order to facilitate easier adoption by the Huginn project maintainers, I restricted most of my design efforts to functionality that is already available within the application.
Primary agent workspace.
In the Huginn application, Agents are the primary functions users interact with to accomplish their task automation. Each Agent performs its specified task and then pushes those results to the next agent for further processing such as formatting or endpoint messaging. Because Agents are the central component of Huginn, the interface needs to be organized, efficient, and clearly display the state of the agent.
Display primary action items more prominently in the interface.
Move primary actions from within the current dropdown and display them more noticeably in the interface. The primary spot in the new interface is the top right of the header.
Make the tab navigation more consistent across pages.
The current tab navigation doesn’t provide a consistent navigation menu across all sub-pages within an agent.
Provide access to agent error information.
Alert users to errors and other problems an agent is experiencing so they can be corrected.
Improve information hierarchy for easier scanning of information.
Utilize the new design to better organize the content layouts along with adding clear headings and visual displays of information.
System status & error notifications.
As powerful of a system as Huginn is, a natural byproduct of website and API scraping is that things change, sometimes without prior notice. This can lead to agents not returning the intended data, or outright breaking. The current interface currently lacks any prominent notifications for Agents that are returning bad data or endpoints that are no longer available. This silent failure state results in users not being able to reliably trust that their agents are still running properly.
Display system load based on agents running per hour.
Develop a new visual component to help users visualize system agent load when using low powered hardware.
Prominently highlight agent errors/status on the dashboard.
Error panels are displayed prominently on the Dashboard & Agent to alert users to the status of a single Agent or multiple Agents.
Global notification panel.
No matter where you are in the application, always receive notifications concerning Agent fetching or parsing errors.
Agent sharing & discovery.
The simple nature of Huginn is one of its most powerful unintended features. Agents can be distilled down to simple JSON arrays that can be downloaded are imported into almost any Huginn installation. The decentralized nature of Huginn installations means the discovery of existing Agents is not currently accessible to novice users. Users that do manage to discover shared Agents, usually have to find them via external forums or Github issues. Incorporating an easily accessible interface into Huginn will allow users to discover, share, and install agents would help increase adoption of Huginn for less technical users.
Create an agent/scenario discovery interface in the application.
Provide an “app store” style interface for users to interact with available agents. Users, both new and advanced, will be able to discover, share, modify, and install Agents into their personal Huginn installation.
Community style features for asking questions and receiving community support.
Provide users with the interactive functionality such as the ability to discuss use cases, receive support, and suggest feature enhancements.
Agent request and voting.
Give users the ability to request specific agents and integrations within the application. Requests can then voted on and development efforts undertaken by Huginn community members.
Overall, this project is turning out to be a success. The visual design came together nicely and the usability improvements are beneficial to the user experience. After a few more iterations I will be presenting my designs to the broader Huginn community for detailed feedback and acceptance.
- Iterate on visualization designs including system load and agent errors.
- Work on designs and layouts for supplementary pages.
- Present designs to Huginn community for feedback and further iterations.