Howdy.
I'm an interface designer, developer and creative director with extensive experience working with clients to deliver creative web applications. I work globally and play locally in Northwest Montana.
Portfolio
Interface design is a constantly evolving process as trends and technology
change. I've designed and built a ton of interfaces over the years that have come and gone. These are a couple recent
examples of work that illustrates the process from concept to production. Want to see more? Contact
me.
Yeti Cycles
I worked with Yeti Cycles and the ZaneRay team to design & build a site
that effectively portrays their brand, highlighting rich content and imagery. It is easy to
manage with a headless CMS, functional e-commerce, and it serves as a pro and B2B site.
I worked with the team at ZaneRay to design and implement an agency-wide design system that is the
foundation for all recent client work. It is comprensive Figma libary and code library with a shared
vocabulary of variables, components, and properties.
I've done a lot of work for Skullcandy over the years. These app animations were a fun new way to express the brand as through functional prototypes that influenced various app components.
The Oboz site was their first foray into direct-to-consumer e-commerce. The site effectively articulates their product line and shoe technology as well as introduces some unique shopping tools with compare and product finders.
I've been lucky to work with amazing clients in the past and
present. Most of this work would not be possible without the larger team at the ZaneRay
Group.
Yeti Cycles
Skullcandy
Patagonia
Black Diamond Equipement
Traeger Grills
Orvis
evo.com
Oboz Footwear
Lands' End
Osprey Packs
Jackson Hole Mountain Resort
C.C. Filson & Co.
Buck Knives
Thor Industries
Nixon Watches & Accessories
Skills
A strong background in visual design combined with a natural
curiosity for diving under the hood, means I have a broad range of experience from interface design to development. I've worked in
different capacities with cross-functional teams on a long list of projects resulting in a deep UI toolkit.
Red Eagle Valley in Glacier National Park - August 2016
Quito, Ecuador - June 2016
Yeti Cycles
Creative Direction, Interface Design, Front End Development, 2020-Present
I worked with Yeti Cycles and the ZaneRay team to build a site
that effectively conveys the brand, is shop-able, and serves as a pro and B2B site. The end result is
an effective vehicle for Yeti to deliver robust content on a regular basis, serve up highly experiential
pages that articulate their technology and design as well as convert shoppers.
Bike pages contain a mix of luscious photography, technical data, product configuration, and interactive features
to give users a rich in-depth look at these premium bikes.
Research & Refine: Bike Details
Until recently, Yeti Cycles were exclusively available through authorized resellers. Mid-2023, Yeti made the move to sell bikes directly from yeticycles.com. Through user testing and feedback, the existing UI needed refinement to be tuned for direct-to-consumer sales. Updates were made to build a more intuitive connection between bike selection and purchasing, following established e-commerce patterns while still retaining an elevated experience that is pure Yeti.
Product Details
Yeti has a wide range of products, from premium apparel to replacement parts and water bottles. We designed and
built a page that is extensible and supports rich on-model and action photography or can be stripped down to focus
on the basics.
Research & Refine: Product Details
As part of the bikes direct-to-consumer push, we took the opportunity to infuse some learning from updates to the bike purchase path to optimize product pages as well. They still provide an elevated storytelling experience, while applying more established e-commerce patterns to the page, allowing for more space for product messaging, and local inventory. The UI between the bike and product pages is also more consistent.
Team and Community
Racing, ambassadors, and stories are a long-standing part of Yeti’s ethos. I designed and built a
best-in-class system of reusable components to leverage Yeti’s rich content and storytelling in an engaging way.
Design System
Under the hood is a robust design system based on atomic design principles and reusable components that directly
maps to the front-end framework.
Skullcandy approached our creative team with a number of app design needs including mobile apps for their wireless headphones and a companion Windows app for their new gaming headsets. In addition to creative and UI direction, I leveraged HTML, CSS, javascript and SVG to execute a number of different prototypes and animations.
A series of app animations and explorations for a uniquely retro futuristic vibe that aligned with the design of the headsets packaging and other merchandising. (html, css, js, svg)
Creative Direction, Interface Design, Front End Development, 2021-Present
As a growing agency, we identified the need for a consistent system to manage multiple projects and build efficiency into our design-to-development process. We needed a shared vocabulary between designers and developers where naming conventions for everything from colors, spacing, and components were consistent from project to project. I led both the design and development of this project with the help and constant feedback of our team of talented UI designers and Front End Developers.
Base Themes Variations
Yeti Cycles Themes Variations
Just the Basics
We were very intentional about creating a design system that wasn’t overly opinionated yet contained all the core elements needed to kick off a new design project. We wanted to reduce the overhead of defining core elements like type, buttons, inputs, and other fundamental UI components and allow most of these core elements to be controlled via properties and settings. This closely reflects our development strategy.
Responsive Layout - Mobile
Responsive Layout - Tablet
Responsive Layout - 1280px
Responsive Layout - 1680px
Responsive Layout - 1920px
Core Components
The design system also includes components that we were repeatedly designing and developing. They were built in Figma in a fully responsive way so that a designer can customize and build upon them in new projects. All these components have shared naming conventions and properties of the same components in our codebase. These components minimized one-off designs to where they were needed and encouraged designers and developers to work strategically on how a page or project is built.
Figma Variables
CSS Variables
A Systemized Approach
The latest release of Figma included tools that fit right into our existing design system and allowed us to build an even tighter connection from design to development. We quickly pivoted and leveraged Figma variables and modes to drive the core properties of our design system. These directly mirror the code that drives our spacing, colors, theming and responsive strategy. Figma variables output directly to CSS custom properties.
Development
This whole system is tightly paired to our development platforms, The foundational variables match CSS custom properties for a core set of components built in Vue.js deployed in Storybook. A custom Shopify 2.0 theme also is built around the design system.
Results
The Boreal Design Library shared by designers and developers had a significant impact on our entire process.
It allowed us to rapidly start new projects in both design and development. Designers and developers now have a shared vocabulary of everything from variables to components and properties. Designers are creating components in a way that considers how they get developed.
The handoff process is streamlined.
Consistency from project to project. A designer knows what to name things like color and components and a developer does less invention on the menial parts of a project.
Significantly less one-off design work and code.
And most importantly our design team has more time to focus on the creative aspects of a project or solve complicated UX challenges.
Oboz Footwear
Creative Direction, Interface Design, Front End Development, 2021
The Oboz site was their first foray into direct-to-consumer e-commerce. The site was designed to effectively
articulate their product line and shoe technology as well as introduce some unique shopping tools with compare and
product finders. This is built on a solid design system coupled with reusable components that leverage
headless e-commerce and a CMS.
To help users understand the difference between each product I introduced a visual compare tool to more clearly
articulate the variations as part of the product details.
Series Pages
Underpinning the Oboz site is a series of reusable components that allows them to easily create Series landing pages or
other custom content as they introduce new product lines. These pages illustrate the features and
benefits of each product line.
