Illumina - Web Design, designing user-centered interfaces to expand the reach of life saving genomic research information.

Maintaining cross-browser compatibility for all new and existing content. Upholding the integrity of the design-system to maintain a brand consistent experience across more than 1500 pages.

Illumina microbiology pages designed to highlight public health surveillance opportunites.

Design Tools

AEM

Adobe Experience Manager is a comprehensive content management solution for building websites, mobile apps, and forms.

Figma

Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with big differences that make Figma better for team collaboration.

ContentSquare

ContentSquare monitors touch and mouse movements on websites and apps to understand how these services are used.

Design process

With the right tools we can determine our greatest opportunites to enhance the user experience. Once our objective has been clearly determined we develop a planning document that will outline the page strategy, SEO, target audience, goal, KPIs, backlinking and supporting pages. This document is then translated into our design system components and the information architecture is applied to form a visual composition of the page in Figma. This high fidelity prototype is able to parallel what will be produced for web.


Content strategy

This process begins with an assessment of the current content assets and the audience we are intending to reach. Followed by research to understand the target audience's preferences, pain points, and interests. The plan then identifies gaps in the existing content and outlines how new content can be created to address these gaps.

Design

Once the plan is approved, we create a detailed and interactive representation of the webpage that closely mimics the final design and functionality for stakeholder review. This process involves various reviews, approvals, and close communication between content creation and web design. It is at this point that a round of feedback is used to refine the design and improve the UX/UI of the product.

Develop

With the stakehlolder approved design and figma file as my guide, I begin to create the webpage(s). Here the assets are prepared in Photoshop for scale, ratio and compression. Once all content and data tracking formatting is completed, the final stage begins.

Deploy

Each page undergoes a three step QC process to verify the webpage(s) meets the quality standards. Renders across all supported browsers and devices and meets the UI and UX objectives outlined in the plan.

Go Back