VANS
PLP + PDP
Design Thinking / UX / UI
Redesigned shopping experience.
The product listing and product detail pages are the most interacted experiences that our users have with our products before making their purchase. The effectiveness of these pages is what drives our users to choose to shop with us or not. We looked at every aspect of these experiences with the most critical eye and attention to detail to ensure that the interactions our users experience aligns seamlessly with our business goals.
Project Overview
The product listing and product detail pages on vans.com needed a redesign due to some functionality and usability issues. In addition, the team wanted to update the look and feel of the experience to better align with the brand's evolving design system. We followed an iterative design process starting with research, ideation, wireframing, prototyping, and testing.
vans.com
My Role
My role was to oversee the UX/UI of the redesign and act as the bridge between the e-comm, marketing, UX, and development teams. I designed the initial and subsequent iterations of the UI, worked with UX teams to conduct and analyze user testing, iterate designs based on user feedback, and presented to stakeholders.
Goals
• Address and resolve the functionality and usability issues to improve customer shopping experience.
• Implement and refine new and existing features that aim to improve upsell, add to cart, and checkout rates.
• Modernize and improve visual design. Create a pleasing look and feel for our users to shop in.
Final Designs
Product Listing Page
Final Designs
Product Detail Page
Impact
User Feedback
These are some of the things our users had to say after our final round of testing.
PLP
“More clean, organized, and easy to read.”
“Product cards feel more modern and high-end.”
“Easier to navigate, not as much information overload.”
“[Filters] look cleaner and less dingy than the current design.”
PDP
“The thumbnails feel more engaging and easier to navigate.”
“[Sticky add to cart] is a super helpful feature.”
“Love the size tiles letting you see what’s available at a glance.”
Process
Iterative Design Framework
Our design process allowed us to research and define the problems we needed to solve. We cycled through rounds of ideation, prototype, and testing phases to ensure our designs resonate with our users before presenting final outcomes to key stakeholders and development. Here is an outline of what we did:
1. Researched current site by testing for user pain points/usability issues the team might have overlooked and as well as validating our own assumptions.
2. Taking the data gathered during research to begin prioritizing and defining the problems we need to solve.
3. Ideating and creating designs to address the main problems.
4. Qualitative testing with new designs to gather feedback from users.
5. Analyze test results and iterate designs accordingly.
6. Repeat testing and iterations for 1-2 rounds.
7. Present findings and recommendations to stakeholders.
8. Connect with development for handoff.
Test
Qualitative Testing
Here is a highlight of four challenges and features we tested:
1. Infinite Scroll - A user pain point we discovered during the research phase of the process.
2. Mobile Quickshop - A new feature we added to the experience to improve add to cart rates from the PLP.
3. PDP Size Tiles - A new feature we added to decrease the number of clicks a user needs to perform to select a size.
4. Sticky Add To Cart - A new feature we added to increase the add to cart rate from the PDP.
Test 01
Challenge - Infinite Scroll
The old design had an infinite scroll feature that prevented users from accessing the site’s footer and didn’t tell them how many items were left in that category. They would continuously scroll forever as the page loaded more and more products.
Solution - Progress Bar + CTA
We solved this by implementing a “view more” and “view all” button with a progress bar. A potential problem that came up was load time after clicking the “view all” button. Because of this, we decided to only implement a “view all” option if the number of products are below 100. Analytics found that a large majority of users clicked the “view more” over “view all” button.
Test 02
Challenge - Mobile Quickshop
The quickshop feature did not exist on the mobile PLP. It was a desktop-only feature. We tested a few iterations of the design to see what resonated best with our users.
Solution - Drawer Overlay
After the initial ideation phase, we ended up with various designs and tested version A: inline below product card and version B: drawer overlay. A majority of users prefer the drawer overlay that slides up from the bottom. Interactivity feels more efficient/natural on the phone and helps them focus and complete task of adding to cart without hinderances. We also looked at various buttons to initiate the quickshop feature: icon only, text only, and icon and text.
During the test, we asked users:
Which Mobile Quickshop experience is your preference?
20% responded with version A: Inline below card.
80% responded with version B: Drawer Overlay.
Here are some of the things our users had to say about each option:
Version A
“I like to still be able to see my options in the background.”
“This is cleaner and more succint, so it seems easier to navigate.”
Version B
“This looks great, feels great, I can see everything I need, the larger image is fantastic.”
“Everything is just about right there, I can navigate this much faster. Like if Vans drops a new collab and I want to get it ASAP, this would help me do that.”
“I like that the buttons stick at the bottom.”
Test 03
Challenge - PDP SizE Selection
In the old design, we used a drop down menu (Version B) for size selection. During testing, we found that this not only slowed the user down by adding two taps to select a size, but the user was also unable to see, at a glance, what sizes were available or out of stock. We tested three options for this new design.
Solution - Size Tiles
Users overwhelmingly chose option C. This allowed users to see all sizes that are available, saving time when looking for the correct size. Users were able to choose their size in one tap vs two taps with option B. The size tiles also updated in real time when users chose a different colorway, showing immediately what sizes are available. With the dropdown option, users would choose a color, and then tap the dropdown to see what sizes were available in that colorway, inducing frustration.
During the test, we asked users:
Which size selection is your preference?
0% responded with version A: Side Scroll.
10% responded with version B: Dropdown.
90% responded with version C: All Shown.
Here are some of the things our users had to say about each option:
Version A
“I don’t like having to scroll to see what’s available.”
Version B
“I don’t think I need to see all the sizes at once, it can be more compact.”
Version C
“Less clicks for me, I like that it shows me right away what sizes are available and what’s not.”
“Really quick you can see boom, these are all the sizes offered and what’s out of stock.”
Test 04
Challenge - Lost Add to cart CTA
Our PDP pages were often very long. During testing, we found that many users would scroll to the bottom to read reviews before deciding on the purchase, then scrolling back up looking for the add to cart CTA.
Solution - Sticky Add to Cart
We wanted to make this experience a bit more seamless so we introduced a new feature, sticky add to cart, to have the add to cart CTA on screen at all times (whenever a user scrolled past it). For example, if a user is further down the page reading a review and decides to add the item to cart, they are now able to do so without spending the time scrolling all the way up looking for the CTA. The hypothesis here is that it speeds up the shopping process and drives conversion.
During the test, we asked users:
Which option do you like the most?
40% responded with version A: Current TNF.
60% responded with version B: Size and color selector.
Here are some of the things our users had to say about each option:
Version A
“Just because I like to see all the pictures in their full view.”
Version B
“I love how this is all right there.”
“This was really simplified. I don’t think anyone would have a hard time using this.”
“It makes the whole process a lot easier.”
Observations
SUCCESSES
The project is on a successful path in achieving the goals we set for ourselves. Due to the way we approached the redesign and the extensive user testing, we were able to support key decision making in our designs. The team’s trust in our audience’s feedback allowed us to confidently implement and refine in new and existing features throughout the process.
Opportunities
There was definitely opportunity for the design team to communicate more frequently with the engineering team during the development phase. This way we can ensure that all designs are implemented as intended and address any questions or issues that may arise. In summary, be proactive in finding the opportunity to check in with developers and engineers periodically throughout the design and development process to ensure success with proper and constant communication between all teams.
