Shaper Origin
Product Design | User Testing | UX/UI
Shaper Origin is an AR powered hand tool for woodworking professionals. I led the UX/UI design for the on-tool interface, helping to expand the tool's feature set post-product launch and refine the design system across digital and physical touchpoints. My role consisted of ideation, design, prototyping, user testing, and continuous iteration. In close collaboration with our product and engineering team, I also helped establish a systematic product design process that was anchored in user-centered design principles within
the company.
Accomplishments
INCREASED NPS SCORE BY > 30%
INTEGRATED USER TESTING
INTERNATIONALIZED UI
REFINED & EXPANDED DESIGN SYSTEM
How it works
Shaper Origin is a handheld CNC machine. The tool uses a visual positioning system, synced with proprietary ShaperTape, to track its location in space. Users' designs, created either on tool or with any standard design software, are projected onto a work surface through the on tool's AR interface. As the user cuts out their design in wood, metal, or other materials, Origin continuously auto-corrects for their hand movements. The result - the feel of a hand tool, with the precision of a machine.
The design challenge
Shaper was a small start-up that historically had only staffed industrial designers and mechanical engineers but had never worked with digital product, UX, or visual designers. The physical product was fastidiously designed and developed over 4 years, but the onboard UI lacked the same level of quality. There was a UI framework and baseline design system established to get the product to market, but:
-
The UI was not built to scale with an expanding feature set
-
There were serious consistency issues within the UI and across the platform experience
-
There was no formal product development process or user testing
Goals
Due to business pressures, priority was put on new feature development (in order to meet earlier marketing promises) vs. fixing existing issues. Changes had to be made incrementally and with minimal disruption to product roadmap milestones and timelines. Given this, the design team decided to focus on the below principles throughout our work, whether designing a new feature from scratch or addressing bugs or usability issues within existing functionality.
01
Refine and expand the design system to be scalable over the next 6-12 months of feature development and internationalization
02
Bring the cross-platform experiences closer together
03
Improve overall usability by integrating user testing as much as possible into the evolving product development process
Selected work samples
Onboarding experience
The original onboarding experience was not aligned with the design system, did not flow with the rest of the unboxing experience, and was not scalable for internationalization. I was able to streamline our onboarding flow, incorporate some fun animations, better integrate the look and feel of the brand, and accomplish our goal of enabling our users to get cutting as quick as possible. In order to minimize engineering effort and improve consistency throughout the tool, I created a template framework for these screens that could be reused throughout the interface.
Highlighting input fields to call out action areas and match web-experience
Selection style references the button styling, which is leveraged throughout the UI
All screens laid out on a standardized template so that they could be reused throughout the UI for a more streamlined experience
Increased font sizes and spacing to improve legibility, and allow for languages with text longer strings
Design system | Defining interaction conventions
Origin originally shipped with a simple number pad to input values, but feedback from our users revealed that lack of an on-board calculator was disruptive to workflows, as woodworking often involves a lot of math. During user testing of the new calculator functions it became clear, among other insights, that there were not consistent interaction patterns across the interface, particularly when it came to input conventions and menu behaviors.
Since our engineering team was already going to have to "open up" almost every screen within the UI in order to accommodate the new calculator functionality, I took that opportunity to work with them to define and implement a consistent interaction conventions framework. The output was a interaction behaviors 'style guide' which included guidelines for action confirmation patterns, modal controls, shortcuts, menu behaviors, gestures, touch targets and beyond that could be referenced by both engineering and design going forward.
Design system | Creating new patterns
While user testing another feature within the interface we realized that our selection patterns were inconsistent across cut types and tool modes, creating a lot of confusion and frustration amongst users. After doing an inventory of all possible selection scenarios, I realized that the mapping between selection states and action cues was ambiguous and, even worse, we had unintentionally been hiding half of the selection criteria equation from users. After this discovery, I was able to create a new selection pattern framework that fit within our existing design system, worked across all cut types, and included action cues that were contextually appropriate.
Inside cut
Outside cut
On line cut
Pocket cut
Guide
Patterns don't match other cut types or change states when selected
No relationship defined between selected shape and selected cut path
Old pattern
Shape highlight is visible and consistent across all cut types, with clear relationship to the related cut path
Pocket pattern aligned with "marching ants" style of other cut paths so users know it is a cuttable area
New pattern
Full pattern definition across all cut types and selection states
Prototype
Implementation
User testing & prototyping
We had limited engineering resources and were not often able to create functional prototypes, so I had to get scrappy. With an experience that was both digital and physical and required a lot of translation between 2D, 3D, and AR space, it was important to test functionality in context and mimic physical sensations. So, instead of testing users with disembodied digital screens, I developed a system using Invision, a spare iPhone, painters tape, and manual hacking of the tool to prototype new features with users.
The feedback and insights we gathered through these sessions slowly helped shift our product decision making from being opinion based to more grounded in data and user feedback.
Establishing process
Like many early stage companies, the product development process was unstructured and product decisions were often made by the loudest person in the room. As a lover of process, I took the opportunity to work closely with our VP of Engineering and VP of Product to develop an inclusive product development process and, most importantly, incorporate lightweight user testing into our product cycles.
