The Official OpenRoad Blog

IF/THEN

Emily Carr’s Big Idea Gala: Supporting the Future of Design in BC

Congratulations to Emily Carr University of Art and Design on their launch of The Big Idea capital campaign!

The campaign aims to raise the $25 million needed for the construction of a new, state-of-the-art Emily Carr University campus at Great Northern Way. Creativity is a vital resource to the British Columbia economy, and Emily Carr University hopes that the new campus will become part of the province’s economic, social, cultural, and educational engine.

14103044851_3e44521041_z

From left to right: Wil Arndt, Creative Director; Darren Gibbons, President; Gordon Ross, Vice President

As supporters of BC’s design community, we were honoured to attend and sponsor their Red Carpet Gala to kick off the campaign. The high-profile evening included red carpet photos, an opportunity to learn more about the project, yum-mazing oysters, and a sneak peek of the freshest art and design projects at The Show (Emily Carr’s annual grad celebration).

Our Creative Director, Wil Arndt—an Emily Carr University graduate, former design program teacher, and current alumni board member—says, “The creative industry is flourishing in Vancouver thanks to institutions like Emily Carr. As usual, I was impressed with the high levels of sophistication and insight at the design show this year. These students are bringing innovation, creative thinking, and determination to some big design problems.”

Congrats to Emily Carr University and a shout out to Reliance Properties for donating a generous $7 million to kick off the campaign. We encourage you to get involved by donating to their FundRazr Campaign (donations start as low as $5).

Filling in User Experience Potholes: Connecting Applications for a Smoother Experience

We’ve all seen it. We’ve watched as user research participants struggle through what should be a simple task. We’ve witnessed them work across multiple off-the-shelf applications, each with their own idiosyncrasies and learning curves. The sum of these disjointed experiences are like driving over a paved, prairie road after the winter thaw: bumpy, unforgiving, and frustrating. But, each pothole is actually an incredible opportunity to address serious user experience challenges within organizations that purchase 3rd party software applications.

Companies will often work with multiple vendors to assist with various parts of their business. There are obvious cost savings rationale associated with purchasing an off-the-shelf product as opposed to developing software in-house. Some examples of this are: purchasing accounting software to track expense claims and purchasing issue-tracking software to organize the triage and resolution of calls to the call centre.

The unfortunate side effect of this is that their employees will now have to deal with several user interfaces throughout their day, each with varying level of usability, each possibly with a different login. This can lead to a very frustrating experience for users when you take into account each user’s unique needs and that each product is usually not designed with the other applications in mind. Over the years I’ve seen the full spectrum of experiences that accompany using 3rd party applications to assist with critical business processes. Some of these applications are just plain painful, some are a pleasure to work with, and some are merely ok  — they get the job done with relatively few headaches and grey hairs. However, “3rd Party Software” doesn’t have to be a dirty phrase. With thoughtful attention to the user’s experience across applications, we can design solutions to fill in those potholes, smoothing out the user’s experience along the way.

Can’t We Just All Get Along?

I recently listened to James Robertson (@s2d_jamesr) give a talk at VanUE on Designing Behind the Firewall, where he showed many different applications of beautifully designed intranets for many enterprise clients. (more…)

BC Dairy Digital Strategy & Website

Guiding a forward-thinking organization through digital transformation.

work-screen-bcda-v3

BC Dairy Association is a non-profit dedicated to increasing the consumption of milk in BC and delivering innovative nutrition education programs.

The Problem

In 2011, the BC Dairy Foundation and the BC Milk Producers Association merged to become the BC Dairy Association. The merger posed some challenges from a digital implementation perspective. The two organizations each maintained rich websites and digital channels with vastly different audiences—nearly 20 audience segments were identified, ranging from school children to dairy professionals. The merger created a new organization that suddenly had a stable of over 45 digital properties to manage. The communications team at BC Dairy Association, made up of handful of subject and marketing experts, were already quite busy, so they needed help to both help manage the transition and develop a strategic plan for the future. (more…)

View Portfolio Item

Law Society of BC

Community-driven learning through technology.

work-screen-lsbc-v4

The Law Society of British Columbia regulates more than 10,000 lawyers in the province of British Columbia, setting and enforcing standards of professional conduct. Their Online Learning Centre offers courses in professional development for their members, helping to ensure that the public is served by honourable and competent practitioners.

The Problem

The Online Learning Centre had initially been built in 2007 using an off-the-shelf Learning Management System (LMS). The LMS chosen had worked well for a time, but eventually fell behind as technology, user expectations, and the vision of the organization progressed. The system was inflexible, users were having a hard time finding content and even completing courses, and the number of help-desk calls were growing to an unacceptable level. (more…)

View Portfolio Item

UX Book Review: Designing Together by Dan Brown

DesigningTogether.Cover_300

Designing Together by Dan Brown

I first discovered Dan Brown when I saw him speak at the 2012 IA Summit in New Orleans on “Managing Difficult Situations on Design Projects”. His presentation laid out the basis of what contributes to common interpersonal conflicts and described a toolbox of strategies for handling difficult situations that keep projects moving forward.

In addition to his presentation Dan put together a card game called “Surviving Design Projects” that is extremely helpful to play with your team as a team-building exercise (I have played this with my fellow designers) or to have on your desk as a reference when faced with a difficult situation.

The workshop and the card game set the foundation for his new book “Designing Together“. The book pairs his conflict management concepts with the fundamentals of strong collaboration, which we as designers thrive on in our day-to-day work. (more…)

EMP Museum

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

EMP-Thumbnail

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)

Key Takeaway

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.

View Portfolio Item

Design Trends We’re Watching in 2014

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…

Connected Everything

2014article-connected

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…)

Powered by Chocolate Milk

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.

pbcm-mbp-iphone595x368

The Problem

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 Process

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 Results

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.

work-screen-pbcm595x372

pbcm-safari595x391

View Portfolio Item

National Film Board

Empowering the human story with design & technology.

work-screen-pp-v4

​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 Problem

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?

The Process

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.

The Result

work-screen-pp-v3
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.

work-screen-pp

work-screen-pp-v2

View Portfolio Item

Top 3 Interaction Design Trends We Loved in 2013

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

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

Flat Design Flat Design

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

Hamburger Icon Hamburger Icon

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.