CASE STUDY

A Shiny New Site

 
qudo logo.jpeg
 

The Results

  • Organization & categorization of 10K+ skus

  • Customer is able to shop by style, color, or collection

  • Curated app selection to meet the needs of the site while staying in budget

  • Increased online sales and brand awareness in the US

  • Custom CSS for form and function

  • Cross-selling features for consistent additional sales

  • Integrated and created interactive bi-yearly catalog


site is responsive to all devices. CSS for styling of search app integration

site is responsive to all devices. CSS for styling of search app integration

integrated store finder - CSS to keep styling consistent throughout site

integrated store finder - CSS to keep styling consistent throughout site


UX/UI Challenges

  • Over 10K SKUS to categorize into main and sub categories - additionally most products are interchangeable and there needs to be cross-selling features

  • Make the catalog interactive and shoppable

  • Cater to returning customers and new customers in the US - previously shopping trends by clients overseas were being observed and they did not align with US customers

  • Logo was only asset provided - styling, fonts, and colors need to be determined

Key Feature Goals

  • Easily sort through all products by any product feature

  • Align navigation and trends with US customers (client has multiple international sites separately)

  • Convey the quality of the product through the quality of the site and customer service

Solutions

Personas

The brand was well established overseas but was working to increase their US customer base. To date all customers had been acquired through B2C retailers. The existing personas were new customers who may stumble across the site through google shopping, social media, or referral, the other user would be one who knew the line already but was through a retailer. Additionally the future direct to site customer had to be taken into account. For new customers having explantations and cross-selling throughout the site helps to guide them in building their own collection. Since most pieces are meant to be mixed and matched there are many “how it works” or referencing features throughout the site. For existing customers who may want to build upon their current collection having lots of sorting options is critical. Customers shop not only by collection but color, size, price, and finish.

Organization System

Products were organized into major and sub categories through the product listing. This listing then needed to have the appropriate tags to correlate to the Searchanise app through Shopify which allows for specific filtering as well as compensates for typos. A significant amount of time was spent with the client to confirm all categories and then organize the product listing. This system later went on to integrate with Google Shopping which improved their SEO again after launch.

Integrations

Multiple apps were curated for this site to provide simple and easy solutions for both the back end user and end consumer. These include ‘Searchanise’ for product filtering and searching, A return & exchange app, and integrating ‘issuu’ for interactive shopping.

Navigation

The header navigation gives a high level view of product categories where as the collection pages give the additional option of sorting by product features. Having both of these serves the needs of all user personas and allows customers to casually browse or find specific products.

Product page showing all variants of style

Product page showing all variants of style

Interactive catalog - B2C can shop through curated collections

Interactive catalog - B2C can shop through curated collections

Sorting Feature - Collection, size, finish, color, size, price

Sorting Feature - Collection, size, finish, color, size, price

UI Solutions

The logo was the only asset provided at the beginning of the project. Since the product has such clean lines and the photography is so crisp and clean I reflected that with a clean sans serif font in varying boldness in a combination of black, white, and grey. Because the product is so colorful I kept the palette muted and only introduced a custom rainbow banner on the about section on the home page. This gives a nice visual break and also highlights product features.

Website Styling

Website Styling