Case Study: Restructuring the Department of the Interior
A case for Information Architecture
--
Designers just make stuff prettier, right. They’re all graphic artists. Wrong! Seriously wrong. Many designers are graphic artists by background. They have good taste. They know what looks pleasing and what doesn’t look pleasing to the eye. I am NOT that kind of designer. I am far too left-brained for that. Instead, I want something pleasingly useful. I want something so elegant to use, the user doesn’t feel like it’s been designed.
Up until this point, I have shared with you my steps to research a problem, draw insights from this research, and answer the “how might we” question.
Eventually, even the most researched assignment needs to take the plunge and make some assumptions. The designer must rely on their good taste, their experiences, their practiced skills to build something the user needs, wants, and loves to use.
In this case study, I redesigned the Department of the Interior’s website with an emphasis on the information architecture.
User Interface
A user interface is like a joke. If you have to explain it, it’s not that good. ~Martin LeBlanc
We can move away from personal taste arguments if we have a common rubric to judge the outcome and the process. Just like I used the Double Diamond of Design to problem solve for Whole Foods and the Natural History Museum, I can also use the UX/UI Maturity Model from User Experience Magazine to judge the Department of the Interior’s current website.
UX/UI Maturity Model
• Level 1: Usable
• Level 2: Useful
• Level 3: Desirable
• Level 4: Delightful
So naturally, I jumped into building a style guide for my Government Agency (which should be peppered through the four phases of the model, right?). Yippy! I get to play with colors, and icons, and typefaces, oh my!
Oh my, indeed. Valuable lesson: Understand your user. Understand their needs. Understand your goal. Playing with colors and fonts without the steps in the first diamond is like designing in a vacuum. Doing anything in a vacuum where there’s no air pressure seems painful, so don’t go there.
Take a step back and create your user and their scenario. Are you sick of that double diamond yet? Because I’m not. I don’t ever want to be sick of good design. I had gone through branding exercises for the Department of the Interior thinking that would start style guide. Wrong. That was my preliminary research at the far left of the diamond.
I needed to design with a user’s story in mind. All of these techniques have value. Take a look at my first diamond deliverables at the end of this article, but that’s not this case study.
Organizing Content
I started by asking why my user was on this website. What was this user doing here at the Department of the Interior? Then I walked through using the site as though I wanted to accomplish that goal.
From my user’s perspective, the site was … usable. I could navigate to pages and most of the pages functioned correctly (there were some 404s). But it wasn’t very useful.
This site needed to cut the bloat. There were so many pages, and the site map did not match the architecture of the content.
Most websites grow out of control because teams add pages like Frankenstein adds body parts until they have a giant monster that is entirely beyond their control. A site may start with organized content, but as more and more content is added, that organization starts to look like your Google Drive- or worse- your “My Documents” folder. I set to work at building the navigation system and information architecture from the bottom up.
“The practice of information architecture is the effort of organizing and relating information in a way that simplifies how people navigate and use information on the Web.” ~DSIA Research Initiative
I cut out the entire branch of the site dedicated to internal employees. This content can be stored behind an employee portal. Only a very small set of users need to see these internal HR documents.
Every other page fit within the five main headers (in purple below). Most of the reorganization was combining and reorganizing pages into the “Join Us” subheadings in blue (e.g. Employment could house both “find a job” and the “veteran’s employee program” and Volunteer could encompass the “youth initiative”). This is an organized site map:
Users looking for specific bureaus and offices don’t necessarily know the difference between a bureau and an office, so don’t make them hunt for their locations. People looking to volunteer for the department understand that’s joining their volunteer arm.
Testing a Navigation Structure
After the site map demonstrated better information architecture, the next step was to make that map usable in the content navigation. That required several paper prototypes before putting a version into InVision.
This simple prototype was my first experience with InVision. It is three simple, hand-drawn pages, but it helped me see how crucial spacing, Gestalt principles and colorization is to use a product. Black and white is not preferred to a little guiding color. It was time to apply what I had learned to a higher-fidelity prototype.
What to say about this considering I’m not proud of it? The answer is rebuild it in InVision and show you how I have improved since then. My current prototype using the style guide that follows is sampled below.
Desirable Content
Images are worth a lot of words — a famous person said that once. The layout of the home page is really nice, but my question was ‘do we need to promote the news and the blog at the same time?’
I love a good blog, so let’s promote Mr. Zenke’s blog, right? To help me know whether to proceed with this feature, I gathered a team of budding UI designers and asked them for a SWOT analysis of launching a blog feature.
We determined that the man-power needed to keep the blog up to date was not within the DOI’s scope. Turns out we were correct because as of the publication of this article, the blog had not been updated in seven months.
If news is the category that updates regularly, then keep news on the home page and do something else with that real estate. No need to split the user’s focus.
Delightful Experience
The layout of the DOI pages is minimalist. I like it. However, it is in black and white, so that’s missing an opportunity. What kind of personality can the Department of the Interior express with their color and typeface choices?
The Department of the Interior certainly does not miss an opportunity to express their personality on their Instagram account. It’s beautiful. Whichever intern is responsible for curating that social media account should win a medal. Those images are breathtaking, and they make me proud to be American. That’s our beautiful country!
I want the DOI website to capture that emotional response. The best way I thought to delight users is through a color choice taken from one of those images.
Through building the Department of the Interior’s website from the perspective of the potential user and using the framework of the UX Maturity Model, I made constant changes to the style guide I started at the beginning of this exercise. There is so much to be said for iterating and changing and adapting. That creative process gets a designer closer to the best possible outcome.
These sample home page versions demonstrating responsive design show growth in my design aesthetic. Although I would hardly consider myself proficient by these samples, you can see the progress from the beginning to the date of these samples.
What’s next?
As Ira Glass says, I need to continue to produce volumes and volumes of work to continue to improve my skills. I’ll only get better as you keep reading.
This design class was only my forty-hour-per-week distraction from my full-time day job as a PI#champion where I took over front-end development for a day. Wanna see how that turned out?
