*** You will not see a Logo or Company Name here to ensure confidentiality. All logos and information have been replaced by generic text. The final deliverable had the appropriate written content and company branding. ***

CHALLENGE

A Stealth DNA company needed to take their idea to investors and build an MVP with a cohesive brand and UX/UI approach. The goal was to create a website product that is warm and friendly and less clinical looking than most Clinical Genetic sites. The website and images needed to meet guidelines for visual and hearing impairment as well as ensure the customer felt secure in the process of learning about their medical genetic information. There are two sections of the website, the public pages and the secure area where personal information and a genetic report is accessed. The process of ordering, collecting, and reporting on the customer DNA findings required the customer knows where they are in the process at all times. The secure parts of the website needed to feel different from the main areas, but work together cohesively with the entire visual theme.

ACTIONS

> Created brand narrative and design presentations of the website and brand for key stakeholders along with strategy for the website design and DNA report for investment proposals using XD, Illustrator, Photoshop and utilizing design tools such as MIRO for the UI/UX workflows and site flows.

> Communicated and followed the team’s protocols in JIRA and later inside Confluence Project Management System

> Developed and delivered a comprehensive website design and UX template in XD with a set of recommendations rooted in a clearly defined strategic priority for the design strategy.

> Reviewed and picked a design methodology workflow for

RESULTS

> A comprehensive StyleGuide and set of reusable components that work inside the NEVE WordPress theme design built inside Adobe XD.

> A Genetics medical website with a warm and friendly feeling and aimed towards a female audience.

> UI Design and UX site flows that met the requirements of the scientist and engineers.

The website map is done in MIRO with links to the real pages in Zeplin. It contains notes and tasks from JIRA for communicating with the engineers and team. As the pages are finalized and agreed in design, the image of that page replaces the original wireframe drawing for a living and collaborative work style.

KIT PROCESS PAGES

The customer journey dictated that once a kit was purchased the customer required a unique breadcrumb approach to ensure they were always informed and aware of where they are in the process.

Style Guide

MASTER COMPONENTS

The components are designed to work on the WordPress NEVE theme with alterations, custom backgrounds and breadcrumbs, and unique identifiers and illutrations using the brand color scheme.

PROCESS VIDEO

This video was the output to the team to show how quickly the components can be moved and adjusted to fit any concept they desired. Many videos were done to align the team on design processes and how they impact the workflow and output.