The Official OpenRoad Blog

IF/THEN

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

Jennifer Li

As ThoughtFarmer’s Training Specialist, Jennifer is responsible for managing client training and documentation. When she is not knee-deep in user manuals, Jennifer delivers remote and onsite client training sessions and works internally with the Professional Services team to continually enhance product knowledge and expertise.

Jennifer has been training for over 10 years and has served as a product knowledge expert for clients such as eBay, Maximizer Software, and Sustainet Software. Jennifer has an insatiable appetite for learning about emerging ideas and trends related to business and technology. She has taught courses at MTI Community College and implemented a learning management system responsible for increasing student enrollment through online courses, enhancing the learner’s experience and improving instructor productivity.

Jennifer is currently working on her B.Comm (Marketing). She has a diploma in Marketing Management from Kwantlen Polytechnic University, and certificates in Computer Information Systems and Instructor Development. In her free time, she can often be found hiking in Squamish, checking out new bands at many of Vancouver’s live music venues, or volunteering at a local animal shelter.

Jennifer Li's Full Profile

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

Tyler Egeto

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.

Tyler Egeto's Full Profile

Daryl Claudio

As an Art Director, Daryl is responsible for articulating design direction for clients, overseeing design artefacts produced by the design team, and executing on creative opportunities in projects. He contributes throughout the entire life cycle of a project from planning and design 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.

Daryl Claudio's Full Profile

Wil Arndt, CGD

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.

Wil Arndt, CGD's Full Profile

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