Creating a scaling and adaptable framework for displaying inventory across a diverse marketplace
Role: Lead Designer
From a uniform approach to displaying all inventory on Groupon, I initiated and lead an effort to establish a new card framework. This set a foundation for solving key business objectives and better serving the users' discovery experiences through a more flexible way of displaying inventory across contexts.
Delivered: Problem & Opportunity Analysis, Data & Stakeholder Insights, System Design
Groupon is a growing platform of increasingly diverse solutions to users' needs. You can find almost anything ranging from nail appointments to Caribbean travel packages to wireless headphones. This range of inventory is displayed to the user through cards, outlining key details about each solution. But with such a variety of use cases and solutions, our universal card template limited our abilities to best display those details to users.
Identifying the Problem
In the past, a universal template helped to mandate consistency across many business verticals and inventory types. Between contexts, users would have a familiar method for deriving information about inventory.
Consistency is only one objective when displaying inventory to users. It's also crucial to display the right information in the right format that best serves the user's evaluation. This meant our template inhibited us from integrating new information or adapting the card format to meet these objectives.
Goal: Develop a new card framework that could more effectively display inventory for user evaluation across all types of inventory and contexts within the platform.
Understanding the Problem
In order to validate and add detail to this initial observation, we leveraged user and business insights through experiment data and interviews. We discovered trends around the impact information had, pain points of users and stakeholders as well as started to get a clearer picture of all the types of information the card needed to support.
Digging into the Data
We'd ran many tests iterating on the original template - mostly tweaks on the display of information or types of information we included. Using Tableau dashboards provided by our Data Science partners, I took a deeper look at over 25 experiments and how they effected engagement and conversion metrics. Two general trends started to emerge:
1. Information and detail had different effects across contexts. In broader contexts, details often distracted users and we found more success emphasizing savings or promotion. In more specific contexts like search, we saw that details shifted behavior from just scrolling to more active evaluation. In one example, we tested surfacing multiple options through a quick-view on Desktop.
2. Differences in performance weren't just between context though, we also saw differences across inventory types. Certain types of information was more important depending on the type of inventory. In another example, we tested smaller imaged list cards against larger image gallery cards.
Understanding the Inventory and Business Needs
To get more familiar with the variety of inventory the card needed to support, we conducted a series of interviews with key stakeholders from different parts of the business. From here we gained a better understanding of their objectives and insights around their users and inventory as well as how the existing card template could be improved to serve them better.
With that understanding, we mapped out inventory types and the information that supported them. By grouping types of information, a structure and organization started to emerge the would help inform our solution.
Aligning on the Objectives
Combining our deeper understanding of Groupon's inventory with an extensive competitive audit, we identified a few key principles to guide our solution.
Just like the original template, we needed to maintain a sense of familiarity across inventories on the platform. Shared anchor elements and common hierarchy would be needed to create a language that could be easily understood between cards.
The card would need to be able to expand and contract based on the amount of information needed to display.
The card would need to be dynamic in order to not only include new information, but also reorganize and reformat to introduce custom displays based on the inventory or context.
Setting the Foundation
From these principles we explored models and frameworks. Ultimately re-aligning the information and then re-organizing lead to our solution, followed by many iterations on the right hierarchy and treatment of information.
Establishing the Framework
From our inventory audit, we were able to determine two types of cards as baselines. Most inventory fit into a provider and offer model, while the remaining inventory fit into a product and price model. These core elements were then used as anchors to append supporting information to.
Scaling the Container
From the shared anchor elements, we could start to scale the cards to integrate new supporting information. Stackable rows of content allowed the card containers to expand or contract when necessary. A consistent treatment of information types helped create a familiar language across cards even when the information was different. The container could also expand to include new actions, attachments or formats of information.
Adapting for Content and Contexts
From the insights we gathered, we knew card formats and detail would need to be dynamic between inventory types as well as contexts. Even with this variability however, the same design language could be shared across card sizes and formats ensuring familiarity.
As the card became more customized, we also had to consider the context in which it appeared. What other inventory would be evaluated by the user within the same page? Along with rules about how information was displayed, we started to establish rules around when information could be displayed. Within the same context, cards would need to be more consistent for evaluation. Across contexts contexts however, cards could be more dynamic to best serve the use case. For example, showing price point for a restaurant might be confusing when the user is evaluating a broader variety of inventory like on the homepage. But once the user searched or browsed to restaurants specifically, price point could be a consistent value to compare across cards within that same context.
This new framework for cards and inventory on Groupon is only the foundation for the future. The flexibility it introduced will facilitate much easier iteration to advance our understanding of how to showcase solutions to users' needs.
For the business, we introduced an easier way to customize inventory and iterate on the display. New information could be integrated and validated through experiments without conflicting with existing information in the card.
For the user, our initial introduction of the framework proved successful across mobile platforms.
For the design team, this framework was turned into a Sketch design library using Anima's auto-layout tool for easy customization.
As Groupon continues to grow in the diversity of offerings and customer needs we are solving, you'll see this more flexible framework expand and evolve to best represent that inventory and the contexts it appears in.