Article  |  Work

Evolution of the McMenamins Homepage

Reading time: ~ 5 minutes

For the past 30 years, McMenamins have established themselves as a strong regional influence with their signature food and drinks, music and events, culture, and historical locations. They are a household name, known for their brand’s unique character that brings good food, fun and entertainment for anyone who visits their locations across the Pacific Northwest. While McMenamins is constantly opening new establishments and expanding their influence in their community, Planet Argon saw that the McMenamins homepage needed an update to reflect that growth and the evolution of their brand. So, the PA team proposed a solution for the redesign of the homepage.

A New Focus of the McMenamins Homepage

At the time when we pitched to McMenamins on a new homepage redesign, the page seemed scattered, disconnected, with vague paths for the user to find what they were looking for. The page’s space was not being used wisely and it also seemed to be leaning more toward an impractical visual experience rather than being functional, usable and rich in content. It needed more focus, organization, and simplicity while balancing well with their imaginative character.

So, the Planet Argon team proposed a solution for the redesign of the homepage. Our plan was to create a page that provided a more rounded view of their company while tying in a strong foundation with the brand. We wanted to show all of the many different things that McMenamins does, and provide more organized information to the users that would be easy to find; whether it was a movie, a show or event, a new beer release, or a promotional offer to stay in one of their unique hotels.

Working closely with McMenamins, we shared ideas and identified the overall goals for the site redesign to be a success. Our main goals were to:

  • Design a cohesive experience that is clean, organized, represents the brand, and gives more insight into who McMenamins is and what they do.
  • Provide a way that marketing can magnify more prominent events, highlight special locations, and give more attention to those events and locations when they see fit.
  • Make mcmenamins.com become more of an online destination for people to see and explore what there is to do tonight, or this coming weekend at more than 50+ of their locations.
  • Have a flexible page that can be easily updated and changed out with new information and events.
    Build a page that works well with the existing database and can expand to redesigned sub pages in the near future.

The Process

Sketches and Initial Concepts

After identifying the overall goals, and receiving general concepts from the client, we took those concepts and started to elaborate on them with some new sketches. We tried to be as diverse and creative as possible in these first initial steps, and really work through what would be the most effective features for the page.
Concepts were explored and discussed, reworked and discussed again. The ones that weren’t working well were pulled off of the page and new ones were added in their place. Over a few revisions, the sketches, ideas and concepts got worked through until we finally had some final sketches and a plan we were happy to move forward with. It was time to start mocking up the wireframes.

Wireframes

At the wireframe stage, we started digitally building out the page and it’s features from our refined sketches. Our previous decisions were becoming more specific and the fine details were getting worked out.

In this stage, we provided real sample copy from the existing McMenamins site, rather than the “Lorem Ipsum” sample text. This gave clear examples of what type of content we intended to have in that location, and to generally assess how much of it may be there. This also allowed our client to go back and revise the text to their needs prior to launch without having to come up with the topics.

Data organization in areas such as the “What’s Going On” panel had to be communicated with the development team at this early phase. This was to ensure that it worked well with the existing database. We wanted to keep major changes from happening late in the process to disrupt the flow.

At times, things were discussed within the team for additional changes and different approaches, but we came to the conclusion to not spend too much time on one area. The idea was to keep the process moving. We aim to use a more agile approach and measure specific elements of the page after initial launch to determine the performance of our designs. Modifications would come later after we received more data from the customer’s experiences, and this would prevent wasted time earlier in the phase on guessing whether features of the page would work effectively or not.

The McMenamins Online Brand and Visual Design Stage

After approval of the wireframes, the next steps were to move into the visual design stage. We had been envisioning this and taking it into consideration throughout all the previous stages of this project, but wouldn’t start executing it until now.

Thoughts of McMenamins brand history and where they want to go in the future were considered carefully, and we wanted to keep the strength in it’s uniqueness. The McMenamins brand celebrates creativity and curiosity in all of us and our community. Whether it be the artist, the beer maker, the musician, or the individuals who enjoy what those people create; supporting and providing a place for talented people to do what they do best is a big part of what makes McMenamins who they are. With the new homepage, we wanted to show that creativity and spirit as best as we could. We did this by:

  • Embracing their established brand guidelines in font, color palette, and characters, while incorporating new elements to make the brand even stronger.
  • Featuring many beautiful and diverse images taken by the McMenamins staff photographer.
  • Integrating original McMenamins artwork into many areas of the page to add a flare of creativity and to break up the “boxiness” look of the panels.
  • Using a mood for the page that adds elements of the past. A “nostalgic” sort of feel that nods to their multiple historical locations and history.
  • Links to other supporting stories and images such as their YouTube account and photos from Instagram.

The online branding needed to bring together the best of these elements and create an showstopping homepage while informing the customer before he or she even steps into a location.

Ensuring We Reach Our Goals: Continuous and Collaborative Discovery

Now that the homepage is launched, Planet Argon can start gathering feedback received from McMenamins most active and engaged customers, and start measuring behavior to see if we are achieving the desired outcomes. Some of the ways we will be improving site functionality is by monitoring:

  • Search terms that indicate what the customers are seeking, what their preference is, and whether they are having any challenges finding the information they are looking for.
  • Analytics that determine how the customers are using the site, what topics they are exploring more, where they are dropping off, and whether the paths for information can be found easily and effectively.

These tested elements will be changed accordingly based on their results of the behaviour, and the page will continuously evolve and incorporate feedback from the voice of the customer.

To learn more about other projects like this, we invite you to check out our portfolio.

Have a project that needs help?