All.jpg

Project type: UX/UI ∙ Client: Koonkie Inc ∙ Timeline: 6 weeks

 

 

LUCA Genomics App

This is a project developed as a UX designer at RED Academy, Vancouver. For this project, the UX program and UI program worked together in teams. The goal was to design an educational, interactive and visually appealing mobile platform to spark the user’s interest in genomics and provide an unparalleled level of user involvement in Earth’s genomic diversity.


Our team:

UX: Edison K, Rebecca L., and Maria Mercedes Sinisterra.
UI: Maria Nava, Max Chung.


Our client:

Koonkie Inc.: Aria Hahn, Steven Hallam, Kishori Konwar.

 
 
 

Key points

  • Currently, there are no comparable educational mobiles apps for casual users who are interested in genetic science.

  • When searching “genome” or “genetic science” online, the results are too technical for casual users to understand.

 
21-21-21.jpg
 
 
 
The design evolution of Luca app key screens: Home, Discover (Luca view) and Circos. From low-fidelity wireframes to the final prototype.

The design evolution of Luca app key screens: Home, Discover (Luca view) and Circos. From low-fidelity wireframes to the final prototype.

 

Home

The home screen of Luca app has five main buttons (See the home screen above). These buttons hold an icon left aligned with the name of the section and a brief description of what’s in there so that the users get clarity of what they can explore within the app once they sign in.

 
 

Intro to Genetics

The first button in the Luca home screen is Intro to Genetics. This section has been designed for the users that are not familiar with Genetics, to lead them to a selection of resources that will help them understand what Genetics is about. An example of one of the resources, as seen in the image, is a TED talk explanation video of 22 min. by Barry Schuler.

Introtogenetics.jpg

Discover

The second button in the Luca app home screen is Discover, this button takes the users to two different ways of visualizing species: Luca view and List view.

Luca view is designed to discover species while navigating in an interactive map based on the genome tree. The List view, on the other hand, is a way to visualize all the species categorized in a list. The idea behind this is to get the curious users attention while navigating in Luca view, and have an alternative for the users that just want to look at a species in a list. Both views take the users to the preview analysis screen in which they are able to check and modify their selections if needed before getting the analysis results.

 
 
Discover section: two different species views: Luca and List.

Discover section: two different species views: Luca and List.

 
 

Once the users have chosen one or a maximum of four species, the Analyze button leads them to the different DNA visualizations results and the first visualization that will show up is Circos.

Circos is the main tool for data visualization in the app, it is the first visualization result displayed for data analysis. The platform allows the users to zoom in, navigate and read through all the information Circos is able to provide. For the users that do not know how to read Circos, the app will guide them through steps on how to do it (see below highlighting different parts of Circos).

 
Circos navigation: zoom in and highlight on chromosomes ring to guide the users on how to read the graphic.

Circos navigation: zoom in and highlight on chromosomes ring to guide the users on how to read the graphic.

 
 
 

Did you know?

As part of the Discovery section, the app adds fun facts in different parts of the navigation. In the Luca view as seen above as well as in the Circos screen shown, in the bottom part of the card.

Funfacts.jpg
 
 

As mentioned previously, the platform offers different ways of data visualization and is open for future considerations which means multiple different ways to visualize DNA could be added in the future or different alternatives to research further into the users DNA could be given.

 
Visualization results of Analysis

Visualization results of Analysis

 
 

Phandi

The third button is Phandi. It is Koonkie’s platform that allows users to upload their data and get results within the app. Luca app is an extensible platform that supports Phandi.

News/Stories

Following Phandi, the user will find the News/Stories button which will lead him/her to read/share articles and news about biological discoveries.

Settings/Profile

The last section in which the users can modify their account and app settings.

 
Phandi platform in Luca app home, Phandi sign in screen and users’ results screen.

Phandi platform in Luca app home, Phandi sign in screen and users’ results screen.