E-commerce Website | Pavé Life

ROLES: user research, wireframing, IA, web design

Background

Pavé Life is an e-commerce marketplace for arts, culture and premium entertainment offering consumers a one-stop shop for shows, events and restaurant deals. The company mission was to build customer loyalty while creating strong affiliate partnerships with small and medium-sized businesses in the arts, culture and entertainment industries.

My role

To re-design the online consumer presence across web and mobile channels through user research and extensive prototyping, which included whiteboard sessions, sketching, rapid prototypes and high-fidelity wireframes.

Process

My first step was to sit with marketing and business teams to gather insight on existing products, competitor markets, and what we can do to position ourselves differently in the space.

This followed whiteboard sessions and creation of high-level user flow diagrams and site charts to organize and compartmentalize all the information.

Product flow diagram

Product flow diagram

The above is an early iteration of a flow diagram for the product flow from the point when a user signs up to the checkout stage.

Design challenges

Sign Up Flow

After hashing out the finer details of the different user flows, we tried to establish the drop off points between a user coming to the website and making a final purchase. The first and most crucial step being user sign up.

Sign-up form snippet

Sign-up form snippet

 

The screenshot on the left shows an early iteration of user login.

For a service that requires sign up, it is a huge challenge to establish conversion at this step.

Our approach was to keep the entry fields to a minimum to minimize user frustration. A user can easily switch between member and new user tabs with a single click. We also kept user inputs to a bare minimum for both member and new users thus reducing the time required for that conversion to happen.

Another consideration was implementing the “forgot password” logic without interrupting the user flow.

Forgot password and recovery flow

Forgot password and recovery flow

In the above wireframe, on entering an incorrect password or on hover over the ‘?’ icon, a popover appears prompting user to take an action. When user clicks on “forgot password”, the login box flips over in a smooth transition with the password recovery information, as shown. In this interaction, user stays in context the entire time.

Safety-enhancing

After conducting preliminary user research in the form of surveys and in person walk-throughs, we found one of the main reasons why users leave a page that requires sign up was lack of trust.

The responsibility of spreading the feeling of safety among our users is extremely important to us. We combined a social sign-in with the classic sign-in. This instantly increased our conversion! A social sign-in, if done right, is an extremely powerful idea. It saves time and trouble.

However, it can also increase the feeling of danger. When user clicks on the Facebook button we clearly state that “Pavé Life won’t post on Facebook without your permission”. Of course that in itself is asking for a great deal of trust since it’s just a statement, but still, at the very least, it addresses a probable concern in the users’ minds. Thus, by increasing user-friendliness and building a level of trust early on we noticed our user retention numbers go up!

 

OFFER PAGE

Another important drop-off point for an e-commerce website is the product or offer page, as seen below.

Product/Offer Page

Product/Offer Page

Based on our research, effective product pages use a combination of text and images to show product information, availability, price, and a clear way to purchase the item.

Keeping these fundamentals in mind, I designed the above layout to clearly demarcate different sections of the product page. The horizontal center line represents the fold with the most user relevant information placed above the fold. 

The page starts with the product image, occupying major portion of the page real estate. User can scroll through multiple images in an image carousel that opens up into a lightbox for viewing higher resolution images of the product/offer. Large images show more detail, and multiple views offer even more information.

The offer details to the right shows important information about the deal price. By adding Value and Discount section, we showcase how the deal price compares to the offer market value.

 

CHECKOUT PAGE

Checkout Page snippet  

Checkout Page snippet

 

Above is the wireframe mockup for the checkout page. Packaging an offer or event with a restaurant or hotel deal was a value proposition we offered as part of the checkout flow.

Because shoppers are making final purchase decisions in the cart, it is essential that the cart clearly summarizes the items in it. We included offer name, offer details, quantity and price. Clearly showing these details helped shoppers remember and compare items in the cart.

We added payment details to the same page so users need not leave the page context ensuring nothing distracts them from making a purchase.

Research Methods

A/B TESTING

We created two versions of the page with different placements for the offer details and image section to test which version users were more receptive to.

 

ONE-ON-ONE USABILITY TESTING

We ran usability tests with our key persona types, mostly observing and occasionally asking questions, if and when needed.

In our tests, users gleaned product details from images, including details that were not covered in the description. Pictures of products in use or in context answered customer questions without them having to look elsewhere for information.

Users expected to see offer or show reviews from other users to better understand the quality and popularity of an event or offer.

Social Validation - We decided to incorporate the feedback and roll out a reviews feature in a later release. Additionally, we planned on recognizing top contributors and letting readers rate the value of a review. This included summarizing keywords and phrases used in positive and negative reviews, or even highlighting quotes from useful or descriptive reviews. Such additional information helped make it easier for users to get the full benefit of others’ opinions.

 

REMOTE USER TESTING WITH EYE TRACKING

We ran remote user tests with large user groups to test the website functionality and ease of use. Enabling eye tracking threw light on the pain points and brought to light factors that worked and caught users’ attention. One such example was the “Highlights” section. This was the third most important section users focused on while trying to find additional information about the product offering.

Product descriptions seem to be disappearing on many e-commerce sites. They’re located in the far reaches of web pages, away from product images, entirely hidden behind links, and shoved into small boxes. (Source: Nielson Norman Group). For this reason, our highlights section worked extremely well, resulting in quick conversion.

Takeaways

For this project, testing was one of the key steps in the design process and product lifecycle. It helped uncover potential problems that we could address early in the design phase. Reducing clutter, building customer loyalty and creating an experience that stirs a positive emotion became extremely important while redesigning Pavé Life’s online brand.