A Fully Interactive Museum Experience – Designing EMP’s Mobile Site
EMP Museum is unlike any other museum experience. They do away with the concepts of untouchable exhibits and reserved whispering. Inside the futuristic swirling-steel Frank O. Gehry building, EMP Museum has created a totally interactive visual and auditory experience. On the leading edge of contemporary pop-culture, they have a busy schedule of exhibits, programs, and events. They needed a site that both represented their forward-thinking interactive brand and simplified the visitor experience. As a non-profit organization, they also needed to plan for budget constraints.
Phase 1 – Starting with Usability
Before planning the scope of 2013 website changes, EMP employed OpenRoad’s User Experience team to conduct a usability review of the full website (www.EMPMuseum.org). We detailed a number of changes that EMP Museum can make over the long-term to improve their user experience. When we compared our usability findings with the device traffic, it became apparent that improving the mobile experience would have the biggest impact on results. In particular, visitors wanted to be able to quickly scan current events and purchase tickets from their mobile device. Simply compacting the desktop site into a mobile-friendly version still provided too much content for mobile users to be able to efficiently achieve their goals. By starting with a usability review, we could provide recommendations for EMP to optimize their budget and focus on the most critical issues.
Phase 2 – Design and Development
Taking the usability recommendations into consideration, our design and development teams set out to revamp the mobile information architecture and content management system templates. EMP has a huge number of constantly changing events and programs that needed to fit onto a tiny screen. From a design perspective, the challenge was to simplify the organization of large amounts of content. As can be seen in the before picture, the site had issues with an extremely long-scrolling home page.
From a development perspective, the challenge was to simplify the content management system templates, so content owners could easily manage adding and updating events. Working within their existing content management system, Umbraco, we developed templates that let content owners update information in one place for both mobile and desktop. We added a separate tab within templates for mobile specific images and details. This ensures consistency across mobile and desktop and speeds up content entry.
The Final Result
Through a redesign of the mobile Information Architecture (IA), visual design, and CMS templates, the new mobile experience:
- provides clear call to actions throughout the site to register for events and purchase tickets
- reduces load times, which is important for customers with limited bandwidth and/or data plans
- displays content in layouts optimized for small screens (previous version linked users to desktop version to view details on events and exhibitions)
If you’re unsure where to start with making improvements to your website, always look to user experience. Completing an initial usability review can help prioritize development initiatives and drive the maximum ROI for your web budget.
As a follow-up to our Top Interaction Design Trends 2013 post in December, the design team here at OpenRoad considered some of the trends and buzzwords that might give us a glimpse into what design and technology has in store for us in 2014. Now, we’re not claiming that these are the design trends for 2014, but merely a few of the ones that we find particularly interesting at the moment. So let’s dig in…
Some say it started a few years ago with Nest, who introduced a smart, self-learning thermostat for your home. Soon, we saw an explosion of connected products and product ideas for home automation, including lighting and security systems. But this year, things seem to be moving into overdrive. Clearly, Google thinks so too with their recent $3.2 billion acquisition of Nest, only last week. Wolfram even announced the launch of their new Connected Devices Project, which boasted “a couple of thousand devices” at launch. (more…)
Inspiring athletes to “Refuel. Repair. Rehydrate.”
BC Dairy Association is a non-profit that raises awareness of the milk industry in BC and delivers innovative nutrition education programs. The Powered by Chocolate Milk initiative inspires athletes to achieve top performance by drawing on a network of professionals that share their stories and encourage each other, all while delivering the core message that chocolate milk is a great option for post-workout recovery.
The core athletic audience would likely access the site while unchained from their desks, so going mobile was a no-brainer. The challenge was to ensure a clean experience that was universally-accessible across smartphones and desktop browsers.
The answer was a responsively-designed web experience, allowing the web content to adjust automatically to the screen size of the browser, no matter the device.
Our creative team designed a simple interactive tool that distilled key nutrient information into a friendly infographic. Using the interactive infographic, users can objectively compare chocolate milk to a variety of other popular recovery beverages—sports drink, white milk, fruit juice, water—and draw their own conclusions on chocolate milk’s suitability as a post-workout recovery option.
The Powered by Chocolate Milk website has become the main hub of activities, a central touch point for blog posts, videos, news, and social media channels like Twitter and Facebook. The website creates the framework for an engaged niche community while educating them about the nutritional value of chocolate milk for pro athletes and heavy exercisers. It’s fully integrated into BC Dairy’s unified digital platform, and all aspects of the site—from featured videos to the drinks in the infographic—are CMS-controllable.
As a Software Developer, Tyler’s skill set is diverse, covering both backend and frontend development, database architecture, and game development. Tyler believes in being “tech-agnostic” — finding the right solution for the project and not being tied to any specific programming language or framework.
With an educational background in user experience and user interaction design, Tyler’s work helps bridge the gap between design and development. His work often focuses on prototyping, where he works closely with the design team to solve unique problems.
Prior to joining OpenRoad, Tyler worked with digital agency Mod7 on a wide range of clients including the BC Dairy Association, National Film Board of Canada, and the Law Society of British Columbia. His work has been recognized by the Microsoft Developers Network and has been prominently featured within the Flash developers’ community.
When not chained to his computer, Tyler can often be found in the outdoors. He is an avid hiker and camper.
Daryl is a visual and interactive designer with a passion for creating meaningful, usable interactive experiences. As part of the design team at OpenRoad, Daryl identifies creative opportunities in projects, helps establish visual design direction for clients, and contributes throughout the entire life of a project from planning and designing to building and quality assurance.
While his main focus is design, Daryl contributes to the development cycle as a strong front-end developer, building scalable and modular solutions in HTML and CSS. Graduating with honours from Capilano University’s Interactive Design program, Daryl is a flexible and well-rounded user experience practitioner with expertise in mobile form factors and mobile-centric design.
Prior to OpenRoad, Daryl was the Lead Designer & Front-end Developer at leading Vancouver digital agency Mod7, where he designed and built websites, mobile applications, and games for high-profile clients including BC Dairy Association, Transportation Investment Corporation, Electronic Arts, Dr Pepper, Vancouver Biennale, Pokémon, and The Law Society of British Columbia.
Although Daryl lives and breathes design and code, he also likes to spend time reading books in local coffee shops, attending concerts, putting together DJ mixes, playing nine-ball pool, wandering into the wonderful world of whisky, and experiencing the joys of craft beer.
As Creative Director of OpenRoad, Wil is responsible for ensuring that projects meet the highest standards of design and communication excellence. He works closely with clients to articulate a vision for great design and digital brand integration, while seeking to delight the user and exceed the project’s communication objectives.
With over 20 years of design experience, Wil’s work has been honoured with some 150 industry and design awards and numerous accolades in the media. As principal of leading Vancouver digital agency Mod7 (before being acquired by OpenRoad in 2013), Wil helped to push the boundaries of digital storytelling, mobile development, and interactive design.
In addition to 4 years of architecture school training, Wil completed his degree in Communication Design at the Emily Carr University in Vancouver, where he later taught motion graphics and interactive design in the mid-00’s. Though his schedule doesn’t allow room for teaching these days, Wil still likes to mentor students at the Vancouver Film School.
When not spending time with his wife and two children or challenging his team to create great design at OpenRoad, Wil dabbles in amateur astronomy photography and loves pounding the drums. He has recently discovered a soft spot for whisky and puppies.
Empowering the human story with design & technology.
The Goggles are award-winning storytellers and creators working across a variety of media—print, film, online. The National Film Board (NFB) produces and distributes films and media which “reflect Canada to Canadians and the rest of the world”. Working with The Googles and NFB, we helped translate the story of Pine Point into a highly interactive digital experience.
The NFB was producing a story by The Goggles about a town that no longer existed. Content acquisition was nearly complete, the art direction was coming together, now they needed someone to make their vision real and to guide their narrative process through the possibilities afforded by the online medium.
How could the technology be pushed to create narrative innovation while still maintaining the vision of the authors? What new storytelling possibilities did the digital space open up for this particular story? What were the technological limitations and how could they be overcome? And how do you make sure that, in the end, the technology melts away, allowing the human element to shine through in a clear and honest way?
Working with the original storyboards and assets created by The Goggles, we used an agile development process to explore the unknowns and drive creative innovation around the technology and story possibilities. We initially focused on small sprints of rapid prototyping to quickly test ideas, throwing away what didn’t work and further evolving what did. Together with NFB and The Goggles, we worked together under a common vision. After a few weeks of this iterative back-and-forth, the team evaluated numerous prototypes and we were ready to move into production.
The project utilized a massive amount of content—music, sound, text, and video—that needed to be optimized and integrated, even as The Goggles were continually refining the vision. Things changed almost daily. It was a traditional programmer’s nightmare, but we are anything but traditional. We believe that the human interaction comes first. We worked closely with the creators—really close, they literally sat behind us sometimes, breathing over our shoulders—to craft the best experience possible with the most flexible production process possible. The process itself turned out to be quite a wonderful experience in the end.
Sometimes, as you work on a project, you don’t fully appreciate how special it might be. Such was the case with Pine Point. When we started, we knew it had the potential to be something great, but at the end we shipped it and moved on to the next great project.
And then the critical acclaim and kudos started rolling in. Pine Point went on to win some of the highest honours in our industry, including two Webbys, over a dozen international awards, numerous news articles, and features in many film festivals.
Looking closer, what really strikes us about this project is not the fancy technology, the hip music, or the great writing. What makes Pine Point so special is the insight into human nature, the characters, the questions about the meaning of community. Experiencing it again with fresh eyes and ears helped us affirm that, ultimately, great stories are really just about ourselves. And that’s what makes great stories like Pine Point so universal. Sure, the technology helps, but technology is really at its best when it just gets out of the way.
In 2013, the web got flatter, simpler, and more mobile-ier. Here’s our round-up of three things that really had us singing happy songs as interaction designers this year:
Responsive Web Design entered the public consciousness
Responsive Design was something that had us excited for some time now, both in terms of what it could do for the user experience and for our clients’ bottom-lines. But it took a bit of time for the concept to gain traction, mainly because it’s a bit of a difficult concept to grasp. So when an entire TV commercial is tooled up to show off Sportsnet’s responsive website, you know RWD has become more than an obscure philosophical approach debated within the web design community. In fact, by some estimates, roughly 1 in 8 websites are now responsive. And we couldn’t be more thrilled. It means more and more sites are accessible to more and more people, devices, and contexts. That’s why we declare 2013 as “The Year Responsive Design Went Mainstream”.
Everything’s “flat” now
In 2012, the Interwebs were abuzz with the idea of “flat design”—design that scorned unnecessary ornamentation and dubious visual metaphor. Suddenly everyone was an expert interface designer simply because they could use the word “skeuomorphism” in intelligent debate. Fast-forward to 2013, and Apple now led the charge with their much maligned/anticipated iOS 7 redesign. Gone are the gaudy leather trims and faux-distressed metal surfaces. And while we certainly think there’s always room for the affordances inherent in referencing physical objects in screen-based interactive design, we feel the dominant trend towards clean, open, and simple interfaces is generally a pretty good thing.
Hamburgers to go
The surge of mobile introduced a new iconography into the broader interaction design lexicon, leading many sites to behave more like apps (especially when viewed on mobile devices). The most notable newcomer was the three-bar symbol affectionally referred to as “the hamburger menu icon”. In 2013, we saw many responsive sites adopt this shorthand to let users know that, hey! there’s a menu under there somewhere. And users responded with a unanimous “OK, I get it!” This allowed designers to hide the navigation until needed, clearing space on small screens for the important stuff, like actual content. Because no one wants to visit a site on their smartphone only to wade through screens of navigation options, right? We’ll take that hamburger to go, please.
The impact of mobile on interaction design was unmistakable this year, setting new standards and influencing users’ behaviour and experiences. Moving into 2014, we’re looking forward to seeing that line between “mobile” and “desktop” disappear altogether, giving rise to a “multi-screen” approach to design that lets users get the content they want—anytime, anywhere. Soon, they’ll be singing happy songs along with us, too.
Today is a big day for OpenRoad. I am excited to announce our acquisition of Mod7 Communications Inc. We’ve partnered with Mod7 on many projects over the years and now they’re part of the OpenRoad team. You could say that we’ve been dating for a long time, and now it’s time to get married.
Wil Arndt will be joining OpenRoad as our new Creative Director. I’ve known Wil for many years and have worked alongside him on projects for clients such as Pokémon, The World Bank, Electronic Arts, and TReO. There are very few people that bring together a great sense of design, the ability to articulate a creative vision, and empathy for the user like he can.
For OpenRoad, this means we now have a lot more creative brain power. We can now provide a complete end-to-end experience, covering all aspects of strategy, user experience, visual design, development, and ongoing continuous improvement under one roof. This means digital experiences that are well built, easy to use, and visually stunning. It also means we have more awards than we know what to do with (seriously – over 150! Where are we going to put them all?)
For ThoughtFarmer it means an increased focus on visual design for our clients. Beautiful intranets are just as important as compelling public websites and this will allow us to improve the product and continue to deliver stunning custom designs for our clients.
Please join me in welcoming our new Creative Director Wil Arndt, designer Daryl Claudio and developer Tyler Egeto. I have the utmost respect for the business and the team Wil has built, and I can’t wait to see what we can accomplish together. I’m looking forward to introducing you to Wil and his team and letting you see them in action on your next project.
Here’s to the future!
Darren Gibbons, President
Trevor has eight years of experience designing useful, usable and innovative web-based software. As a User Experience Designer for ThoughtFarmer, Trevor is responsible for ensuring new features work in a way people expect while ensuring the overall experience of the product remains consistent, intuitive and, dare we say, fun to use.
After many years of Quality Assurance work, Trevor got his start in User Experience and Interaction Design at TELUS where he progressed to Senior Interaction Designer and then User Experience Strategist. He worked on all aspects of their customer web properties, ensuring people could complete their tasks quickly and easily.
His educational background is in Applied Psychology (Human Factors and Ergonomics tract) at Kwantlen Polytechnic University. When not working, he enjoys running, snowboarding, cooking and traveling with his family.