Design System for MSN Finance Website

Color Library | Font Library | Component Library | Bright & Dark Mode

🌟 Please note that all information in this case study, unless stated, is my own and does not necessarily reflect the views of Microsoft. And in order to comply with my non-disclosure agreement, I'll just show the process but not the final version.

The problem

The primary purpose of design systems is to increase efficiency in product development. In many companies, the platform without a design system will inevitably end up with a whole range of inconsistencies throughout the product. A design system not only helps keep things consistent but also allows updates to elements like colors and icons across multiple documents with a lot less hassle. To stop things in MSN Money Website from spiraling out of control a set of guidelines is required, a bridge between developers and fellow designers to make sure everyone is building towards the same end product.

My role

I collaborated with two designers on the Design System under my mentor, a senior designer’s guidance. I focused on creating the color, font, component libraries. (I created a color library includes 48 colors, a font library includes 11 kinds of fonts, and a component library includes 25 variants).

The process

Phase 1: start with atoms - color, font and icon

🎨 Color

  • The first thing we did was to group all the colors into 6 categories according to the latest design (both of bright mode and dark mode): Surface (Layer Background), Text, Button, Divider, Gradient, Data Visualization. With Figma, we defined a color library that includes bright mode and dark mode, which is available to everyone in the team. This helps to keep designers aligned and save time when there's some color that need to be changed. Should a designer want to add a new color they can add it to the team color library.

  • We made rectangles of the same size and change their colors accordingly. Click “Create style” and save these elements using the “Bright/Dark+Category+Status” labeling system. Bright/Button/Hover Selected, Dark/Layer/Label Rest, or Bright/Gradient/Trendline are examples of proper labels. Naming conventions are important in keeping a style guide organized, so a format for everything should be established and adhered to from the start.

  • We had a color contrast check for all the text colors and their background colors. We’ll give a revise when some places don’t meet the WCAG AAA.

✍🏻 Font

  • We defined 11 kinds of fonts and created a font library with a list of these fonts including font name, thickness, and size.

💟 Icon

  • The website of MSN Money doesn’t use a lot of icons. We found them from different pages and changed the thickness of these icons, making them look consistent. (The picture I showed below is the first version of icons without the change of thickness at that time.)

Phase 2: define some molecules - layout, navigation bar, label, button…

📄 Layout

  • After a conversation with the developer team, we defined the size and spacing of columns in the web page, then we had the main layout. The definition of columns is good for our later responsive design work according to the different device sizes. Changing the number of columns is the easiest way for developers to code on responsive website.

📎 Molecules list - navigation bar, label, button…

It's easy to give some change on colors and fonts since we have color library and font library now. If you change some colors or fonts in the library, all places using these styles will be changed automatically.

Phase 3: create organisms - stock card, data chart, news list…

According to the molecules we defined before, now we can create some organisms. In addition, designers should consider about different status of these cards, forms and charts. (Default, Hover, Selected…)

🎓 What I learned

  • Keep learning and refreshing. A design system is never done. It’s a living, breathing entity: there is always room for innovation and improvement.

  • Split a task into sub-tasks and consider the sequence before you start. In this project, we created the component library first since it’s easy to organize the exist content, then we started to create the color library. It cost us a lot of time later to change all colors in these components to the colors in the color library. If we choose the right sequence at first, much time can be saved.

  • Everyone benefits from accessibility. Accessible design improves access to information for individuals with and without disabilities. Well-designed, accessible web sites expedite the delivery of information and services. Microsoft is strict with the Accessible Text & Color Requirements, which makes people feel this is a warm company caring about users.