Forrester Shopping Cart
Forrester Shopping Cart
Forrester underwent a series of significant and rapid transformations in late 2021 and early 2022. These changes were driven by the acquisition of SiriusDecisions and the integration of essentially a new product platform. Amidst this whirlwind of change, several core website features, including the shopping cart, had to be seamlessly migrated from a legacy format to a new back-end framework using Vue. This created the need for a fresh UI lift. The metaphor we often used during this transition was “changing the engines of a plane while it’s in flight.” Time quickly became a precious commodity, and we were challenged with meeting client contracts and needs.
Role
Design Lead, Researcher, Project Manager
Duration
November 2021 – February 2022
Process
Discovery, Ideation, Design, Handoff, Reflection
Tools
Figma, Illustrator, MS Teams, Slack
Role
Design Lead, Researcher, Project Manager
Duration
November 2021 – February 2022
Process
Discovery, Ideation, Design, Handoff, Reflection
Tools
Figma, Illustrator, MS Teams, Slack
Role
Design Lead, Researcher, Project Manager
Duration
November 2021 – February 2022
Process
Discovery, Design, Handoff, Reflection
Tools
Figma, Illustrator, MS Teams,
Slack
Discovery
How It All Began
At the time of the project, Forrester was working with the design agency, Maark, to coordinate the division of labor. During one of our weekly Monday stand-ups, the ticket to migrate the shopping cart and checkout experience was pulled from the Jira backlog, or as we liked to call it, “the magic hat.”
With a Forrester subscription, clients gain access to an extensive library of reports. They also have the option to purchase individual reports from other adjacent services without committing long-term, though at a higher price point. Client subscriptions are one of Forrester’s primary revenue sources and play a big role in contract renewals. However, a la carte report purchases also open the door to potential new subscriptions.
Establishing the Problem
- W3C Compatibility: Ensure the checkout process is compatible across different browsers, devices, and platforms.
- Mobile and Tablet Support: Implement a responsive design with fast load times and touch-friendly elements.
- Error Prevention & Easy Corrections: Use inline validation and allow easy cart edits to minimize mistakes and frustration.
- Trust & Transparency: Implement a branded interface to build trust with clients.
Direct and Projected Long-Term Business Impact
- Reduced Cart Abandonment: A smooth, simple checkout process helps reduce cart abandonment rates.
- Improved Conversion Rates: A streamlined, user-friendly checkout increases the likelihood that users will convert from browsers to buyers. Clear steps, easy payment options, and minimal friction can significantly boost sales.
- Enhanced User Experience: A seamless checkout creates a better overall user experience, boosting customer satisfaction, loyalty, and the likelihood of repeat purchases.
- Increased Average Order Value (AOV): Offering upsell or cross-sell opportunities during checkout can encourage customers to buy more, increasing the average order value.
- Compliance and Accessibility: A well-structured checkout process that follows legal requirements (like accessibility and data protection laws) can prevent costly issues down the line.
Direct and Projected Long-term Business Impact
- Reduced Cart Abandonment: A smooth, simple checkout process helps reduce cart abandonment rates.
- Improved Conversion Rates: A streamlined, user-friendly checkout increases the likelihood that users will convert from browsers to buyers. Clear steps, easy payment options, and minimal friction can significantly boost sales.
- Enhanced User Experience: A seamless checkout creates a better overall user experience, boosting customer satisfaction, loyalty, and the likelihood of repeat purchases.
- Increased Average Order Value (AOV): Offering upsell or cross-sell opportunities during checkout can encourage customers to buy more, increasing the average order value.
- Compliance and Accessibility: A well-structured checkout process that follows legal requirements (like accessibility and data protection laws) can prevent costly issues down the line.
Reviewing the Current State
In Figma, we’ve organized screenshots of the old checkout process as reference points. The goal is to understand how users interact with it and get a sense of the overall flow. While it’s a pretty basic approach, it gives us a look at the core structure and shows which elements still need to stay in place for now.
Conducting a Landscape Analysis
A good starting point is to do a competitive analysis of what the industry leaders are doing. By looking at how they solve common problems, we can learn from the best and also see what to avoid. For example, Best Buy and Target have busy cart experiences that focus too much on impulse buys, which doesn’t align with Forrester’s selling model. On the other hand, Apple and Etsy take up more space than I’d like, leading to unnecessary scrolling when you have a full cart.
Outlining the Hierarchy
We also need to focus on creating a design layout that’s scalable and flexible. The current interface doesn’t adapt well to different screen sizes and wasn’t built with any frameworks in mind. There are plenty of areas to improve, like adding a promotional section to highlight trending research and giving users the option to save reports in their cart for a “save for later” list. This feature would let users pause, but not abandon their decisions, improving their experience. We can also identify more friction points by drafting a journey map.
Purchase Journey Map
It’s a bit of a rollercoaster with its ups and downs. Every happy point is followed by a friction point. The biggest challenges occur when clients have trouble finding the research they need or feel overwhelmed during the payment part of the checkout process.
Diagraming the User Flow
Clients can check their shopping cart anytime from the global header. They can also add any report or while browsing the Forrester website. When they click on the cart, they can either remove items to empty it or start the checkout and payment process.
Design
Primary Colors
Forrester’s core color system is based on two main ideas. First, black and white are the dominant colors for the brand’s main interface. Second, Forrester Green is at the heart of the brand, representing its nature-inspired roots and vibe.
Secondary Colors
Forrester’s secondary color palette is used sparingly, with Yellow being the key exception. In the digital experience, Yellow is used as an action color to show users where they can take action. While not every interactive element will use Yellow, it’s important that any elements using it are clearly clickable.
Typography
The main font for the project will be Forrester’s brand font, Proxima Nova, along with other fonts from the Proxima Nova family. Headings will use Bold, subheadings will use Semibold, and regular body text and labels will use different sizes of the regular version. Italics can also be used when descriptive text is needed.
Sketching and Wireframes
The user flow outlines a simple journey for the client experience. Since we have some flexibility in presenting the info, we can explore different layout ideas at this stage. The checkout screen is just three pages, so we want to keep it simple. We start with lo-fi designs to get the foundation right before moving on to high fidelity.
The Design Review
In the initial design review, the design team works together to go over the low-fidelity layouts, discussing the pros and cons of each version with the marketing and developer teams. This helps refine the best design elements to move forward with. The goal is to mix and match what works and ditch what doesn’t add value to the overall design.
Upgrading to High Fidelity Wireframes
Once we’ve identified all the design elements in the lo-fi phase, we can move on to a more polished high-fidelity design. It’s important to note that during this project, Forrester was also working on creating their design system, and the wireframes helped shape and update a few design components, like the research card, button, and typography. After all the screens are designed, we can create a prototype for a more interactive presentation to the product leads.
The Demo to the Product Leads
The business lead gets their first preview, and we walk them through how and why design decisions were made, cross-referencing the requirements along the way. We collect any questions and feedback before heading back to the drawing board.
Depending on the feedback, the next step is either revisiting the design or moving on to documentation. It’s also important to note that due to the tight timeline, some feature upgrades had to be put on hold and will be revisited later when resources free up from other high-priority projects.
Handoff
Documentation and Redlining
During this project, Figma hadn’t introduced developer mode yet. If we had Figma’s developer mode at the time, we could’ve saved about a week—maybe more—by not having to manually count pixels and boxes between elements. That extra time could’ve been better spent on development, design exploration, or getting the release out sooner. Looking back, the process was quite analog.
Tablet and Mobile Views
Along with redlining, the documentation includes tablet and mobile views of the high-fidelity designs. Dynamic web design takes care of the rest during breakpoint transitions for resolutions in between.
The Demo to the Developers
The demo to the development team is similar to the one shown to product leads, but without the feedback session. During this walkthrough, developers can clarify specific back-end logic, which might lead to design tweaks based on what’s technically possible. Given the tight timelines, some concessions might be needed for the UI. For example, adding new features like the “Save for later” option had to be cut.
Challenges and Compromises
One common issue we run into is how elements of the layout shift during certain breakpoints. We focus on documenting for mobile, tablet, and 1080p desktop screens for the sake of efficiency. Because of this, some elements don’t always align or stack the way we expect, so the designer and developer often work together to figure out a solution and keep things moving.
Reflection
Learnings and Takeaways
- Increased report purchases: A 6% uptick in individual report purchases semi-quarterly.
- Lower cart abandonment rate: A 32% decrease in cart abandonment. Users are now proceeding through the flow, even if they don’t always complete the purchase.
- Increase in service subscriptions: Clients are reaching out to account reps directly from the cart to register for new services or start renewal conversations.