Responsive Redesign: DESeq2 Tutorial


Original Page

For my research, I extensively visit this extremely long and technical page Analyzing RNA-seq data with DESeq2.
Below are two screenshots of the page:

original page screenshot 1
original page screenshot 2

Although this page is definitely helpful, I don't like it :(
This page has several usability problems and I decide to re-design it for this assignment.


Problems

Problems I experienced as a user of this page:

  • Inefficient menu/guide links: all the links are at the top of the page, so users have to go back to the top of the page before getting redirected.
  • Unclear content hierarchy: titles and subtitles are of similar sizes and thickness, and there are no indentations between sections.
  • Non-appealing visuals: dry visual designs, and length per line is too long for effective reading.

Problems returned by accessibility checker for this page:

  • Missing alternative texts for images
    • Personally, I don't really agree with this diagnosis, even though it is true - this page has descriptions before and after the figures about their content and meaning. In addition, the only function for those images, I would say, is to show what users should expect by running the associated code, so it does not make sense to consider the case where the images cannot be viewed/loaded properly.
  • Low contrast of texts in code snippets
    • I agree with the second evaluation that the code snippets have low contrast. I think this is a problem worthy of attention for R in general - the color coding for different parts of the code (variables, functions, arguments, comments, etc.) are of low contrast between themselves and the background.
wave screenshot


Low-fidelity Wireframing

A low-fi wireframe is designed to address these problems:

low-fi wireframe


Visual Design Style Guide

A corresponding visual design style guide is defined as the reference for high-fi prototyping:

visual design style guide


High-Fi Prototyping

An high-fi prototype is created and annotated:

marked high-fi prototype


Responsive Redesign

Finally, a responsive redesigned version of the page is built based on the prototype.
You can browse it using the embeded window below (limited responsiveness) or visit it here (full responsiveness).
Menu buttons are functional - please click them :)


Takeaway

This redesign experience helps me to think deeper about good v.s. bad usability design. It also gives me a hand-on experience of converting ideas into prototype and actual implementation.