View Demo

Venus Library

The Venus Library is a component library / design system for Moody's economic and credit analysis products.  Venus is made up of several artifacts , design assets in figma and sketch, and component library written in Angular. 
Client
Moody's Analytics
Year
2019-2021

My Role

Product Designer

I was the lead designer and sole developer. On my team, I had a designer that helped structure the design assets. The product was built off previous deliverables that I shared with developers. I later  repackaged these code snippets into a shareable component library .

The Problem

1) Inconsistent design language

Developers would implement the same component in a different ways depending on the product.

Venus Sitemap

Chart options shown between two of our products

2) Poor implementation 

Our developers had such a short timeline to complete task that they sacrificed the user interface and put focus on the application's functionality.

Developers implementation of card

3) Low UX maturity

In 2017, when I started at Moodys , I was positioned inside the software engineering department. Being a team of one I had one key question to ask, what impact do my designs have on the overall organization . To succeed at this role I had to build a great relationship with the software development team and become my own ux evangelist . The Venus Library did just that, build trust with developers and show the business that UX can be used as a business strategy.

Research

Understanding Developers

Before working on Venus . I developed a high fidelity prototype for our company homepage. By coding up this prototype, I was able to assist the developers who were short on time. Not only did this build trust with the development team. I was also able to implement a layout that was almost pixel perfect to the product vision. In addition , this early work became the foundation for the venus library.

This process led me to question, why my visual designs constantly kept getting lost in translation. To understand our developers needs and constraints, I created a short survey. What I found was that the developers enjoyed working on styles but based on time constraints they had to focus solely on the functionally.

Planning

Designing for Scalability

Since the building blocks were already in place based on other products like S2 & Databuffet, parts of Economic View; it was easy to map out all of the components that fit the venus design system.

Venus Sitemap

Development

Reformat for reusability .

The developers and I learned a few lessons when building these components for the first time. One question that kept on getting asked by clients and project leads was, "how responsive is this layout ?" Even Though I had done the work to spec out a responsive layout for each project. The developers had no choice but to cut corners and only develop the desktop view. For the venus library implementation , I made sure to reformat a lot of the code for reusability and responsive UI purposes.

Venus Implementation

Outcome

Quotes from developers
 🔥🙀 This is awesome ! Let me know how I can help in the future.
- Junior Software Engineer  
Hello Chima, thanks for the Climate Risks new specifications, great design ! 🖌.  
- Software Engineering Manager