Screen Recording November 2023
Goals & Vision
We needed a flexible, easy-to-use web application that could integrate into a wide variety of brands. Photographers needed to be able to use the tool and to feel comfortable sharing with their clients (end-consumer) to use as well. Each item is fully custom made, some wall display products can cost hundreds of dollars, because of this it was essential to build confidence prior to order submission.
Roles & Responsibilities
I was the sole designer on the project working within the design system that I developed for all of the design apps. Along with design, I have taken part in frontend react development for a variety of features including architecting and building the shared theming and components, building the gallery filter menu, supporting new products, enhancing renderings, and more.
Results
We built a theme-able interface with flexible selections and high quality renderings which benefit over 5,000 users each month. This tool has become the primary ordering method for all wall products at White House Custom Colour and has created growth into new markets with it's simplicity.
Theming
Details
• Persona research and discovery to understand the needs for the variety of photographers and end consumers using this design tool for different purposes
• Collaboration with the wider design team to create a system of styles with fonts and colors
•Dark theme created to be easily implemented with consistent values in the tokens/code
•Application font list, colors, and other styles are completely theme-able by other brands
•Custom iconography created to support the unique actions of the app
•Design system styles and components structured to mimic the code structure in React with Styled components for efficiency, consistency, and to reduce error
•Documentation using Storybook and Zeroheight with language guidelines, styles, and components
