RBCx Mydoh Design System Refresh
I worked as a Product Designer on the Engagement pod to refresh Mydoh's Design System. Our focus was on auditing and consolidating all messaging components in the Mydoh mobile app. This refresh aimed to create a uniform look across team designs and in-app components, consequently improving the presentation of information to users and ensuring they don’t miss critical notifications.
Problem statement
After joining the Mydoh team and working redesign on outdated screens in the app, I discovered that our app had many different types of alerts and notification messaging styles. Designers were creating custom styles for notifications, leading to increased design debt and inconsistency, with no standardized guidelines for notification design.
Consequently,
This led to a lot of inconsistency across our app, making it challenging to maintain a cohesive design language.
Goal
To create a unified and user-friendly notification design system for the Mydoh app that consolidates diverse messaging styles into a cohesive framework. This system aims to eliminate design inconsistencies, reduce design debt, and establish clear guidelines for all team members, ensuring a consistent and intuitive notification experience for users. By developing a scalable and flexible design system, we aim to support both current needs and future growth, maintaining functionality and aesthetic appeal throughout the product's evolution.
The task
How might we
…consolidate our diverse notification messaging types and styles into a cohesive system, and establish a clear framework that all team members can follow while offering our users a clear, and intuitive notification experience?
The refresh
To address the inconsistency and design debt, I proposed three standardized notification message components that encompass all current use cases within the Mydoh app, with the flexibility to develop variants for future scenarios:
In-line Banner
Toasts
Promo Banners
By consolidating the different types into these three categories, we ensure clarity in terms of where, when, and how to use each notification style within the Mydoh app. This approach not only streamlines the design process but also enhances the user experience with scalability in mind.
Impact
Boilerplate component documentation
I developed a detailed style guide and guidelines on component usage, which includes comprehensive instructions on when to use each type of notification, where they should be placed, and how they should be implemented. This documentation serves as a foundational reference, ensuring consistency and clarity in the design process, and lays the groundwork for future component documentation.
Component request system
I proposed a structured request system that mandates all new component additions or creations to undergo a thorough review process before being introduced into the design system. This ensures that every new component aligns with our established design standards and guidelines, maintaining the integrity and consistency of the overall design system.
Unified Look & Improved Design Time
By leveraging the use of variants, the design process has become faster and more efficient. This approach minimizes the need for component redesign efforts, ensuring a unified look throughout the app while significantly reducing the time required for design iterations.
Design process
Identifying painpoints with the current messaging components and style
Though this was a design system refresh, I found it necessary to understand the use-case of a design system. I aimed to grasp its value to the business, our internal team, and Mydoh users. To achieve a comprehensive understanding, I categorized the business, internal design team, and users as personas. I then framed their respective pain points with the current messaging components using user need statements. This approach ensured that the refresh would address the specific needs and challenges faced by each group, ultimately enhancing the overall experience and effectiveness of the design system
Users: painpoints & needs
Business & team: painpoints & needs
Design principles & guidelines
Here are some guidelines I kept in mind in refreshing the messaging component and documentation guideline.
Quick wins: component reskinning &audit
Before starting out on the refresh of contextual messaging components, I collaborated with the senior product designer to create a comprehensive spreadsheet cataloging all the existing notification messaging components within the Mydoh app. This audit enabled us to systematically evaluate each component, guiding our decisions on which components to refresh. The criteria for assessment included:
What needs fixing: Identifying components with significant design inconsistencies or usability issues.
What needs to go: Determining components that are redundant or no longer align with the overall design vision.
Subtle enhancements; quick fixes: Highlighting components that require minor tweaks to improve functionality and visual coherence.
The focus was on a quick fix, without a complete redesign. For example if a message was purely informational and we didn’t want a user to miss it, what quick enhancement can we make to it which will be on par with an existing style we found suitable based on the context.
Quick fix
Here's an example of component that didn't require a total overhaul and the before and after. The focus here was on improving the understanding of the type of message notification being displayed to the user:
Contextual Labels:
Added clear, contextual labels to distinguish between different types of notifications (e.g., "Info", "Warning", "Success").
Ensured labels are prominently displayed and easy to read at a glance.
Color Coding:
Implemented a color-coding system for different notification types to provide immediate visual cues (e.g., blue for informational messages, yellow for warnings, green for success messages).
Used color contrast to make these notifications stand out without being intrusive.
Iconography:
Introduced relevant icons next to notification messages to quickly convey the nature of the alert.
Ensured icons are universally recognizable and aligned with the message context.
Typography Enhancements:
Applied consistent typography standards for notification text, including font size, weight, and spacing.
Used bold text for critical information and standard text for additional details.
Spacing and Layout:
Improved spacing and layout to enhance readability and prevent overcrowding of text.
Ensured adequate padding and margins around notification messages for a clean and organized look.
A streamlined look: component consolidation
Final delivery and new component presentation to the team
After speaking to design team members and consolidating all of the messaging styles and components the team have previously used and ones existing in the current Mydoh app, I presented three messaging component types for use, to the team. These three components ensure clarity, consistency, and scalability.
The three messaging component types are:
In-line Banner: Displayed within the content flow of the app, ideal for non-intrusive notifications that need to be seen in context with the user's current activity.
Toasts: Brief, auto-dismissable messages that appear at the bottom of the screen, suitable for quick notifications such as success messages or minor alerts.
Promo Banners: Eye-catching notifications for promotional content or significant updates, typically placed at the top of the screen or in dedicated promotional spaces within the app.
Guideline: how-to, when-to, where-to
To help the team better understand the use-cases of the three component types, I developed a boilerplate component documentation guideline that includes: usage, style, specifications and accessibility. The goal was to help the team have a template documentation we can all use to build and document the usage of the various components in the design system.
During the presentation, I framed the usage of each component proposed in the form of "user stories". This was to ensure the team understands when, how and when to use each type even without referencing the documentation.
Component: In-line banner
As a user, I want to receive information and status updates to ensure I am informed of any issues or confirmations that require my attention.
Placement: Fixed at the top of a screen or adjacent to the related item.
Surface: Universal – applicable across various screens where user actions take place.
Content guidelines: Should convey the message concisely, typically in one sentence. Use clear and actionable language, and include links if further action is required by the user.
Purpose: Persistent Banners provide immediate, non-disruptive feedback on the completion or status of an action. They remain visible until the issue is resolved or the status is updated.
Interaction: Non-dismissible, requiring user action for resolution. May include links for users to take necessary steps.
Persistence: Remains on screen until the relevant message is resolved or the action is completed.
Accessibility: Ensure text contrasts sharply with the black background for readability and adheres to accessibility standards.
Measured via: User engagement with the banner's links and resolution rate of the issues highlighted by the banner.
Component: Toasts
As a user, I want to receive immediate confirmation or feedback on my actions so that I know the status of my tasks without interrupting my flow.
Placement: Appears at the top of the screen.
Surface: Universal – can be triggered on various screens following user actions.
Content guidelines: Brief messages delivering confirmation or feedback related to recent user actions. Limited to two lines of text without any header.
Purpose: Persistent Banners provide immediate, non-disruptive feedback on the completion or status of an action. They remain visible until the issue is resolved or the status is updated.
Interaction: Non-modal and time-limited, appearing temporarily before automatically disappearing after a few seconds.
Visibility Duration: Typically 5 seconds to ensure the user has enough time to read the message without having to manually dismiss it.
Accessibility: Ensures high contrast text for readability and compliance with accessibility standards.
Measured via: User acknowledgment rate (if actionable) and non-interaction rate, to ensure messages are noticed but not disruptive.
Component: Promo banners
As a user, I want to be aware of new or existing features that could enhance my experience or provide additional value to my use of the platform.
Placement: Strategically positioned to be relevant to the content it's promoting, without obstructing user workflow.
Surface: Selective – displayed within contextually relevant areas of the platform where the promotion is most likely to be of interest to the user.
Content guidelines: Brief messages delivering confirmation or feedback related to recent user actions. Limited to two lines of text without any header.
Purpose: Promo banenrs are designed to attract user attention and interest towards new or underused features that could benefit the user.
Interaction: May include a call-to-action link or button guiding users to learn more or engage with the feature.
Persistence: Remains visible until the user interacts with it or navigates away from the related content.
Accessibility: Adheres to accessibility standards for visibility and interaction, with clear and concise language.
Measured via: Engagement rates with the promotional content, including click-through and conversion rates to assess the effectiveness of the banner.
Handoff
I shared the documentation guideline made in Figma with the team and also the developers to help in aligning the naming convention and token styles.
Leveraging Figma's variants, each component state can be easily switched between without need of a redesign or detaching parent component.
Other projects
Conversational AI Banking Chatbot
Designed and successfully launched an AI Banking chatbot for banking companies in Nigeira, reducing customer resolution rate by 40% and driving customer engagement.
XCel Payment App Redesign
Redesigned the XCel mobile app to drive user retention and enhance the user experience, enabling individuals and businesses make international financial transactions across 5 countries.