User Interface Design for DNAsimple

About This Project

This project Was created in my role as Creative Director at DNAsimple when I came aboard there wasn’t real cohesion in the User Interface, branding, or the design in any way and this represents the first steps in attempting to create that. The project has not yet currently finished development but has been designed and wireframed.

User Dashboard

The goal involving this project was to redesign our User Interface ffor our DNA research study connection service/web app. Our initial design kept much more of dated website feel with inconsistent headings font sizes and in general clunky. I wanted to move in a more web app direction in the layout and navigation of the site once you logged in to the actual application.

 

 

Kit Status

In addition to our standard service we wanted to seek to slowly start rolling in features for the site for our consumer products which seek to allow you to get a DNA ancestry test so I created the design for a status page whhich would allow clients to know the process of any of our products.

 

Messaging System

Our original messaging system also lacked key functionaility you would expect from a messaging system to accomodate users we created a new design with the focus on having features such ass a trash can where messages can be restored before a period, and a saved tab to add some form of filtering. A search was ommitted since the messages are from the service provider rather than a user messaging system.

 

Health History

One of the most Important pages from out initial product is the health history page it was mostly brought in line stylistically with the other pages, and moved adding a condition and editing conditions to pop ups and added some buk editing features it initially lacked.

 

Join Or Leave a Study

At this Point we needed to create the studies page which allows users to see which studies they qualify for and to allow them to join or withdraw.

 

Tools Used and Design Process

This project was wire framed and then designed in Affinity Designer, and Developed in HTML & CSS using Bootstrap, and jquery

Links

http://serif.com/