Automations

FME Server - Automations is a core feature for building automated complex workflows that manipulate geospatial data on a user friendly interface aimed at both new users and existing expert users.

Automations

Web Interface Development



Type: Internship
Role: Web Developer, User Experience Designer, Interface Designer
Duration: May 2018 - December 2018

Summary

I worked at Safe Software Inc. as a Web Developer for the FME Server product. There I worked within an agile team to discuss and implement planned features and working to meet product goals. I created wireframes and mockups for both new features and refining existing interface, then implementing them within HTML, Sass, and hybrid Angular/AngularJS framework.

FME Server Web Application landing page

Research and Design Process

Automations has been a long running project that started before my time at Safe Software. As the project grew closer towards release, I worked closely with stakeholders to refine the boilerplate interface, building enhancement features, and tweaking user flows.

Example of an Automation Workspace

An example is designing how users navigate to their automation workflows and manage or edit them. I approached these widely scoped projects first by researching how users would approach this task in the context of the product, then building mockups and share them to my supervisor/stakeholders. Then after further refinement and research, I implement my ideas to our project.

Automations Builder Tool Starting Page

Some enhancements from this process sprouted the ideas of image previews for quick visibility of existing workflows, and a “quick-start” overlay that points to the user tips on how to use the tool, as well as a page where users can quickly see their last workflows. These enhancement was aimed to giving new users some guidance when first starting up the new tool, as well as a place where users can quickly access different components of the tool, or dive straight into building their workflows. I also refined the user flow for managing existing workflows to be familiar to existing similar features throughout the product while having different features be readily accessible.

Management View with image previews

Interface Redesign and Execution

As our team worked on Automations, it’s interface needed more polish as the project came closer to release. Using the same research and design process I did for the user flows on accessing Automations, I improved upon the interface in steps. The old navigation, and toolbar access made it feel outdated and clunky to use. I condensed information and updated the look of the buttons to feel less compressed and easy to use on all screen sizes.

Original Node Design and Interface on Darkmode

The core aspect that went through several iterations were the “nodes” of the tool. These nodes were the core component for conveying information to our users on building out their workflows. I was tasked to design and implement and improved the node’s visual aesthetics, and interactions. By researching competitors, our own existing diagraming tools, and conducting user research to internal users, FME Server Automations nodes were completed with usability, aesthetics, and condensing information in check.

First Re-design iteration

Finalized node design

“Darkmode” theme and grid snapping feature - I had to maintain two themes for this project as well

Designing for User Experience

Working on the Automations project, I mainly focused on usability as we rolled out new features for the tool. Much like how I designed my other ideas, each individual decision on building out features I was tasked for, I try to weave in enhancements to make using Automations easier and friendlier to use. Other user experience changes I worked on were cleaning up the “smart-linking” of Automation nodes as a neat minor feature that helps users building their workflows.

Smart Linking - Dragging a node on top of a node will link them up automatically

I also collaborated with a back-end developer to store settings specific to the user’s preferences on the interface, and persist those settings on different browsers. My goal for these decisions are hopefully only to further improve the FME Server product.

Reflection

Working within this project and at Safe Software has given me plenty of insight in working within front-end development. I refined my ideas through our feature demos once they are completed, or asking opinions through our internal experts who use these tools and help clients using FME Server’s tools, or even asking other developers who are associated with FME Server for their opinions, all have helped me become a better designer and developer. I was also able to experience working on an agile environment, as well as the experience of working with product owners, qa’s and other developers all working on building a wonderful product.