About

The company has been in business for almost 30 years. The original B2B website was built primarily as an online ordering platform for authorized dealers to place bulk orders at wholesale pricing. An exact duplicate platform is also in place without the purchasing buttons to provide product information for consumers.

It was rarely used by dealers and when they do use it, it causes even more problems and adds extra work correcting errors with the orders than doing it manually via spreadsheets and email.

Role

  • Branding / Art Direction

  • Product Photography

  • UX/UI

  • Front-end web design (Collab backend with an Agency)

Old Website

Process

It took a few weeks of negotiation until the owners agreed to entirely redo the website, from constantly patching up and replacing images and information. Upon approval, I collaborated with the product specialist with years of experience in the industry.

We identified all existing pain points, conducted competitive research, noted potential solutions and transformed them into features. Because of the time limitations, I skipped the low-fidelity wireframes and started working on the high-fidelity design. I also started taking new product photos that follow the same style and format. I created the editing guidelines that I passed on to another contractor for more efficiency. We then contracted Lakehouse Group, an agency for web development services specializing in e-commerce.

We ran a series of testing in-house and with selected B2B clients to gather feedback. A few iterations were done after the testing and we launched the site, right in time for the booking season from where we got great responses from many of our dealers.

Solutions and Results

  • Restructured and organized the main menu

  • Easily find products with new filter and search feature

  • Coherent information hierarchy

  • Well-branded, clean and modern interface

  • Order and edit quantities of multiple variants on one page

  • Fewer steps, less clicks, faster bulk ordering (UX)

We were able to transform even a few technologically challenged individuals to switch from the traditional printed spreadsheet and email ordering to the modern and easy online system.

Programs Used

  • Illustrator

  • Photoshop

  • XD

  • Lightroom

Challenges

The old website loads a lot slower than usual and the website doesn’t have a clear visual identity. It used multiple fonts on one page, and multiple colors that are not serving specific roles for the brand. There was no concrete style in product photography. The biggest challenge is the organization of the navigation and overall content layout.

We have to set a logical navigation path to make the menus intuitive for the needs of dealers who will be ordering in large quantities. Selecting a specific variant of a product takes around 9 clicks including the 6 dropdown menus before the add to cart button appears. Ordering 4 variants of the same item means repeating the steps four times.

The new design has to flow smoothly for easy product lookup, filtering, and ordering with fewer steps and faster load times. The overall brand identity has to be consistent, purposeful and obvious in the entire interface.