Create a more efficient and intuitive User Experience on the Product Detail Page for Customers.
Identifying the similarities:
One of the biggest factors during the process of designing an intuitive shopping experience was the consideration that shopping online versus shopping in stores, should ultimately be the same. Although there are certain restricting factors in both options, the end goal is to to purchase a product. By allowing myself to immerse into a customer-first experience, the process of User Research became much easier.
Physically going to stores in New York:
I first started by visiting multiple furniture stores, in order to grasp how a customer would approach shopping for one of the most difficult products to purchase online. By taking notes on the entire experience of shopping in store, I was able to understand key aspects that could influence a more effective user experience when shopping online.
1. Competitive Analysis:
After visiting the stores, I printed off the PDP's of the most frequented e-commerce sites. We further analyzed and compared each site for what aspects were doing well or not done well.
2. Designing for Module Systems:
After visiting the furniture stores, I gathered more information from the top 15 most frequented e-commerce sites on what aspects worked well and what needed improvement. Through analyzation of the websites, I was able to break down the Product Detail Page(PDP) or the final page where a customer can read the details of a product, into a system of modules.
3. Process Finally Becomes Easier:
By placing all of the details found in the PDP's from the websites into modulized boxes, designing an intuitive shopping experience became much more simplified. This open ended task became reduced to just rearranging the hierarchy of information from the in-store observations.
After researching what worked well, this information needed to be presented to multiple teams through out the company that were beyond the Design team such as Retail, Pricing, Tech, User Research, and Category Experience. So I presented the information into a digestible infographic suggesting what aspects of the most popular e-commerce sites were and were not excelling in.
From identifying that there was a system of modules, I was able to broaden my scope and work on a specific type of module that allows users to understand all of the information.
Through a series of steps that narrowed down what information was most useful to customers, I was able to start developing concepts that were were allowing the users to figure out all of the information smoothly. In this case, I used the category of furniture due to the extreme option of customizing each order.
By working closely with the User Research Team, we were able to identify specific pain points in the PDP's that progressed us in the necessary direction to improve the overall User Experience of the PDP. We were able to perform and observe live research lab sessions on real customers, while sitting in the observation room. With the help of eye tracking, the process of determining useful module systems was very efficient.
We were able to suggest and tweak certain aspects in the concept development process, and immediately see results. For example, if a customer observed a pain point, I could use these real time suggestions to tweak in my prototypes.
A main paint point that I tackled was the customization aspect in certain categories in the website. For couches, the process of picking out a couch could be very confusing with hundreds of combinations of certain colors, sizes, fabrics, materials, and sets.
From observing the research labs, I was able to conclude an effective method of swatches, also similarly seen in the in-store shopping experience.
I learned that by initiating a step-by-step procedure of the customizable's, it helped eliminate confusion. Meaning, that by creating a hierarchy of the order of steps, it helped to eliminate the process of customizing a customer's order, ultimately decreasing turn-over rates.
In the current Product Detail Page, there are many things that could be improved to enhance the overall shopping experience. For example, there is little contextual information provided to show users what the category is, how to customize the set piece for preferred colors, materials, as well as overall visual hierarchy.
All of these create a stable a cohesive experience, especially on mobile, to eliminate any confusion. The lack of organization and structure make the users looking for key details that help a user decide whether purchasing a product on the website, very difficult.
From this PDP I used all of the User Research and User Experience to create a flowing PDP that helps navigate users through to the final product. Implementing the module system within the page to organize the hierarchy of the information was crucial, proving many times in the User Research testings that a simple and organized page helps the users digest information.
The modified PDP on the right shows all of the details that was originally on the old PDP, as well as new features that were useful to users. I tested my module system on a Full Set of a dining table, multiple chairs, customizable colors, materials, sizes and pricing options. By testing the system in the most complicated and chaotic outcome, I was able to spot any pain points early in the process.
First I organized the page by allowing the users to know what the product was, in this case a Davis Dining Table with its Pike Chairs. Then I broke up the information of the Dining Table and Pike Chair into separate sections with the Configure Full Set. By doing this, it allows the users to figure out the set step-by-step.
This organization allows the user to follow each step within the Davis Dining Table and then proceed with the Pike Chair.
Some of the new features that I used in the prototype was an accordion style layout to show the hierarchy between each set in the Configure.
Within each of the Davis Dining Table and the Pike Chair are the customizable features of the material and color. Once the user selects on the Materials, the section is expanded and is viewable in its expanded feature.
However, if there are more options in the Material or Color feature, you can swipe left to view or swipe down to view all.
After the user has selected the specific type of Material wanted in the Davis Dining Table, the section automatically collapses. Simultaneously, the Color section is expanded in order to progress the user into selecting all of the features until finished.
This is one of the most important experiences within the interface because by showing the users how to navigate the PDP first, allows them to focus on the important details of customizable preference. Once the Davis Dining Table has been completed, the entire set of the Table is collapsed and the Pike Chair is expanded and repeated.
Another key feature was showing the separate items within the set. This allows users the freedom to purchase the Table or Chair separately if the users were not satisfied with the Configure Set.