Responsibilities
Conceptualization, user research, define HMW problem statements, high fidelity mockups, HTML static prototypes.
Photoshop, Visual Studio Code, Jira, Confluence.
HTML, CSS, Javascript, User Interface, User Experience, Agile.
Update and enhance the current pattern library with new components.
How might we transform our pattern library into a unified design system that enhances design efficiency, consistency, and user experience across our product suite?
How might we identify the most beneficial direction for our pattern library reconstruction, deciding between maintaining the existing UI or exploring fresh possibilities?
How might we determine the essential elements of content and information for our pattern library, in comparison to one that merely includes components and brief explanations?
How might we structure and organize large amounts of information in a way that is easily comprehensible and accessible for our users?
A design system is a cohesive, organized set of guidelines for design, ensuring consistency across an organization's products. It includes a style guide, a library of reusable components, usage guidelines, and often includes design principles, coding standards, and content strategies. It promotes consistency, efficiency, and collaboration in design efforts.
Before I joined the company, the team used a pattern library that had UI components all on one page without any explanation. Roughly around a year of working there, I tasked myself to see how I could revamp the pattern library. Do I just keep updating UI compontents? Do I even bother to organize them or leave them as is? After doing some research and defining some clear HWM problem statements, I decided that it would be best to change the pattern library into a design system.
Using new UI elements that my colleague and I had previously created on Member Portal (the authenticated segment which we primarily worked on and all BCBSM members log in), I created a new design system with categories. The purpose of this was to make it much easier and faster to find what you're looking for. There was a previous application I had worked on which had these category segments below the header in place. I then decided to use that categorized pattern to section off all of the different components in order to create a more seamless experience.
Another aspect that I worked on was to add descriptions for every component on the page. If a non-designer uses it as a reference, they can gain a clear understanding of the component. It's also a design bible where I have specific rulesets for each scenario. Our decisions are tied to it and back our design reasoning if the business team asks for any explanations. On top of our design principles and user testing data, this was another component that we could use as designers to validate our decision making.
For every component, I added a minimum of what the component is, where is it located on a page when used, and when I use it. Other components required a few extra details, but the MVP of every component has these 3 basic requirements.
I've used this design system for onboarding designers and an entire consulting agency that was hired by BCBSM to work on a particular project for the year.
I decided to create a design system that replaced our old pattern library a year into the company. It provides a more comprehensive framework than a pattern library. This holistic approach ensures consistency across different parts of a project, enhancing usability, while also improving efficiency in design and development by providing a 'single source of truth'. Moreover, the inclusion of principles and standards within a design system can foster better communication and collaboration across different roles within a team, leading to a more unified and seamless product experience.
Implementing a categorization approach in our design system significantly enhanced its navigability and comprehensibility. By supplementing each tool or component with associated rulesets and relevant details, I ensured a robust understanding of its various aspects - including its purpose, usage context, and related elements. This approach rendered our design system a reliable reference for any team member, irrespective of their familiarity with the specific component in question.
