
Case Study by Glenda Rissman RGD, Principal, q30 design
The Ontario Hospital Association (OHA) is a member association that represents approximately 150 public hospitals in Ontario. The association regards itself as "the voice of Ontario's public hospitals". It assumes a leadership role on the issue of patient safety, and offers its members – Ontario’s private and public-sector healthcare organizations – a multitude of benefits.
q30 design inc. (q30) is the Agency of Record (AOR) for the OHA. The relationship began in 2009 when the firm responded to a Request For Proposals (RFP) to design all of the marketing materials for HealthAchieve. We won the work, and in the process began working for the OHA as well, which turned into an AOR relationship shortly thereafter. This includes strategic design for all print and online marketing communications including conferences and seminars.
Background
HealthAchieve (HA) has been the signature conference and exhibition of the OHA for 90 years. It is one of the largest and most respected healthcare events in North America. HA is a multi-award-winning event featuring over 200 speakers, 50 educational sessions and close to 300 exhibitors showcasing the latest healthcare products, services and technologies.
q30 completely rebranded the event and developed campaigns to promote it, with an emphasis on the benefits of attending the conference. The new brand platform for the conference was created to allow for multi-year use, with the ability to modify the core elements to make each year fresh with minimal impact on the website and conference signage.
q30 was engaged in March of 2013 to redesign the HealthAchieve website with a scheduled launch date of June 2014.
At launch, the site needed to:
- communicate to the two distinct audiences – delegates and exhibitors – why they should attend or participate
- accommodate expansion
- allow delegates to navigate through a complex Program Schedule and empower them, through the use of multiple filters, to search for their specific areas of interest
- make online registration easy
- be easily accessible from any mobile device
From the beginning of the project, we worked closely with HA’s SharePoint developers to ensure all UX suggestions and new features were easily implemented within the project’s tight timeline and budget.
Audience
HealthAchieve attracts more than 6,000 healthcare and business leaders from around the world for learning, networking, benchmarking and sharing best practices. Delegates include CEOs, trustees, administrators and clinicians from the healthcare sector and beyond. Each year HealthAchieve invites full-time university and college students to attend the event for a nominal fee. The site also needs to speak to exhibitors – the exhibitor floor has close to 300 participants – as well as sponsors.
Timeline
UX, UI, responsive design and front-end coding: 4 months
Site development and testing: 7 months
Concept
With all the design assets created by q30 in 2013, we were poised and ready to build a dynamic, fresh, intuitive and expandable site for all audiences. We determined that if the site was a success from a UX perspective, OHA could limit the need for print communications, such as programs and exhibitor prospectuses, which place demands on internal resources and budgets. The site also offers the ability to reach a much greater audience throughout the lifecycle of the event.
Process
- Research and discovery – website audit, best practice review, kick-off workshop
- UX – site map and wireframes that allow for device breakpoints for a consistent and responsive user experience
- Design – style tiles, UI, apply HealthAchieve brand throughout approved sample pages, with focus on the Program Schedule
- Development – HTML, CSS and Javascript
- QA and refinements – worked closely with HA’s SharePoint developers to integrate front-end code provided; also supplied additional assets as required during UAT phase
For the research / discovery phase we employed a few collaborative workshop techniques including live persona development and team card sorting. Teams were made up of a range of client stakeholders and q30’s designers. Together, we came up with three unique user types for the site, created personas for them and developed possible scenarios on what they might want and need from the website. We also labelled cards with every content section of the legacy site. From this, the teams were able to quickly order, sort, discard, add content and form loose possible sitemaps on the fly. The teams were then instructed to present their findings to the larger group. With an open discussion and critique of the possibilities, we were able to come to a quick consensus on a working site structure to further develop.
We also made use of ‘Style Tiles’, which are the equivalent of mood boards in the digital world. This process allows the design team to demonstrate high level design ideas like nav bars, buttons, heading styles, icons, etc., before designing the web pages. This usually happens after there is consensus on the UX and wireframes and provides an opportunity to present preliminary design ideas for early client feedback. It makes the design of the actual web pages much less time consuming, both from a design and client approval perspective.
Design Challenges
The website redesign posed several unique design challenges. The HealthAchieve conference brand platform was designed on a multi-year format. q30 developed a 5-year plan to modestly refresh the brand each year with modifications to colour dominance and messaging to allow the OHA to manage costs but graphically signal a visual evolution. q30 designed the site to allow for these annual updates by introducing modifiable web modules on the homepage and background graphics.
In addition to showcasing the new branding, the HA site needed to be fully responsive for mobile, and be built and managed within the OHA’s Sharepoint 2013 CMS. From the beginning, HA's development team was involved in every UX and design presentation throughout the project cycle. By working closely with the Sharepoint developers, we never presented anything to the client that could not be accommodated.
Our biggest challenge was how to organize over 200 speakers, 50 sessions and three different locations over a three-day period into a single coherent, intuitive and interactive schedule. The system needed to work seamlessly on both desktop and mobile devices, and allow users to locate information using various sorting options. After many hours of collaboration, internal and external reviews, sketched user flows and discarded icons, we developed a strong solution. Clever use of colour, tabs, typography, icons and navigation combine to make an intuitive tool. All aspects of the user experience were meticulously studied, applied and tested with this end goal in mind: to allow the user to find the information quickly and in whatever way, on whatever device suits them best.
Result
The site was successfully launched in July 2014. Below is feedback from OHA’s Marketing team:
“Since then, we have received a lot of very positive feedback from users who especially appreciate the easy to navigate program schedule. Because of the set-up of this site, HealthAchieve will be eliminating the production of our 40+ page program and instead directing potential attendees to the site. Over 3,500 unique visitors used the website's program schedule while onsite at the event which indicates that moving forward we probably don't need to print an onsite program and can switch to using the website and possibly a mobile app instead.”
HealthAchieve was recognized for its progressive annual conference and tradeshow in the categories of “Best Conference” and “Most Innovative Use of Technology” at the Canadian Event Industry Awards. It was also recognized by the 17th Annual Star Awards organized by Canadian Event Perspective Magazine.
Designer Takeaways
- Don’t shortchange the planning and wireframing; allow enough time to explore UX options and refinements.
- Begin to educate clients about the importance of providing feedback on wireframes before the design layer is added, especially for complex responsive websites. Use “Style Tiles” to introduce design features before full site mock-ups.
- Whenever possible, supply front-end code to developers.
Client Takeaways
- Develop conference brands that are extendable over several years, with a modest refresh rather than new creative annually, to make best use of budget and add to brand equity.
- Think about where the user will be accessing the site. Don’t shortchange mobile users by giving them less choices; instead, prioritize.
- Study post-launch analytics to fine-tune the experience.
Interested in submitting a case study to appear on the RGD website? Download 'Guidelines for Contributing Content' and email .