Unifying EVERFI's Card Components

DESIGN SYSTEMS • DESIGN THINKING • INFORMATION ARCHITECTURE • DESIGN STRATEGY

My Role
Design Lead

COMPANY
EVERFI

TIME FRAME
February 2024 - August 2024

COLLABORATORS
Design Collaborators: Bob Weisbecker, Alyssa Kjar
Engineering: Eric Shank, Gwen Latasa, Anushree Patil
Product Management: Anu Burns, Marianne Epstein

Outcome

The outcome of this project was a standardized card component that unified the visual experience, improved user interaction, and streamlined the design process by establishing clear standards and best practices across EVERFI’s products. 

Background

Everfi is a leading ed-tech company that delivers critical skills education through SaaS solutions across various sectors including K-12, elective learning, financial education and workplace training. EVERFI has grown over the years and as new products have emerged, some inconsistency also emerged. These inconsistencies led to a fragmented user experience  across design components, in particular our card components.

The Challenge

Create a responsive and versatile card component that can be used across all the EVERFI applications, unifying the user experience and improving their usability. The component needs to accommodate different content types, metadata and use cases while being scalable and accessible.

Problems to Solve

  • Inconsistent Card Designs: There are multiple versions of card components with differing styles, sizes, and interactions across the platform and this is causing confusion.

  • User Difficulty: Users have trouble finding the right information on the cards due to having to relearn card structures in different parts of the platform.

  • Lack of Standards: There are not defined best practices and guidelines for the card component usage.

  • Maintenance Challenges: Its difficulty to design new experiences across the platform due to lack of standardization.

Solution

Aligning around an intentional design language. We aimed to create a unified card component design and establish best practices to create a cohesive visual experience across EVERFI's platform and products.

Guiding Principles

  • Consistency: Ensure that all cards feel like a family and that they behave predictably.

  • Accessibility: Align with current WCAG 2.0 standards.

  • Flexibility: Support various sizes and data scenarios across EVERFI’s different products.

  • Scalability: Design with future growth in mind to accommodate new metadata types.

  • Collaboration: Involve cross-functional teams to gather insights and needs.

Discover & Define

Our first step was to completely understand the landscape of our existing card component. This led to a targeted audit to catalog and capture visual reference where the component was being used, how, what type of information was being displayed and the variants needed to accommodate each product’s needs. Using Figma, we were able to create a repository where we could all collaborate and reference back to when needed.

Product card component audit

As part of our working session we took a look at what the industry standards were when it came to card components, what were the standards and best practices and how to successfully communicate the desired messaging and metadata. We explored different arrangements of metadata, use of tags versus badges, and visual elements like image ratios and card orientations.

Early Exploration

After cataloging our findings we moved into the ideation phase. Once again we used Figma and FigJam. We held collaborative workshops where we could brainstorm, ideate, and challenge the different ideas.

Card metadata audit

We dove deep discussions about metadata arrangement. First, we established  a common language for what we meant by tags and badges, when to use them, and how best to establish a clear information hierarchy. We also explored visual elements like image ratios and card orientations, considering how these choices would impact user engagement. These early explorations were iterative, with each session building upon the insights of the last.

Early explorations - Details.png
Elective Learning.png
K12 Learner.png
K12 Teacher.png
Platform Course Card.png

Design & Iterate

For the proof of concept we developed several card variants, standardizing different sizes (narrow, medium, and wide). Each variant comes with predefined metadata configurations that can potentially be used on each of the specific use cases. This approach allowed us to maintain consistency while providing flexibility to address the different needs of our products.

Once we had the different card layout choices we started to mock up screens and individual cards that we collected in our initial audit, seeing the components in action across different contexts provided invaluable insights.

Early vs. Final Card Iteration

During this process, we established responsive design principles to make sure that our cards would display effectively across various devices and screen sizes. We also defined clear rules for primary, secondary, and tertiary metadata to enhance readability and to help users prioritize information naturally. This really helped me work towards my  goal of our users having a cohesive and unified interface experience.

Card specifications and metadata description

Card layouts and variants

A final key objective was to ensure the new card component was implemented consistently across our platform and products. We set out to create a specification in Storybook.js as a single source of truth that can be referenced. I also documented the visual design, metadata hierarchy, variants/orientation options, special rules and edge cases specifications.

After Elective Learning Pathway-1.png
After Elective Learning Platform.png
After Elective Learning Hub.png
After Elective Learning Pathway.png
After Elective Learner.png
After K-12 Teacher.png
After Assigned Learning Pathway.png
After Elective Student.png
After Elective Admin.png

Key Results

  • Improved User Experience: Users reported finding information more quickly and being able to navigate the platform with much more ease. The new information architecture of card metadata reduced the cognitive load, allowing users to focus on their goals rather than relearning  new interfaces.

  • Positive Feedback: Initial testing showed a positive increase in task completion rates and overall satisfaction. Users know the intuitive design and clarity of information.

  • Design Efficiency: Standardizing the card component reduced design efforts. Designers can now use the new component and not fall into a previous of redesigning the card element on screen to fit the new need. This allows the to focus their creativity on enhancing other aspects of the user experience.

  • Enhanced Collaboration: This project fostered stronger alignment between design, development, and content teams and opened up communication channels to address similar issues in the future

  • Scalability Achieved: With the new changes the card component is adaptable for future needs,  has backwards compatibility and can be integrated to new products seamlessly.

Summary

This initiative became more than just a design update; it was also a strategic overhaul that addressed fundamental issues within our platforms and continues the efforts that our Unified Design Library set forth of  having a cohesive and unified interface experience. With the new card components enhancements, we are bridging the gaps between products, simplifying the user interactions, and strengthening our brand identity. By applying systems thinking and involving cross-functional teams, we created a scalable and accessible card component that not only meets current needs but is also poised to adapt to future requirements.

Lessons Learned

  • Value of Routine Evaluations: Regular audits of design components can help uncover underlying issues that can grow into significant problems.

  • Importance of Collaboration: Engaging with the cross-functional teams that have a stake in how the component is used is key to build in the right features in the creation of new components or future enhancements.

  • Documentation is Key: Maintaining detailed documentation aids in consistency and provides a reference for future projects.

  • Holistic Problem-Solving: Focusing on the underlying issues rather than surface-level symptoms can lead to more effective and sustainable solutions.

  • Continuous Improvement: Adopting a proactive approach to design allows for ongoing enhancements and keeps the user experience at the forefront.