Clarks | Clarks One B2B Reseller Site
Clarks has been recognized as the number one shoe brand in the UK and fourth largest in the world. Clarks’ foundational pillars of innovation and craftmanship have fueled their success over the last 200 years. Clarks engaged Optaros by MRM//McCann for a massive systems upgrade and implementation of their new state-of-the-art ClarksOne B2B e-Commerce website, specifically to streamline the use of its order/reordering features for Clarks resellers.
Project Summary
Overview
The Clarks One site hadn't been updated in a while, and both resellers and the Clarks sales team were struggling with a cumbersome, desktop-specific ordering flow and "spreadsheet" interface that was hardly mobile responsive. Clarks wanted to bring the new Clarks One visually in line with their eCommerce sites, applying their brand look to the B2B solution. The challenge was in figuring out a way to make a desktop-specific grid solution and make it easier to use for sales reps on the road, resellers switching to tablet devices, while also ensuring it was usable, followed traditional eCommerce best practices and visually eye-catching.
My Role
Lead UI Designer for project, responsible for collaborating with a UX Lead on app flows and a feature value matrix, building out a pattern library/design system, visual design for all screens and interaction documentation. I was also responsible for ideating ways to convert the site's ordering grid into a more modular, mobile-responsive solution, and incorporate Adobe Scene7 into its Product Detail pages, allowing for additional view options of the Clarks product.
Converting the cumbersome.
Optaros partnered with over 200 global stakeholders at Clarks, undertaking an extensive discovery process that included surveys, questionnaires, focus groups and contextual inquiry to understand how the current Clarks One site was failing resellers and a remote sales team, apart from the need to bring it visually in line with the brand.
Key insights included:
1. The ordering setup process was a slog, forcing resellers to always start a new order from an Order Header without being able to "grab and go" from a traditional Product Listing Page or effect a quick order.
2. Selecting multiple sizes and dividing a cart while completing an order was presenting friction throughout the flow.
3. The "spreadsheet" stye interface was fine for stores and resellers who mainly put their order together on desktop, but troublesome for remote sales reps working to help stores on the road, and resellers transferring their tasks to tablet devices.
4. The eCommerce experience needed an overhaul in general, adding more detail to Product Detail Pages which included incorporating new product turnarounds, videos and 3D views; incorporating tags ("New", "Sale", "Coming Soon") to the PLP, and generally coming more into line with traditional eCommerce patterns.
The shoe doesn't fit? Fit to the shoe.
Optaros' strategy was to replatform Clarks One onto SAP Hybris 6.5, and leverage Adobe Scene7 for the product views while also streamlining localized payment processing and adding ratings and review.
My role as the UI Lead—aside from applying the Clarks brand to visual/interaction design, and build out a design system/pattern library—was to figure out how to take the spreadsheet style ordering grids and adapt them to mobile responsive solutions.
Once functional discovery was finished, I first created a robust components and pattern library from the Clarks style guide (eliminating the need for a moodboard). As I worked through batches of visual design (from loose wire-frames by the UX Lead), I evolved the library with additional custom views, such as Product components and rows/grids for mobile ordering.
Building a better (responsive) order form.
Once the brand was applied to the patterns, the next task was figuring out how to take Clarks' cumbersome order grid and redefine it for mobile use. I researched ways other big-box chains handled their mobile ordering solutions, specifically for resellers, and spent a lot of time looking at Home Depot's website as well as it's mobile tool for remote sales reps/contractor services. One of the key takeaways was how modular the item lists and order rows were in their tools, allowing reps and contractors to drag-and-drop new items and sizes, move them around in the cart, or remove with ease.
Breaking Clarks One's rows out of its restrictive spreadsheet grid would allow each item to stand on its own and not only updated the look of the "grid" to be more aesthetically pleasing (and in line with the brand look), but also allowed users to drag and move modular elements around, adjust size as they filled out an order, easily delete or add to an order with the tap of a button...and most importantly...each row would reflow from desktop to tablet/mobile without sacrificing required elements inside and without forcing users to scroll and swipe through a wide, horizontal grid. The new modular ordering solution would be more dynamic, interactive, responsive and scalable.
Once the pattern library was defined, the UX Lead and I partnered to craft a Proof of Concept based on requirements and user stories gathered by the team. We sketched a basic flow on the board, focused on both the Home screen and the Product Detail Pages which included the modular ordering solution placed on a Product Detail Page, and then designed screens we prototyped in Marvel.
Additionally, I adjusted the way items were presented in the cart to also reflow for mobile and tablet, allowed users to move items down to later shipping dates (breaking their cart into multiple carts that they could send for specific dates) by tapping the arrows, and easily delete or add sizes without having to dig through cumbersome grids. I also made it easier for stores and resellers to perform a quick order, and not have to open a new header every time they wanted to prep another one.
Ultimately, I designed nearly 200 screens across three breakpoints, including a revised set of Home, Category and Product Listing and Detail pages; Cart and Checkout flow; and tertiary pages such as information about shoe technology, downloadable content, FAQ and career/press pages.
Because the developer team wasn't using a hand-off tool such as Zeplin or InVison Inspect, I annotated margins. styles and interactions for each set of visual designs..
Award-winning shoes. Award-winning design.
Working together with Optaros, I helped design and deliver a successful project of such complex scale. The result was a personalized B2B website complete not only with legacy and new systems integrations, as well as leveraging Adobe Scene7 for its Product pages, but also a seamless, mobile-responsive and frictionless ordering and cart flow. the new ClarksOne website was a true success, and went on to win "Best Website - corporate or brand website" at the 2019 Drum B2B Awards.