JAMIE FONG


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



Design system Evolution



MarkLogic did not have an existing design system and we needed one to create the product Data Hub Central. Due to limited resources, we decided to mofidy an existing open source design system. I played a major part in selecting the base design system and customizing components to suit our needs. The design system was 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.



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.