The Official OpenRoad Blog

IF/THEN

Justin Johnson

As a Senior Software Developer at OpenRoad, Justin’s extensive technology career has ranged from Perl, through Java and vbScript, to PHP and Python and the major frameworks and databases to go with each.  The renewed emphasis on JavaScript makes it feel like 1998 again, but the addition of Node, single-page-app frameworks, and asynchronous coding models offers new directions in a career based on continuous learning.  Justin has also lived on the other side of the divide, both managing development and serving as CTO of a technology startup, giving him a 360 degree perspective on delivering solutions.

Justin’s degrees are in printmaking, drawing and philosophy. Like most of his fellow graduates, this led to a career in web development. He continues his interest in art through classes in figure drawing at local galleries, and handling the face painting at the company picnic.

Justin Johnson's Full Profile

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

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