How I applied LATCH to a project
Every day at Center Centre, we learn practical design skills that we’re able to apply to the challenging real world projects upon which we work on. It’s the opportunity to work through challenges and recover from missteps that make these projects a truly valuable learning experience.
One of those projects we worked on was for Marquette University’s Office of Marketing and Communication (OMC). We were tasked with helping their department redesign their website to be more user friendly.
The Problem
One of the jobs of the OMCs is to maintain and communicate how the Marquette brand is used across the campus and how it’s used on any marketing material. Often, as in many shops running lean, the last client that benefits from the many talented people you have on staff is your own business. This was the case with the OMC’s site, where often, the staff had to get a message up fast. Over time, with enough messages placed on the site with little attention to how they’re presented, it’s easy to get an unwieldy site for users.
During the project I was tasked with redesigning the Branding and Style Guides section of the site. My goal for designing the page was to keep the existing content they’d already had an organize it in a way that made it easy for everyone to quickly find what they need.
The first problem I faced when designing the new page was that on the existing site they had two different pages that talked about the Marquette brand. I spent a lot of time going back and forth between the two pages, trying to understand the purpose of each one and the content that exists on them. Even though the two pages had a slightly different message, I found they could be combined into one and still communicate the same message.
The Solution: LATCH
Once I decided on combining the two very similar pages into one, the task then became a constant switching of tabs: back, and forth. Back, and forth. Back, and forth.
Though anyone walking by might have thought I was playing silly games with my computer screen, but all the flipping had a purpose. If I was to combine the two pages, I had to make sure the similar outbound links’ destinations also went to the same place.
That’s when I thought to myself “this would be easier if I just printed these pages off and eliminated the links that were duplicated on each page.”
After doing this, I was able to go through all the links much quicker and clearly visualize what content I was working with.
This then brought me to the next problem I needed to work through: how was I going to reorganize the content in a way that made sense to users?
This is when I remembered a technique I learned during our Information Architecture course, taught by Abby Covert, called LATCH.
LATCH is a simple and effective way to organize information in a meaningful way that’ll make sense to users; each of the acronym’s letters stands for locations, alphabet, time, category, and hierarchy. And each one organizes information like:
- Location: Information is organized by area or geographical location. An example of this could be a subway map or a diagram of the human body.
- Alphabet: Information is organized alphabetically. This is a simple way of organizing information and can be applied to just about anything, an example of this could be a music library.
- Time: Information is organized chronologically. Examples of this could be either by time such as dates or a series of steps over a period of time like a flowchart.
- Category: Information is organized based on the relationship they share. An example of this could be how Amazon organizes the products they sell on their website or a how grocery stores organizes their produce.
- Hierarchy: Information is organized by rank or importance and shows the relationship it shares with the other information. You’ll see examples of this with sitemaps or organizational charts like a family tree.
Once I had the methodology to solve my problem it was only a matter of applying it. I started to review all the links and think about the relationship each link shared.
While doing this, I was having trouble keeping track of which links shared a relationship.
That’s when I thought the best way to keep track of the relationships the links shared was to cut them out and group them together. This helped me to organize them into categories and label them clearly for the user to understand.
With my paper links grouped together using LATCH, I was finally able to start sketching the layout of what the Branding and Style Guides page was going to look like; by extension, I was able to reduce the cognitive load it took for users to understand the content on the page (formerly pages) as well as the time it took to find the resources they needed.
But more importantly, I learned that it can be easy to get stuck in the mindset of working in digital tools, but found that sometimes, the best remedy for a problem in the digital world is to do some organizing in the physical one.
For more articles on our experiences here, follow the Center Centre Cohort 1 Blog as we provide you every week with a new article about what we are learning!
