Master Thesis final book
Analysis draft V1 Analysis draft V2 Analysis final version

At the very start of my research I pursued existent models to do multimodal analysis. However, these models require a large amount of previous research and learning, and their results are extensive texts documents which make them difficult for theory-averse folks.

I pursued then to find a way to apply the multimodality concepts in practice with ease. Not as a mere philosophical adornment to documentation or benchmarking, but rather as an actionable set of tools that can help visualize what happens on an interface.

Similar to proofreading marks, I envisioned this as an in-place annotation system. What better way to reference something than to be able point at it and name it?

Three highlights of the different annotation and reference systems I tested for my annotation model.

Section of a Creative Bloq article and its multimodal relations analysis next to it
Redesigned section of the Creative Bloq article from before

My annotation model was refined through a set of analyses and redesigns. In order to limit the research, I focused my work on websites meant to be read with sporadic interaction from the user (web magazines, newspapers, institutional or government sites).

The process involved loosely the design thinking outline, by which I would analyse a page, identify and define a goal, propose a redesign, and run another analysis.

In this example I grabbed a section of an article, analysed it, created the multimodal relations map, and guided by it proposed a design solution where the main "issues" were addressed: redundancy of information, easier to identify navigation, reduction of cognitive load via reduction of texts.

Section of a Fast Company article chosen for analysis Redesigned Fast Company article following its analysis

After redesigning four different pages I ran a set of comparative and usability tests to find out how the originals vs the redesigns fared. I discovered that while in general the redesigns seemed to have proposed improvements over the originals, there was still a lot of room for improvement in terms of reining in the wildest redesign options.

In reading order:
Original article from Fast Company selected for analysis and the redesigned version enhancing the experience of "seeing the weird, wonderful ads that made Americans love computers".

Semantic differential for the survey evaluating the Fast Company redesign.

Thesis internal page close-up displaying the results of a validation survey
Collection of multimodal relation identifiers

I delivered a webpage where I explained the annotation system, its components, and showed with a toggle the multimodal analysis map of the page itself – a live example

See the one-page guide open_in_new

Thesis internal doublespread

M.A. Thesis

Multimodality in Web Design

Moved by my professional experience, I decided to explore web design from a theoretical lens.

The concepts from multimodality and rhetorical structure theory helped me perform analyses on web pages, which I then turned into an analysis method for efficiency. I then redesigned those pages and ran surveys to evaluate the redesigns and by extension my method.

The end result is an annotation system to analyze web pages. This system reveals how the information on a given web page is interconnected and what it demands from the user. Through such an analysis the designer can find insights about the design which they can use for redesigns, user tests, etc.

Web design
UX Design
Goal Directed Design
Critical Making