Design systems case study: messaging components [Part 1]

TL;DR

A senior designer shares insights on a messaging system project for Wealthsimple's unified app.

Transcript

hey friend in this video today we're going to walk through a case study of a project that I did earlier this year now I've been working at wealth simple as a senior product designer and during my time there I have been on the design platform team and that means that I've been able to contribute a little bit to Design Systems as well as some more pl... Read More

Key Insights

• 😀 The project aimed to unify disparate messaging systems used across multiple Wealthsimple apps by creating a consistent design language.
• 😥 User and business research identified significant pain points, aiding in creating targeted solutions for messaging improvements across platforms.
• 🎨 The development of design principles helped provide direction and coherence in decision-making, contributing to a user-centered design process.
• 😀 The unified design guidelines support a seamless integration of into the app's user experience, addressing both client and business needs.
• 😀 Four key messaging components were strategically selected to cover nearly all communication scenarios, enhancing the app's functionality.
• 😀 An audit revealed critical inconsistencies that, once corrected, significantly improved the app’s visual messaging layout.
• 😤 The introduction of a Playbook empowered teams across Wealthsimple to adopt the new messaging strategy effectively and consistently.

Questions & Answers

Q: What was the main goal of the unified messaging project?

The main goal of the unified messaging project was to create a cohesive messaging experience for Wealthsimple’s users as part of an initiative to bring multiple apps into a single platform. This involved standardizing the design and implementation of messaging components to ensure clarity and consistency across the app.

Q: How did user research influence the design process?

User research played a critical role in uncovering pain points and needs from clients and business perspectives. By identifying issues like intrusive alerts and the necessity for prioritizing critical information, the team was able to design components that directly addressed user frustrations and improved the overall user experience.

Q: Can you explain the importance of setting design principles for the project?

Setting design principles is essential as they guide decision-making throughout the design process. They ensure that all team members are aligned on key objectives, such as respecting client needs and prioritizing clear communication. These principles foster consistency and keep the project focused on delivering a thoughtful user experience.

Q: What were the four main messaging components developed for the app?

The four main components developed were banners for critical information; marketing cards for promotional messages; snack bars (toasts) for ephemeral feedback after user actions; and modals for significant feature announcements. Each component was designed with specific use cases, placement, and content guidelines to meet various messaging needs.

Q: How was team collaboration structured during the project?

Collaboration was structured around regular audits and discussions with internal teams to gather insights around their messaging needs. The design team worked closely with content partners and engineers, communicating throughout the design process and ensuring that all perspectives were considered in developing the unified messaging system.

Q: What impact did the new messaging playbook have internally?

The new messaging playbook became a highly recommended resource within Wealthsimple, providing detailed guidelines on component usage and best practices. It facilitated onboarding for teams adapting to the new messaging system and contributed to a more structured approach to messaging across the app.

Summary & Key Takeaways

• The video details a case study on messaging design within Wealthsimple's unified app, highlighting challenges and solutions related to messaging consistency across multiple platforms.

• The presenter explains the design audit process used to identify inconsistencies in the app’s messaging components and shares how user research informed their design decisions.

• Four main messaging components are introduced: banners, marketing cards, snack bars, and modals, with design principles and guidelines for effective implementation.