datavis assignment 2 wireframe high fide

Interpreting Adenovirus Transcription Map




Media: Maya, molecular Maya, Adobe Illustrator, Adobe XD, JavaScript, CSS, HTML.


Client: Professor. Jodie Jenkinson; Professor. Michael Corrin; Professor. Derek Ng. 


Audience: Students, the public audiences who are interested in science


Outcomes: Designing and developing a website by using a variety of computer software, and learning how to collaborate with my program developers.



Currently, visual literacy education is not formally taught in undergraduate life sciences, yet students are expected to interpret sophisticated figures present in scientific research papers and make sense the meaning of the underlying data. For instance, the viral transcription maps frequently appear in university-level virology courses or the virology journal articles. However, this type of figure can be challenging for students to interpret due to their visual and conceptual complexity. For this data visualization project, I picked one type of the viral transcription map and to give a thorough visual instruction specifically designed to address this visual literacy gap. (Click the image above to see the finished website)


Milwaukee, the 74th Annual AMI Conference.

Award of Merit - Interactive Media Category

Process of Work

Screen Shot 2019-07-30 at 8.47.56 PM.png

The first version of the wireframe:

The visual representation of the adenovirus transcription map should strictly follow the original figure from virology textbooks because we are teaching the specific visual conventions used by scientists to communicate this data rather than creating more beautiful visualizations/ animations that can totally replace the original illustration/visual conventions.

However, many button designs were included in the first version, which provides an inconvenient interface experience for users as they need to click all the buttons to finish the required tasks. Moreover, learners had no 3D model to relate the schematic map to the actual virus.

assignment 2 concept-01.jpg

The second version of the wireframe:

I iterated the wireframe by incorporating the 3D virus model (the intact and cross-section) and reducing the number of buttons. By clicking these buttons, users are permitted to switch between the visual representation styles of viral DNA/RNA as well as to see viral RNAs expressed during the three different infectious stages. For each of RNA (arrow), users can consult its name and its corresponding 3D part in the virus model by hovering over each arrow. I also added the third panel: the “jpg images + text” describes the transcriptional and translational process of the chosen RNA. 

Screen Shot 2019-07-30 at 8.55.14 PM.png

The third version of the wireframe:

For this version, I tried to tinker with color coding and interactive design to produce high fidelity interface with visually pleasing

colors and intuitive interactive functions. The third panels described in the previous version were changed into pop-up windows for additional information within “explore” section, and only four important structural RNAs will be introduced. Each pop-up window can be opened by clicking the “plus” icon. As mentioned earlier, users can click any of these four RNAs to reveal the highlighted parts in the virus 3D model (linking and brushing).


The fourth version of the wireframe:

The fourth version of the wireframe (lower image on your right):

Thanks for Derek’s feedback, I changed the “Explore” button to “On/Off” for the explore function because the radial button cannot be used as a toggle. I also changed “reset” to “all genes” for clarity. The last change made was adding in the supplementary materials shown in the lower part of the final website. These additional materials are important for students to learn the application/purpose of the transcription map.

Link to the document of the wireframe.

Like my works?

Let's work together!



  • LinkedIn - White Circle
  • Facebook - White Circle
  • Instagram - White Circle
  • Account Number: Shawn3221
  • 未标题-6-01

© LIU YUE 2019 All right reserved