YoCoat Web Store

YoCoat! Automotive Paints

Magento Web Store

Automotive Arts, a Barbados-paint automotive paint supplier, sought to break into the American market but were discouraged by the expense of existing distribution channels. By launching a new web store, YoCoat.com, Automotive Arts sought to bring their automotive paints direct to their customers. 

YoCoat_homepage_imgs_combined

Project Summary

  1. Automotive Arts sought to disrupt how automotive paint is marketed, sold and delivered to body shops by launching a new brand and web store as part of their strategy to expand into the US market.

  2. I was responsible for designing solutions that would promote trust in the new brand and overcome resistance among body shop suppliers and owners who are not accustomed to purchasing inventory online.
  3. Lead UX designer responsible for brand development workshop, stakeholder interviews, site map, feature value matrix, wireframes and functional requirements documentation.

The Problem

New opportunities to reach customers

Automotive Arts wanted to break into the American market with their main product line, automotive paint. The client saw an opportunity to bypass the traditional distribution system in American industrial supply (i.e. XPO logistics) and provide their premier product directly to the end customer, local distributors (known as jobbers) and body shop owners.

Our Approach

Developing a new brand

I hosted a brand identity workshop that included a series of exercises designed to tease out the client’s perception of the future brand.  The attendees began by developing a vocabulary that would help describe the brand. Once everyone present had selected adjectives and agreed upon them as a group, we played a mad lib game to further refine the vision. Lastly we used scrabble letters and a pass-the-sheet exercise to generate a list of potential brand names. From this list, the client selected YoCoat. Additionally, a brand strategist and content strategist were present to use this information to develop a visual identity and tone of voice guide later in the project.

YC_Workshop_Photo-compilation_full-width

Our Approach

Mapping the ideal customer experience

In parallel with the initial brand development, I also laid down the foundation to describe the desired customer shopping experience by hosting an experience mapping workshop. Using research from stakeholder interviews, competitive analysis with companies such as Grainger, and online industry research. I helped the client establish three user groups for the future web store, the jobber owns a local distribution business, the body shop owner is the purchaser and often the end user responsible for completing the paint job, and the Automotive Arts Salesperson who wants to delivery a top-quality service and product when supporting their client. 

Using these personas, I mapped their relationship to the e-commerce sales funnel, homepage through order confirmation, transactional emails and delivery/return processes, working through questions such as, how is the customer getting to the homepage? How do you ship regulated products? How do you return them? How can the web store function as a business tool? These insights helped me generate a short-list of pain points that interactive features should be designed to anticipate or alleviate: 

  • Inventory management - provide support to small businesses by providing mechanisms to keep tabs on their inventory.
  • Brand loyalty - jobbers and body shop owners will not be familiar with a new brand and may exhibit hesitant behavior.
  • Digital adoption - the industry is resistant to change and non-digital users may prefer relationship-driven business behaviors.

Our efforts to clearly design for each audience helped lay the foundations for custom features that targeted specific user groups.

YC_Experience-map

Our Solution

Capturing the experience through features

Once I understood how each user group should experience shopping on the web store, I worked closely with the client to determine which features we would focus on building into the new store.

Salespeople wanted features that would support their salesperson-customer relationship and make resources readily available.

    • Mobile Checkout
    • A comprehensive and well-organized Product Description Page
    • Prominant contact information to make it easy for customers to get questions answered

Body shop owners wanted access to product information and inventory support.

    • Product detail page makes information about the product lines readily available
    • Line of credit supports planning and purchasing behaviors
    • Authenticated homepage provides a customized view with order history to help inventory management

Jobber needs are similar to those of body shop owners, with the additional requirement of needing to function as a local distribution step in the body shop supply chain.

    • Line of credit allows jobber to purchase inventory in anticipation of upcoming orders
    • Cart includes a line-item Purchase Order field, allowing jobber to assign a client name or order number to the inventory bing ordered, making it easier to assign and distribute products when the shipment is received
    • Wholesale pricing
AAP-Sales-Team-Persona
AAP-Body-Shop-Owner-Persona
AAP-Jobber-Persona

Our Solution

Visualizing a solution

I designed Inventory Management Tools provide information about the customer’s purchasing history and support inventory planning.

  • Authenticated homepage: When the user logins in (and remains logged in), every time they return to the homepage, they are presented with their recent order history.
  • PO input field in cart: When the customer’s order is ready for checkout, the customer can enter custom information alongside the product to support receiving.
YC_authenticated-homepage
YC_PO-fields-in-cart

Our Solution

Brand Loyalty

In a business built on long-standing relationships between jobbers and body shop owners, I looked for customer service touchpoints to craft a welcoming and helpful tone for the brand. 

  • Comprehensive Product Detail Page: The product detail page (PDP) makes formerly hard-to-find product information readily available, including training video content and links to product safety sheets.
  • Contact Us Page: The contact us information is treated as a call-to-action on the homepage, with readily available information styled in a bright call-out module and using a friendly tone of voice.
  • "Must-use-with" Feature: When a customer adds a product to their cart, if there are corresponding products such as a Low VOC mix-in, a slide-out tray appears confirming the product was added to the cart and notifying the user of the corresponding product.

 

YC_comprehsive-PDP
YC_contact-us
YC_must-use-with-feature

Our Solution

B2B Business Services

I integrated simple B2B tools into the shopping experience to support the existing Automotive Arts sales team.

  • Account Set-up: The account set-up form includes a step for customers to self-identify as wholesalers, providing access to wholesale pricing and other B2B benefits, such as additional sales support, extended product support and other specialty discounts.

  • Online Product Catalog: The category landing page combines category thumbnails with a product grid, thereby giving customers an eagle-eye view of YoCoat’s limited product line while spotlighting add-on items that support the core product lines.

  • Flexible Payment Options: A third-party payment option specializing in B2B credit services assists wholesale customers with inventory management, allowing them to order products before being paid by their customer, while offsetting the risk of credit management for YoCoat.

YC_account-set-up
YC_online-product-catalog
YC_flexible-payment

Conclusion

A solid foundation for a new venture

At launch, the site provided Automotive Arts with a platform to begin rethinking their core business model and start meeting customers in a digital future that anticipated further competition from online retailers as brands began to realize they would be able to improve their margins by circumventing existing distribution networks.

YC_case-study-header-img-1
YC_case-study-header-img-2
YC_case-study-header-img-3