JAMIE FONG


Creating the
Marklogic
Design System



Marklogic



2020



my role





UX Designer



Timeline





1 year
(simultaneous with other projects)



the team





3 Designers
5 Developers



shipped





September 2020



Overview



MarkLogic did not have an existing design system and we needed one to create the product Data Hub Central. With a lean team and limited resources, we opted to modify an existing open source design system. I played a major part in selecting the base design system, customizing the components, selecting typography and colors, and designed custom icons to suit our needs. The design system was initially based off of Ant Design, but was later cut over to use Bootstrap components.



PROCESS



1. Color Palette and Fonts



I worked with my team to select colors and fonts based off the existing palette that marketing had. Colors were altered to have an accessible color contrast to meet AA level regulations.



2. Analyze Components



I analyzed components from Ant Design and other libraries and decided what modifications needed to be made to the stock components to meet the purposes of our product and users.



3. Propose Changes



I documented all the changes to components in the company wiki, with justifications for design decisions.



3. Build Library in Figma



I created each of the components in Figma and built a design library of reusable components, enabling my team to use them to create prototypes.



4. Detail Spec in Jira



I detailed the customization specifications in Jira tickets for the development team to implement all the components in Storybook.



5. Test and Approve



After a component was implemented, I conducted design review and tested all the knobs to make sure interactions followed the design specifications.



6. Add Design Documentation



After all the components were implemented in Storybook, I added usage guidelines and text guidelines in Markdown for each component and added them into Storybook using GitHub.



7. Cut Over to Bootstrap



I looked at existing Bootstrap components and identified modifications that would need to be made to ensure components had the same functionality as the Ant based components. I also participated in approving the new components after implementation.



Outcomes



Consistency across products



The design system provided not only standardized UI components, but also standardized content guidelines. This led to a significantly more consistent experience between products.



faster development + design



The reusuable component libraries, both in Figma and coded in Storybook enabled faster iteration and implementation of design.



Improved designer-developer communication



The standardized library enabled easier communication between design and development. Back-and-forth clarifications about design specs were significantly reduced.



Foundation for future product scaling



The design system created modular components that can be easily adapted for new product features or user needs. Since accessibility was considered from the beginning, future features will start from an accessible foundation.



BUTTONS



ICONS



We used open source icon libraries from FontAwesome, Ant Design, and Bootstrap.



CUSTOM ICONS



For the new product, Data Hub Central, new icons needed to be made to represent company specific concepts. I created custom icons using Adobe Illustrator and Icomoon to create an icon font.



Loaded data



The loaded data icon needed to present the ability to query on raw data that was loaded into the database. This data had not yet been curated yet and could be in any format.



Harmonized Data



The harmonized data icon needed to represent the ability to query on curated data. This data has been mapped to the entity model and is in a cleaner, more usable format.



Custom step



The custom step icon needed to represent a step which is written in code by the user. However, because the standard icon for code was already being used elsewhere in the application, we needed a differentiation between a custom step and code.