Audience: Users of their proprietary software, including Junior and Advanced Engineers
UX Requirements: We were hired to work on the overall UI/UX of their software
Deliverables: Concepts, Wireframes, Prototypes, Visual Designs, Handoff Specs
Software: Photoshop, Illustrator, Axure, Figma
At ICS, I worked on the UI/UX for a system for engineers to build and set up complicated engine structures. I took over for both a UX and UI designer, they had worked on the project for over a year, and an initial version of software had been released to customers. My duties were to maintain the pattern library, prototype, and visual design files, while adding incremental features. I would meet with the team, talk about the next features they wanted to add, and work on a plan to implement solutions. We also gathered beta-tester and customer feedback, and made revisions to improve their experience. I was part of a worldwide team of several people, working in two-week sprints.
One particular application within the system was a node-based visual editor, and I was assigned the task of improving the UI for complex node configurations. I was familiar with node-based software like Quartz Composer, and studied similar applications. I then sketched out some ideas, and developed some wireframes. I presented the new concept to the client, which was then approved. This redesign used use wire-like connections to link between blocks of nodes, which helped improve the visibility of connections between the blocks. I both wireframed and designed the UI using Figma. Setting up a few types of node pieces as components allowed me to swiftly mock up complex structures to match the setups that were giving users trouble. The overrides feature of Figma allowed to easily change the text, input and output icons, and other special situations. I would export the entire setup as an SVG and bring into Illustrator to illustrate the wires, it was much faster to draw straight lines and use the Twist filter to visualize them. I also used the Figma tool’s Handoff feature to show the developers the specs. Lastly, I developed a pattern library for the node-based application in Figma, using all of the components I had created.
Other miscellaneous tasks for this project were to find or create icons for new features, and work on wireframes for smaller applications that the system would link to.
Colors, icons, and fonts have been changed for these screenshots.
Style Guide for the block elements in the node-based editor
Example of linked blocks
Figma’s powerful overrides system allowed for block items to be built as individual Components