LookOurWay is one of the world’s leading advertising companies for producing events-based marketing materials and collateral. Most famously, they are the leading sellers of ‘inflatable tube men’, most often famed for their flailing forms at car dealerships. LookOurWay was looking for a major site overhaul in a migration to Shopify Plus from BigCommerce that would serve two goals: 1. Create the best user experience possible and 2. Legitimize the brands for a modern audience and not succumb to gimmickry.
https://lookourway.com (new site is not yet live)
Deliverables / Responsibilities
- Full Web Build
- Creative Direction
- Strategy
- UX / UI
- Prototyping
Wireframing
Problem:
One of the main complexities with the LookOurWay project was the fact that nearly every single product in their catalog was customizable. The nature of their products required the ability to brand the products for individual businesses, and they needed to give businesses the confidence in their customization options to make large-scale purchases.
In strategizing for the project, this required outlining all of the products and the various customization options that existed. Outside of direct variant customization, the client also required a variety of upsells, cross-sells, and product add-ons that needed to be included in the product configuration.
Solution:
I created thorough wireframes that outlined all of these customization options and prototyped out each individual user flow for the six core product categories. Several prototypes and user flows were required to cover the full breadth of the needed customizations for users and optimizing their experience across the whole product catalog.
product page wire frames
Configurator wireframe
add-ons experience wireframe
product configurator variants outline
collections and homepage wireframes
UI Kit
Problem:
LookOurWay was seeking a UI overhaul of the brand to better legitimize the business and update its visual standards to modern best practices. Given the customizable nature and new demographics the client was seeking – we sought a modern, tech-like styling with rounded and gradient elements that conveyed the inflatable nature of their best selling products.
Solution:
I created a UI kit that outlined the necessary components for the build and all the interface elements throughout the web build experience. I based the UI kit on common design system best practice conventions and included all core components: colors, typography, buttons, forms, inputs, and other necessary UI elements and their applicable UI states.
Home Page
Problem:
The main goal of the homepage was to better establish the new look and feel of the brand by creating impactful sections that showcased the diverse product offering. Another unique aspect of LookOurWay’s business was the bespoke customization options they offered to customers, and as such required sections explaining the unique service abilities of LookOurWay.
Solution:
A clean, refined aesthetic was chosen to give a clean homepage that utilized icons and simple imagery to best define the product categories. LookOurWay’s brand colors served as accents and pops of color to give great visual distinction to component blocks and products.
PDP
Problem:
The product page was the most daunting of the LookOurWay experience as it required multiple levels of customization for each product. Products could be customized through add-ons and upsells, a variant configurator, or a third-party integration with a 3D modeler. Even more complex, many products required two separate product pages, one with a variant configurator and another with preset variant options. Every unique configurator and customization needed a consistent UI and layout to create familiarity with users.
Solution:
After wireframing each of the configurators and customization user flows, I designed full prototypes for each of the core product categories, including the dual-template required products. The desktop and mobile prototypes displayed a full user flows through each of the multiple customization options.
high fidelity product page configurator flow
Collection
Problem:
LookOurWay’s products listed in the product grid required numerous unique features to show what could and could not be customized. Since most products were fundamentally the same product with different variant options applied in the product listing – it also required showing users the full options available to them without needing to dive into the product level for clarification.
Solution:
I implemented a serious of badges and filters to give users the ability to control their browsing and to more easily see the visual cues necessary to tell the differences between product options. A swatch feature was also pivotal to show the many color options available.
Navigation
Problem:
LookOurWay’s large product infrastructure required a thorough analysis of the information architecture and product categories and a redesign that matched the new UI and incorporated visual imagery of products.
Solution:
I audited both the UX of the navigation and reviewed the analytics to observe how users were interpreting and using the navigation. After compiling my analysis, I created a new information architecture and designed a navigation that best displayed the many-layers of the LookOurWay navigation in an experience that was consistent from desktop to mobile.
