Mumzworld

Is to empower, deliver, and delight mothers. And that’s the purpose of creating a design system. This project was the culmination of different things I had learned from how a team operates, down to the most miniature pattern — should be optimized toward that purpose. As we’re moving towards immigrating a new full-stack platform, I have been assigned by my tech manager to quickly access and utilize what we have and work towards a single design system library to be used for all our future projects.

This system should close the gap between designers, UI engineers, and developers who work on multiple products and often re-create or duplicate work done by other teams. The design team repeatedly used different design elements, reinvented the wheel, and risked unintended inconsistency. There is more strain on design resources and less focus on larger, more complex problems — a Lake of visual consistency across products and channels.

For this exercise, the focus is on the important stuff; finding and purchasing products:

Mapping out our customers’ needs, goals, and motivations. There’s usually a clear understanding of the behaviors we want to enable in our users: explore what we’re offering, add products to the bag, and seamless communication after purchase. And this is where our goal became clear.

Working on this will help see how our patterns fit into a bigger picture and strengthen the connection between user behaviors and how to encourage those behaviors.

We started by auditing and printing out many of our old and new designs. Laying the flows side by side on a board, we could see where and how the experiences were breaking and where we needed to make changes. I worked with the most critical components that need to be documented to help devs and the more frequent components used across Mumzworld web and app.

Here as a designer, you have a story. You understand the inventory of all the products, know what you need to build, and know the requirements. Use this scope as a checklist to remind yourselves on “how” each element should work. Creating the scope was collaborative with the product owners, developers, and designers.

Different disciplines use names defined in the design system to communicate about tokens, components, and similar. Hence, words must be modular, meaningful, and pronounceable.

Spacings are underestimated, scorned, or ignored. Blank spaces don’t always receive good press! Even so, it’s an integral part of designing and delivering information.

On a page, blank spaces strengthen readability, help prioritize your content and even play a role in your brand positioning. As we saw before, everything is related to this famous cognitive load, and the presence of blank or empty spaces helps us remain focused on precise information.

So keep these words from Jan Tschichold in mind (German typographer and designer), “blank space should be considered as an active item, not a passive background.”

A design system allows you to better standardize the interactive elements and states in your product. Interactions are a delightful addition:

Example above  of the interactions and it’s context-rich animation that have a purpose and real meaning. Sometimes this secondary animation (upselling sliders) might fail to load, so how would we base design considering the possible causes?

Note the first state(1st interaction) where the success model loads with the continues buttons and without the upselling sliders. This prevents the entire modal from delay sliding up.

With interactions you don’t have to explain the cases of each component. You can simply link all variants together and play a frame to explore the relationship of each component set.

Accessibility in design serves an estimated 15% of people worldwide.

By adhering our design patterns to the Web Content Accessibility Guidelines, accessibility issues are less likely to appear in the user experience. For this, we took inspiration from eBay MIND Patterns which features guidelines on building accessible components for ecommerce websites.

For our audience of moms, we knew that 95% of users browse and shop from their phones. And they’re often shopping at 9 or 10pm at night when their babies and children are asleep, and the brightness on their phone is reduced all the way down. For this reason, accessibility features like high color contrast can also benefit mothers in real-world situations.

A design system also helped us build localization by planning how to cater to international users from the very beginning, long before localization begins. We used internationalization best practices to ensure a genuinely cross-cultural experience, and we had part of our workflow. The UX writer ensured we had a consistent voice in each language with high-quality translations. We agreed to build localizations into every team's workflow and all-new features we had translated at release.

Our site has eCommerce stores in two countries (perhaps more in future), each with different vendors, prices, and delivery promises (e.g., free shipping or same day delivery). Component states — such as delivery promises at checkout, or location-based recommendations — must change based on which country users are shopping from.

A design system helps codify this knowledge, and share it across organizations.

A design system also provides a shared language that teams can use to speak about their company’s products. This can include naming conventions that streamline ideation, decision making, and even customer feedback. Intercom’s glossary is a great example of a shared language that’s well documented for teams and customers to reference freely.