[et_pb_section fb_built=”1″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2021/05/Myriad-Design-System-Cover.gif” title_text=”Myriad-Design-System-Cover” _builder_version=”4.16″ border_color_all=”#f8f8f8″ global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ custom_margin=”||15px||false|false” global_colors_info=”{}”]
Myriad Genetics – Design System
My Role — Product Design, UI/UX, Visual Design
[/et_pb_text][et_pb_text _builder_version=”4.16″ custom_padding=”||0px|||” inline_fonts=”ABeeZee” global_colors_info=”{}”]
Myriad is a leading molecular diagnostic company dedicated to saving and improving lives by discovering and delivering tests across major diseases. My role is the visual product designer on the product experience team. I support all focus areas including the patient and provider portals for women’s health and oncology and neurology teams. My primary focus is delivering/managing and building out the design system Primase.
We created Primase to optimize our combined workflow through documentation.
Through it, our aim is to streamline the design and development process, and free up time to prioritize user research, testing, and deeper, more conceptual design practice.
By reducing decision-making friction, we free up our time as a whole, enabling us to focus on the big picture while increasing quality and consistency across the board.
Primase Design System Documentation (WIP)
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ global_colors_info=”{}”][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”]
Component examples
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ header_2_font_size=”24px” custom_margin=”||30px|||” global_colors_info=”{}”]
Desktop auto layout buttons
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/Medium-Buttons.png” title_text=”Medium-Buttons” _builder_version=”4.19.0″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” hover_enabled=”0″ border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}” sticky_enabled=”0″][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ header_2_font_size=”24px” custom_margin=”||30px|||” global_colors_info=”{}”]
Mobile buttons
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/Buttons-Mobile-3.png” title_text=”Buttons-Mobile” _builder_version=”4.16″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ header_2_font_size=”24px” custom_margin=”||30px|||” global_colors_info=”{}”]
Checkboxes
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/Checkboxes.png” title_text=”Checkboxes” _builder_version=”4.19.0″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” hover_enabled=”0″ border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}” sticky_enabled=”0″][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ header_2_font_size=”24px” custom_margin=”||30px|||” global_colors_info=”{}”]
Radio buttons
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/raido-buttons.png” title_text=”raido-buttons” _builder_version=”4.16″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ header_2_font_size=”24px” custom_margin=”||30px|||” global_colors_info=”{}”]
Modals
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/Modals.png” title_text=”Modals” _builder_version=”4.19.0″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” hover_enabled=”0″ border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}” sticky_enabled=”0″][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ header_2_font_size=”24px” custom_margin=”||30px|||” global_colors_info=”{}”]
Notifcations
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/notifcations.png” title_text=”notifcations” _builder_version=”4.16″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}”][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ custom_margin=”||30px|||” global_colors_info=”{}”]
Dropdowns
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/dropdowns.png” title_text=”dropdowns” _builder_version=”4.16″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” border_radii=”on|4px|4px|4px|4px” border_width_all=”1px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.16″ _module_preset=”default” background_color=”rgba(0,0,0,0.03)” custom_margin=”|0px||0px|false|true” global_colors_info=”{}”][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ global_colors_info=”{}”][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ global_colors_info=”{}”][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_column type=”3_5″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_text _builder_version=”4.16″ custom_margin=”||30px|||” global_colors_info=”{}”]
Masters components
All components were designed utilizing a master component. The nested master component controls the size and position of each component. This allows greater flexibility to make large scale changes to size and position elements.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.16″ global_colors_info=”{}”][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/masters.png” title_text=”masters” _builder_version=”4.16″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”25px|25px|25px|25px|true|true” border_radii=”on|4px|4px|4px|4px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” global_colors_info=”{}”][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.0.3″ global_module=”693″ saved_tabs=”all” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ global_colors_info=”{}”][et_pb_post_nav show_prev=”off” show_next=”off” next_text_tablet=”” next_text_phone=”” next_text_last_edited=”on|tablet” _builder_version=”4.16″ title_text_color=”#3a3a3a” title_font_size=”24px” title_text_color_last_edited=”off|desktop” title_font_size_tablet=”” title_font_size_phone=”16px” title_font_size_last_edited=”on|desktop” global_colors_info=”{}” next_text__hover_enabled=”off|desktop” title_text_color__hover_enabled=”on|hover” title_text_color__hover=”#0274be” title_font_size__hover_enabled=”on|desktop” title_font_size__hover=”24px”][/et_pb_post_nav][et_pb_text _builder_version=”4.16″ text_font=”Elegant Icons||||||||” text_text_color=”#000000″ text_font_size=”40px” link_text_color=”#3a3a3a” text_font_tablet=”” text_font_phone=”” text_font_last_edited=”on|desktop” global_colors_info=”{}” text_text_color__hover_enabled=”on|desktop” link_text_color__hover_enabled=”on|desktop” link_text_color__hover=”#0274be” link_font_size__hover_enabled=”on|desktop” text_text_color__hover=”#000000″]
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]