Fixing the Information Architecture of my site

Last month, in What’s wrong with my site, I picked three small improvements and assigned them each to a different “Future Shane”.

fix the Information Architecture (IA) of this site. If someone comes to ShaneG.ca and reads an interesting article, it’s difficult for them to explore. That’s a problem because there’s over fifty great articles that they might like.

June Shane, June 2019

So I (July Shane) got out the sticky notes and tried to make sense of the content of this site.

Step 1: Write all titles on sticky notes

Room with sticky notes on the wall
One sticky note per post, arranged by date

As I was writing the title of each post onto a sticky note, I put them up on the wall in chronological order. It was very pleasing to see that I have had no months without a post in over 2.5 years.

Room with some sticky notes on the wall and others scattered on the floor
One sticky note per post, arranged by gravity

What wasn’t pleasing was when half my sticky notes fell onto the floor.

I think many years ago they came out with Super Sticky notes which seems like a complete contradiction of the value proposition but I think it’s just an acknowledgement that the original formulation fell off more than we’d like. I don’t think of them as Super Sticky, just the proper amount of sticky for most uses.

Steve Portigal, Dollars to Donuts podcast

Next time, I’ll get the Super Sticky notes.

Step 2: Arrange by topic

I then moved all of my sticky notes to the floor so that gravity could work for me instead of against me. I grouped the blog posts by topic and tried to give meaningful names to each group.

Sticky notes arranged on a hardwood floor
Grouped and labeled sticky notes; this time on the floor

Step 3: Implement

After a couple more iterations, here’s what I came up with.

Screenshot of navigation menu with 6 items: About me, UX strategy, UX tactics, Data visualization, Programming, and Other ramblings
My new menu

For comparison, here’s the old one.

Screenshot of the main navigation of the site. 

Menu
    About Me & Contact
    Programming
        C++
        boost
    Consulting
        Google Apps Script
        Google Forms
        Google Sheets
        UX
    Oddly Specific: Various Notes and Collections of Links
    Getting Started in UX
    Portfolio
Search bar
My old menu

I still don’t love it but it way better represents what I write about most. It also is simple enough to fit into a top-level menu instead of a hamburger menu, which I’m sure August Shane will appreciate.

Advertisements

What’s wrong with my site?

In late-2015, my now-wife and I decided to move away from the city we’d lived our whole lives in. I applied for tons of development jobs in London before the move but hardly heard back from any of them. I figured it was because I had nothing to show online and was 7000km away.

The history

So I went to WordPress and grabbed the first decent WordPress theme that I could find. I then published a handful of articles, including Using boost::bind and boost::signals2 to Automatically Propagate Signals. These early posts were a great exhibit of my technical knowledge. They also lulled all readers into a deep, restful slumber.

Not long after those two posts, I found a job. Coincidence? Yes. Because that was also around the time that I actually made the 7000km move to London. But my online presence couldn’t have hurt!

Since then I’ve written fifty more articles. These articles have shifted, along with my career, from engineering to design.

But I haven’t changed the design of this site at all.

A designer’s site should be designed

It’s bugging me more and more lately. C++ experts are almost expected to have hideous, unusable blogs. But a professional user experience designer? No. This will not suffice.

So now I’m going to commit to improving it… Actually “I” am not committing to it. “Future Shanes” are.

July Shane: Information Architecture

July Shane, you’re going to hate me for this, but you’re not here to defend yourself. I’m volunteering you to fix the Information Architecture (IA) of this site. If someone comes to ShaneG.ca and reads an interesting article, it’s difficult for them to explore. That’s a problem because there’s over fifty great articles that they might like.

Look at this main menu.

Screenshot of the main navigation of the site. 

Menu
    About Me & Contact
    Programming
        C++
        boost
    Consulting
        Google Apps Script
        Google Forms
        Google Sheets
        UX
    Oddly Specific: Various Notes and Collections of Links
    Getting Started in UX
    Portfolio
Search bar
The current site menu as of June 2019. There’s a lot more on this blog than the Programming and Consulting that I posted about in 2015.

So get out the post-it notes. Wrap your head around our content. Group it, tag it, categorize it. Then update this menu. By the end of the month, I want a coherent, usable hierarchy of content. It should highlight your recent work as well as the early stuff. And I want you to blog about it.

