Project 1

Saumya Kharbanda
Communication Design Studio



To understand how we move through communication pieces, and what we can do guide the viewer to move effortlessly through the piece. To this end, I analyzed — its conceptual model as well as the visual patterns it employs to reinforce this structure.

Duration: 4 weeks

First Impressions

Week 1

After a preliminary investigation, my first impression of looked like this:

Things to think about

Who is this space for? Describe your audience. Think from their perspective.
There are two main types of users who may visit the site. The first user is someone who has some background/experience in the field they want to learn about — and probably knows which specific course they need. The second is one who has had no prior exposure to the field. Either way, the navigation bar offers a clear enough picture for the user to find what they’re looking for.

What are the goals of this space? How are the goals of the maker/owner different from the users’?
The goal of the piece is to provide educational videos around creative industries and businesses. It tries to strip away other distractions. For example, the site regularly posts articles and blogs, but there are tucked away behind a link called “article centre”, whichh appears in one corner of the home page. Once you enter a course, this is especially true, as there’s nothing else on the page. The site doesn’t prompt you to move to a different page through “new on the site” or “related” visibly, these are only shown at the very bottom of the page, or placed on the home page, away from the main content. I don’t think the goals of the maker are different from the user’s in the case. and modes of thinking and learning

This week we read chapter 2 of Don Norman’s “Things that make us smart” in class. The main takeaway from this reading is that it’s important to evaluate, when designing a product, whether it’s encouraging the user to think the way you intended, or hindering such thought. Is it free enough for distractions so your user may properly experience what you have created for him? Does it provide the right tools to compare, contrast, organise, etc so the user can properly reflect on his choices and actions? is a platform for providing educational videos. By definition, this requires the users to be focused, and think about the content they are consuming. The content of the space is decidedly reflective.

However, the space itself should be mapped out in a way that it doesn’t take mental effort on the users’ part to get to the page they need. If the navigation requires consideration, the user may not have enough mental capacity left to actually be able to focus on the content. The navigation of the space, therefore, should be experiential.

Building a conceptual model

Keeping in mind the points above while examining Lynda more deeply, I found that overall, the site structure is fairly easy to navigate, whether you’re completely new to what you want to study, or know what you’re looking for.

The home page features a navigation bar (more on that later), and a few sections that can be broadly classified into two buckets — “individual” and “community”.


The community section is fairly straightforward. It offers up courses from a macro level view of the site — ones that are new, trending, or featured.

Community-driven sections on the homepage
a drop down on the home page


This part of the site contains all the information that is related directly to the user. The two divisions here are “my account”, where the user edit their profile and configure preferences, and “my courses”, which shows a comprehensive user history, recommendations, and resources.

The course library

This an alphabetized index, which can be accessed through pages in the above two sections, or through two main filters — categories and software.

The main navigation

Categories are broad fields of interest, further subdivided into specific topics, relevant software, and resources. There are 12 categories that has listed out, and these are repeated in a few places as a common sub-division scheme. Software can be accessed through a list of popular choices, or a complete alphabetized index.

These two classifications are what is shown in the navigation bar, which drops down when you hover over the “browse library button”

Clicking the “browse library” button shows the user the complete directory of courses. A user can also search through the library, and there several additional filters offered to facilitate this. One can narrow down options according to recency, author, skill level, duration, and more to find the courses most suited to their needs.

Course pages

Once a decision is made, the user is taken to the particular page of the course they chose. These are, in my mind, are the fundamental building blocks of this website. The rest of the pages are just ways to access the courses offered.

A course page offers an introductory video, a detailed lesson plan, and course details (textual description, duration, last updated, etc), transcripts, FAQ’s, and a space to take notes.

Site info

Aside from these, the site has some links for quick reference — support, FAQs, apps, social media, etc.


First attempt at the conceptual model.

As mentioned above, I see the site as a collection of course pages, with other pages making this collection accessible and comprehensible.

While I feel the category/software filtering is fairly clear, the community/individual filtering is spread out randomly over the home page. The individual-specific pages, especially, can be reached via two different parts of the site, which provide very similar information, but are not exactly the same. These could be consolidated, or some degree of uniformity could be brought in.

Refining the Coceptual Model

Week 2

A short critique of the first draft revealed to me something that I knew intuitively, but had not quite been able to consciously identify: my conceptual map of is based almost entirely on an organizational view of the site. The ways to filter the course pages are far more detailed than a parsing of the actual content page itself.

Based on this feedback, I rearranged some of the items, and was able to create a clear distinction between the core content, the filters through which it can be seen, and supporting information for the site.

Revised model

This model was generally well-received by my peers in a second round of feedback. The general consensus was that it makes sense and clearly illustrates the goal of the users (i.e.: to get to the courses, which are the main content of the site).

Visual Mapping

Week 3

The second aspect of this exercise is to analyse the visual cues provided by piece in order to guide the movement of a viewer.

We kicked this off by first marking out the order of heirachy on a few key pages. This in itself was not super useful to me. However, we followed this up by reading excerpts of “The Image of the City” by Kevin Lynch, where he describes the five elements viewers utilize to create a mental map of a space.

Lynch’s Elements of a Space

Lynch’s elements of the city at a glance. Photo shared by Lisa Otto.

Thinking about a communication piece as a physical space is a new approach for me, and one I found really useful. It helped me clearly identify the role each element is playing in the piece.

I noticed that the levels of heirarchy I had mapped out where more of less mapped to the

Mark-up of the elements of a space defined by lynch.

Combining the conceptual and visual models

Week 3 and 4

Note: Going forward, I decided to focus only on the courses, and the process of getting to a course page, since this is the core purpose of the site. I will ignore supporting materials (footer info and the article centre sections) since they don’t really affect the core objective of the piece.

Rough combination of the conceptual model and the visual markup. This is not a terribly descriptive diagram of

It was clear after marking up Lynch’s elements of a space on a few key pages, that these map almost exactly on the my conceptual model — the visuals I was calling out as being important were the same ones I had pointed to on my conceptual map. However, to marry them seemed like nothing more than placing the key pages into my visual model, and the resulting diagram doesn’t provide a clear description of

However, I realised I could extend the terms “node”, “landmark”, and “district” to the organisational structure of the site, not just the visual elements.

I decided that course pages resemble districts a lot because they are essentially groupings of information, and each on it’s own is complete. The visual grouping of a video thumbnail with some descriptive text — which I marked up as a district — is a recurring pattern across the site.

I could also link filters to nodes — the are focus points which help move from one section to the next;
and list pages to landmarks — they present no information themselves, but only help the user situate themselves in the site.

I attempted to put these thoughts together in this digital diagram:

While attempting to articulate the connections I was trying to convey through this diagram, I realised I was getting my definitions mixed up. I went back to the original text by Lynch, and realised that it’s perfectly valid to show courses as districts; however, filters as nodes, and lists as landmarks are odd fits.

Filters function as landmarks

They are external points of reference that help the user to situate himself within the space. These exist in the form of navigation bars on the site for most of the filters (not discovery), though aside from this

Lists function as nodes

They are strategic focus points which lead the user to new infomation. A filtered list is a node, which leads to individual course pages.

Final Diagram

Week 4

The final diagram reflects the conclusions made above. I also made changes to the visual language to align with through type and colour choices. The final piece, I think provides a clear description of, and how one would navigate through.