DRUPAL

designing a world class experience for a high end luggage brand

Drupal had two main problems: customer awareness was down, and there was a major disassociation from the Drupal.com showcase site and Drupal.org, a resource for developers to come together. Drupal was embarking on a roadshow and needed a fictional brand website to showcase the technical abilities of the platform.

 
                     User Journey

                     User Journey

                 Storyboard  

                 Storyboard

 

                         Persona  

                         Persona

 

            Pattern Library

            Pattern Library

 
 

The challenge

Drupal had a highly disparate digital presence (including a developer resource site and a number of micro sites). They were seeking a brand to showcase the capabilities and potential of Drupal to the developer's community. Acquisition and retention needed to be aligned to provide a scalable world-class experience that supported their ambitious growth plans and continued international expansion.

 

What we did

  • Fictional brand development
  • Product catalog asset creation
  • Full User Experience Design
  • Visual design
  • Copyrighting
  • Web and mobile deliverables
 

The approach

User experience is a fundamental component of the services I provide. As part of our teams approach, we went through a very rigorous process of truly understanding their users (in this case, consumer facing brands) and their motivations, in order to develop user personas and journeys that were as effective as possible.

Valen High End Luggage Brand was born 

Seeking a high-end luggage brand that appealed to world-class
travelers.

  • Mapped out user journeys and defined use cases.
  • Reviewed existing IA guidelines from Drupal.
  • Reviewed key features of the commerce cloud.
  •  Developed UX documentation to inform the visual design process.

Paper Prototypes 

Here's some initial Paper Prototype that illustrate layout and interactions.

Assumptions 

We worked with two main theories that lead to several assumptions.

Theories:

  • Customers shopping for a high-end luggage brand want a consistent experience
  • Customers shopping for a high-end luggage brand are interested in more then just purchase

Assumptions:

  • Customers will respond more favorably to a consistent brand and identity
  • Customers want to be educated about potential purchases
  • A conversion is possible on the first visit if the customer is provided with an easy and intuitive check out process
  • Customers would like to read destination articles and travel tips
  • A customer who has already made a purchase would return to read articles via emails and social media links
  • Customers shopping in this price point are more prone to confirmation bias. They are more likely to purchase a certain product if their friends and family have recommended it. 

Persona Development 

We developed 5 key personas to represent a wide variety of users. Each one has a seemingly different background with one common goal: they are all in the market for high class luggage.

 

 

 

 

Wireframe walkthrough 

This is the homepage, and where the user lands. They are greeted with a large hero image presenting different categories. The articles are under the hero image. Once the user chooses a category they land on the "Category Detail page". On this page they can filter by size, type, color and price range. 

 

Shopping Page 

This is where the user lands before they start a transaction. They are able to choose a color, add an item to the cart, see 360 views of the luggage and see social reviews of the same product. 

The next page is the transaction - its meant to be an easy 1,2,3 easy check out process. Step one is where the user confirms the quantity and even calculates shipping. Step 2 allows the user to enter their address and payment information and step 3 is where the user reviews their order and complete the transaction.  

 

Mobile Wireframes 

Since the site is responsive, we made a set of mobile wireframes as well. These wireframes show the homepage, product detail page, category details with filter and shopping cart. 

 

Visual Style Guide 

A guide that defines the rule for the visual portion of the site. The guide laid out rules around logo placement and usage, typography and colors.

 
 

visual design for valen 

VIEW OTHER UX CASE STUDIES