If anyone is reading this beyond July 2019 and the menu hasn’t changed, please shame July Shane. Use a tweet or get creative.

Update: July Shane did his job, just in time! See Fixing the Information Architecture of my Site

August Shane: Usability

I don’t know about you August Shane, but I don’t hate the hamburger menu. In certain cases, it can fine. This site is not one of those cases. Especially when you’re viewing on a big desktop web browser or even a tablet. Why bury July Shane’s beautiful categories of content under three boring lines?

The current site banner. It’s clean, but not intuitive or usable.

What I DO hate, though, is the align-right symbol floating opposite of the hamburger menu. Can you guess what’s under there? Align all the words on the page to the right for some reason? No. It’s to “follow” this blog.

Anyway, August Shane, all I want you to do is get rid of the hamburger and the right-align buttons. Use words instead. Then blog about it.

If anyone is reading this beyond August 2019 and the banner hasn’t changed, shame August Shane. Here’s a template tweet you can use.

September Shane: Have fun

I’m not always a jerk to my future self. September Shane, your job is to have fun improving this site. Maybe get into the code and make it so ShaneG.ca is the actual domain of the blog instead of a redirect. Maybe use IFTTT to post all articles to Twitter and LinkedIn automatically. Maybe add alt text to all images to make the content more accessible.

Whatever you choose to do, have fun and don’t forget to blog about it! Oh, and update this article with a nice happy ending for this three-month-mini-makeover.

Hey reader, are you from October 2019 or later? Is there a happy ending to this article? If not, shame that slacker September Shane s’il vous plaît.

Organizing Documentation with Card Sorting

We use Confluence at work for internal documentation. It’s kind of like Wikipedia, but only us developers can see and edit it, and the articles are things like How to set up Server x, or How to Test y.

I love it because we previously used long email chains with the answer buried deep within, mixed with dusty old word documents locked into source control. Confluence feels so much more lightweight, nimble, and searchable.

The Problem

Unfortunately over time it’s become a bit of a mess. We have over a hundred pages but there’s not much rhyme or reason as to how to find them. Confluence does have a search function but, believe it or not, people still browse. Also, if you’re adding an article it’s hard to know where to put it.

The Solution

So I decided to run a card sort exercise with my coworkers. My goal was to understand how they thought about these topics then organize the articles in a way that matched that as close as possible.

I scheduled a lunch and learn, invited the whole development team, and…

(Almost) No One Showed Up

1024px-tumbleweed_rolling

A photo taken at my first attempt at a card sort workshop

Just one of my coworkers and my manager came. I should know by now that now all developers are as into UX as I am 🙂

Luckily, my manager agreed that this was important enough to schedule in and make mandatory, so a couple weeks later, the workshop was on!

The Actual Workshop

I hadn’t run card sorts recently, so I brushed up on my basics. The two main rules that stuck out for me:

  1. Run with one person at a time
  2. Never make people sort more than 30-50 cards at a time

I broke both those rules. Because I only had a one-hour workshop, I had everyone do the sorting in three small teams instead of individually. Also, because we had 100 articles, I did the sort with all 100 of them.

F5ABFE81-7E70-4DC5-A4C8-26C55D6FCF67-cropped

Team Pink sorts away. See guys? UX can be fun!

After that workshop, each team ended up with several named groups with several cards each.

Analyzing and Testing the Results

I then used a template from Donna Spencer to analyze the results. I’d definitely recommend this template. It’s free and it did the trick.

Each team came up with remarkably similar groups. Based on those groups, I then came up with proposed categories and tested with a quick tree test using TreeJack from OptimalWorkshop.

Photo 2017-03-31, 2 57 27 PM-edited

My attempt at making sense of the card sort results. Paper still beats Excel sometimes.

Based on the tree test, one of the cards was clearly in the wrong category so I moved it. A couple of the others weren’t decisive so I added cross-links, effectively giving those articles two homes instead of just one.

Reflections

I’m very happy I did this. It was nowhere near perfect but it definitely vastly improved the structure of our documentation, showed everyone which articles were available, and introduced card sorting to the team.

Next Time

If I had more time I probably would have done the sorts one-on-one with my teammates instead of doing everyone at once in teams.

I should have used a smaller representative sample of the articles instead of trying to sort them all.

In other words, I should have followed the basic rules of card sorts!

Oh well! You can’t learn the limits if you don’t go past them every now and then, right?!