When you think about the websites you like, you may consider interesting design, aesthetics, and interactive components. But behind the scenes, almost as a subliminal message, I bet those sites are also your favorite because they relate to you. They make your job, as the viewer, easier because it’s almost as if they know what you are looking for before you start looking.
For any Pacific Northwesterner, McMenamins is a common household name. We establish ourselves as Portlanders by which McMenamins we have visited; be it for a movie, a meal or a show. I remember buying tickets to a Flaming Lips show a few years ago. A co-worker remembered trying to find a movie at their local McMenamins theater. My brother recalled going on the site to find a room for my wedding. While different scenarios, each of us also remember the difficulty in finding what we needed, something McMenamins knew all too well. That’s where we came in.
We knew we had to dig into the site and identify the user process (and problems) before we could start to see the solutions. So we started to map out task flows and user stories.
Here’s a few to give an idea:
It was a tedious process, but necessary. Walking through each step helped identify some bigger issues and hurdles that users (and ultimately McMenamins) were facing.
The first main issue I noticed related to the navigation. The navigation is the biggest tool for the user. It helps them quickly know where to go and identify where they are. For McMenamins, their navigation was…
a. tedious
b. it related to their company.
It was tedious because it had three levels and for a company that had overlapping businesses in different locations (ie, a hotel can have a pub, movie theater, winery, golf course and spa) scrolling down to have to find what you really needed was burdensome. Furthermore – on a landing page without a clear channel, the one click method left people stranded (ie. “How did I get here?”)
And B, it was structured the way they had structured their organization (hotels, pub, movies, beverages, blogs, etc). But a user comes to the site for a reason. What are they doing? What do they need? They need to find a place to stay, they need to find a place to eat and drink. They want to find things to do this weekend.
So our recommendation became – simplify it and relate it to the user.
Design Feedback and Strategy
The navigation was overloaded, enough so that it led to distraction and confusion. So, we changed the navigation so that it related to the user’s activity. Hotels = Stay the night: Pubs and Beverages = Eat and Drink. Secondary activities were pulled out and placed in more appropriate spots (Art and Fun got pulled into “About us” and e-blast and blogs moved into a “Connect with us” widget). Other items were given more emphasis; for example, the filtering map and links to the online shop were underutilized and hidden in the massive navigation bar. To simplify the page further, we moved the main logo to the left corner which opened up the left area to smaller quick links that power users can use to go directly to the more popular pages.
In our first design we made modules on the page to highlight and promote them, giving people a reason to use them. We could promote items in the shop by showing different images as the page refreshed and we could engage users to use the map by showing them the helpful filters McMenamins had built over the years.
After consulting with McMenamins, we decided the map might be too big of a change. Instead, we added the location search back into the navigation, and identified the user’s activity as “Find us”. We also bulked up the social media piece, adding other ways to get in touch with McMenamins with blogs and e-blasts.
But we’re not quite there, yet. The new placement of the social media piece gave the prominence that McMenamins needed to engage their loyal followers, but it also started more discussions about which accounts and channels should show. Realizing the magnitude of their social media presence (all properties have a facebook page, for example) we quickly learned that we would need to revisit this piece and make sure we incorporate each in one, simple tool.
While designs are in the works for the social media piece, we continued with our overall navigation change, and our last step was to ensure this new design could adapt to their list of landing pages with different colors and backgrounds. To manage this (and the future for additional pages) we created transparent psd files that the McMenamins staff could easily customize as they needed.
Here are two examples:
McMenamin’s Edgefield
McMenamin’s Crystal Ballroom
Launch!
In April 2012, we launched the new navigation on the McMenamins site. Now with a primary navigation focused on the user and side modules that are more engaging, we hope that we were able to improve the user’s experience – and are keeping an eye on what the analytics will tell us in the coming weeks.
Stay tuned as we continue to evaluate this change and collaborate with McMenamins on more changes in the future.