Product Development Process Workshop Series
Access complete case study here
In order to define and streamline the company’s product development process, we (myself and 1 other product designer) initiated and facilitated a cross-functional workshop series to allow representatives from each part of the business to collaborate on a process that meets each department’s needs.
User Access Modes
Access complete case study here
Through years of collecting feedback from customers and users, we determined that a large percentage of our webapp product’s usage was in factory floor environments. These environments were often loud and with lots of distractions, and could sometimes include moving parts that had the potential to bump a touchscreen monitor running this product.
We chose to stick with a pattern that was familiar to our factory floor users when determining how to address this problem. A common pattern that many OEMs in our industry use is to require an access code to access certain features that should otherwise be locked.
History Panel Redesign
As part of a day-long hackathon, I worked (as the sole designer) with my scrum team to rapidly conceptualize and prototype improvements to our webapp’s command history panel.
Access complete case study here
Highlights include:
- Expandable/collapsible history items
- Colors and iconography to aid in comprehension and increase readability
- Actions to facilitate copying and re-sending requests
- Filters to help users drill more easily locate what they are looking for
Here is what it looked like pre-hackathon:
Here is the result of the hackathon:
Inline ASCII Terminal
In order to prevent frustrating situations (such as difficulty connecting to the robots) for users who prefer to send commands via a terminal (rather than using the corresponding UI), we implemented an inline ASCII terminal.
Highlights include:
- Syntax highlighting
- Type-ahead suggestions
- Inline panel for relevant documentation
- Error highlighting/warnings to highlight improperly formatted commands
Figma Component Library & Design System
As part my spearheading the Sketch-to-Figma transition at RTR, I took on creating and maintaning a library of reusable components for the designers to use in their designs and for the developers to inspect for specs.
Voxel Color Selection
In order to help users better configure the canvas display for their needs, I worked as the sole designer to pair with a developer to develop a feature that allowed users to select which color(s) they would like for rendered voxels.
Documentation
I believe that having easily accessible and updated documentation can save a lot of headaches and time spent answering repetitive questions. When used as collateral to enhance live demos or walkthroughs, documentation can help users better retain important information.
In order to respect the NDA I signed, I cannot post some of the more robust documentation I’ve created, but here is an example of a guide that I wrote to help non-designers at the company learn how to use Figma to view and inspect design files: