[et_pb_section fb_built=”1″ _builder_version=”4.4.8″][et_pb_row _builder_version=”4.4.8″][et_pb_column type=”4_4″ _builder_version=”4.4.8″][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/webpay.gif” title_text=”webpay” _builder_version=”4.4.8″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.0.3″][et_pb_column type=”3_5″ _builder_version=”4.0.3″][et_pb_text _builder_version=”4.6.6″]
Myriad Genetics – Webpay Portal
My Role — Product Design, UI/UX, Visual Design
[/et_pb_text][et_pb_text _builder_version=”4.0.3″]
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 across 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.
Leveraging our design system Primase we were able to simplify our payment portal for our front facing users visually while also streamlining development on the backend. This feature release supports multiple business units all on the same framework and utilizing the same components while still keeping each brands supporting graphics for visual queues differentiating the different business units.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.0.3″][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.4.8″ background_color=”rgba(0,0,0,0.05)” width=”100%” max_width=”100%” custom_margin=”|0px||0px|false|true” custom_padding=”25px||||false|true”][et_pb_row column_structure=”1_3,1_3,1_3″ _builder_version=”4.4.8″ max_width_last_edited=”off|phone”][et_pb_column type=”1_3″ _builder_version=”4.4.8″][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/myriad-motif-1.png” title_text=”myriad-motif” _builder_version=”4.6.6″ border_width_all=”25px” border_color_all=”#0C71C3″][/et_pb_image][et_pb_text _builder_version=”4.4.8″]
Myriad motif
[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.4.8″][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/genesight-motif.png” title_text=”genesight-motif” _builder_version=”4.6.6″ border_width_all=”25px” border_color_all=”rgba(110,196,84,0.81)”][/et_pb_image][et_pb_text _builder_version=”4.4.8″]
Genesight motif
[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.4.8″][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/crescendo-motif.png” title_text=”crescendo-motif” _builder_version=”4.6.6″ border_width_all=”25px” border_color_all=”#E09900″][/et_pb_image][et_pb_text _builder_version=”4.4.8″]
Crescendo Motif
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.0.3″][et_pb_column type=”3_5″ _builder_version=”4.0.3″][et_pb_text _builder_version=”4.6.6″ custom_margin=”||15px||false|false”]
Business unit motifs
[/et_pb_text][et_pb_text _builder_version=”4.4.8″]
Each motif differentiates and represents a particular business unit. The Myriad motif circles reflect the deconstructed helix from the myriad logo, the GeneSight motif uses the brands nucleotides and Crescendo brand follows the dynamic triangular shapes.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.0.3″][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.4.8″][et_pb_row column_structure=”1_5,3_5,1_5″ _builder_version=”4.4.8″ custom_margin=”50px||||false|true”][et_pb_column type=”1_5″ _builder_version=”4.4.8″][/et_pb_column][et_pb_column type=”3_5″ _builder_version=”4.4.8″][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/webpay-pages.gif” title_text=”webpay-pages” _builder_version=”4.6.6″ background_color=”rgba(0,0,0,0.05)” custom_padding=”50px|50px|50px|50px|false|false” hover_enabled=”0″ border_radii=”on|2px|2px|2px|2px” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” sticky_enabled=”0″][/et_pb_image][/et_pb_column][et_pb_column type=”1_5″ _builder_version=”4.4.8″][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.6.6″ _module_preset=”default” background_color=”rgba(0,0,0,0.03)” hover_enabled=”0″ custom_margin=”|0px||0px|false|true” sticky_enabled=”0″][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.6.6″ custom_padding=”80px||||false|true”][et_pb_column type=”3_5″ _builder_version=”4.0.3″][et_pb_text _builder_version=”4.6.6″ custom_margin=”||15px||false|false”]
Before and after comparisons
[/et_pb_text][et_pb_text _builder_version=”4.4.8″]
Designed to be mobile first and mobile friendly we removed unnecessary clutter. The image used previously did not relate to making payment and overall just added confusion and served no purpose. All information has went through user testing to assure the most valuable information is being displayed. The new version allows a much more streamlined approach and re-skinnable across multiple business units.
[/et_pb_text][/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.0.3″][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_column type=”1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
Before
Financial assistance page
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/webpay.myriad.com_home-scaled.jpg” title_text=”webpay.myriad.com_home” _builder_version=”4.6.6″ _module_preset=”default” custom_padding=”50px|50px|50px|50px|false|false” border_radii=”on|2px|2px|2px|2px” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” border_color_all=”rgba(0,0,0,0.15)” background_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
After
Financial assistance page
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/FAP_myriad-financial-scaled.jpg” title_text=”FAP_myriad-financial” _builder_version=”4.6.6″ _module_preset=”default” custom_padding=”50px|50px|50px|50px|false|false” border_radii=”on|2px|2px|2px|2px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” background_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_column type=”1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
Before
FAQ page
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/webpay.myriad.com_help-scaled.jpg” title_text=”webpay.myriad.com_help” _builder_version=”4.6.6″ _module_preset=”default” custom_padding=”50px|50px|50px|50px|false|false” border_radii=”on|2px|2px|2px|2px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” border_radii__hover_enabled=”on|desktop” sticky_enabled=”0″ background_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
After
FAQ page
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/faq_myriad-scaled.jpg” title_text=”faq_myriad” _builder_version=”4.6.6″ _module_preset=”default” background_color=”rgba(0,0,0,0.05)” custom_padding=”50px|50px|50px|50px|false|false” hover_enabled=”0″ border_radii=”on|2px|2px|2px|2px” border_color_all=”rgba(0,0,0,0.15)” box_shadow_style=”preset1″ box_shadow_color=”rgba(0,0,0,0.15)” sticky_enabled=”0″][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_column type=”1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
Before
Contact us page
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/webpay.myriad.com_contact-scaled.jpg” title_text=”webpay.myriad.com_contact” _builder_version=”4.6.6″ _module_preset=”default” custom_padding=”50px|50px|50px|50px|false|false” 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)” background_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_text _builder_version=”4.6.6″ _module_preset=”default”]
After
Contact us page
[/et_pb_text][et_pb_image src=”https://chrismlyle.com/wp-content/uploads/2020/10/contact_myriad-scaled.jpg” title_text=”contact_myriad” _builder_version=”4.6.6″ _module_preset=”default” custom_padding=”50px|50px|50px|50px|false|false” 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)” background_color=”rgba(0,0,0,0.05)”][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.6.6″ _module_preset=”default”][et_pb_row _builder_version=”4.0.3″ global_module=”693″ saved_tabs=”all”][et_pb_column type=”4_4″ _builder_version=”4.0.3″][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.6.6″ 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” 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”][/et_pb_post_nav][et_pb_text _builder_version=”4.0.5″ 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” 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”]
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]