skip to Main Content

T. Consultant Work  A. Doug  I. Cloud Security

Product UI Update

Goal
Update the product UI so that it was inline with the brand and improve overall look and feel

Outcome

  • Improved content hierarchy by varying text sizes and increasing size of text everywhere
  • Created a color palette that was fresh but still inline with the brand
  • Defined and created design patterns around buttons, heads, and tables
  • Added color to table backgrounds to improve identifying content when scanning pages
  • Suggested using max-width settings to prevent long single lines of text which are hard to read from occurring
  • Added alternating background colors to rows to distinguish them and improve legibility

My Role

UI design · art direction · hierarchy improvement

Original

[cq_vc_hotspot image=”516″ position=”34.28792569659443%|27.520837808807734%,56.36130030959752%|4.848614393125671%,45%|60%,75%|20%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][hotspotitem] Updated: Organized navigation into columns by color. Updated color palette to be “fresh” but still inline with the brand.
[/hotspotitem] [hotspotitem] Updated: Sidebar background color updated to match new palette. Icon color made light blue and sidebar text updated to white to pop. Type across the whole app was increased in size to varying degrees to improve legibility, readability, and hierarchy.
[/hotspotitem][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”518″ position=”6.200546762589928%|36.121556886227545%,17.079568345323743%|23.911576846307383%,19.280575539568346%|86.68283433133732%,48.63309352517985%|81.89241516966068%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][hotspotitem] Updated: All headers have similar look and feel as the buttons on the start page.
[/hotspotitem] [hotspotitem] Updated: All buttons revised and simplified to create a more unified experience.
[/hotspotitem] [hotspotitem] Updated: Added color to table backgrounds to improve identifying content when scanning pages.
[/hotspotitem] [hotspotitem] Updated: Text with background color changed to all caps to improve legibility.
[/hotspotitem][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”520″ position=”29.509928057553957%|53.59590818363274%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][hotspotitem] Updated: Table head backgrounds updated to a light blue with table rows alternating background colors to improve hierarchy and prevent “banding.” Added padding to top and bottom of rows to make a little airier, while spacing out columns. Suggested using max-width settings to prevent long empty spaces within rows.
[/hotspotitem][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”522″ position=”25.768920863309354%|61.096606786427145%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][hotspotitem] Updated: Updated table headers to light blue to bring into alignment with new palette. Header size increased at top of modal window to improve hierarchy. Alternate row banding applied.
[/hotspotitem][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”513″ position=”25.768920863309354%|61.096606786427145%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”511″ position=”21.16460431654676%|88.25938123752496%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][hotspotitem] These two rows are related to each other, so I updated banding to better indicate that was the case.
[/hotspotitem][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”524″ position=”17.423597122302155%|43.97295409181636%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][hotspotitem] Created two columns to improve use of space.
[/hotspotitem][/cq_vc_hotspot]

Final

Original

[cq_vc_hotspot image=”509″ position=”17.423597122302155%|43.97295409181636%,” iconbackground=”#6fd1ea” circlecolor=”#ffffff” tooltipstyle=”noir” tooltipanimation=”fade”][/cq_vc_hotspot]

Final

Back To Top