Zeitguys was hired to design and deploy itstimenow.ca as a user friendly, easy to edit website aimed at providing information to AMAPCEO members. The project deliverables included:

• Information architecture and UX design
• Visual design and WordPress theme customization
• Plugin research, implementation and customization
• Custom plugin and widget development
• screen saver designs for MAC and PC
• wallpaper design for multiple formats including BlackBerrys and iPhones
• Project management and testing
• Documentation

Custom AMAPCEO Widgets

One of the really great features about the itstimenow.ca site is the variety of widgets that the user can choose to display on any particular page.  Aside for the basic social networking widgets such as twitter, we also designed a series of custom widgets leveraging off our own home-grown suite of WordPress plugins. A Button Link, an Events widget and a Latest News plugin were built so that the user could easily update those parts of their site and have changes instantly reflected in their sidebars. The client can also choose what pages each sidebar element appears on, to customize the relevance of the sidebar to the content of each page.

 A little something extra

With the site design having an array of vibrant colours associated with it, we decided a cool feature would be to add a custom colour picker for internal pages. In the back end of all internal pages the user has an option to change the masthead background title colour and the content background colour.

Aside from the cool factor of this option it also is a great feature that helps to bring versatility and variation to internal pages of the site that are very content heavy. To avoid altering the overall feel of the site a selection of colours have been predetermined based on the design and image selection so that the overall look is consistent but the different selections can offer a variation in colour.

Additional Resources

In addition to designing screensavers and wallpaper for the site, Zeitguys also designed an infographic that displays an AMAPCEO Job Evaluation Timeline.

Timeline

Zeitguys was engaged to provide thought leadership, guidance, User Experience (UX) design, User Interface (UI) and visual design assets. We collaborated closely with product management stakeholders, subject matter experts, and the Unitron in-house development team to plan, design and deliver a consistent and carefully-thought-out user experience across the entire application workflow.

User Experience design

Zeitguys began the project by conducting a series of brainstorming sessions with the Unitron marketing and development team to help clarify and agree upon the guiding principles that would influence the architecture of the software. These brainstorming sessions also:

• isolated specific architectural criteria
• set timelines for design deliverables
• enabled the development team to schedule key design decisions and assets into their build plan.

Once the key principles were in place, the application framework needed to be nailed down. This was done over the course of a few sessions where Zeitguys presented architectural options along with pros and cons, to help stakeholders and the development team make informed decisions about the overall application layout and flow.

In an application as complex and feature-rich as this one, every screen presents UX and design challenges. Wireframes allow us to expose issues around parsing, comprehension, pathing, taxonomy, nomenclature, layout and flow without the clutter and distraction of the visual design overlay.

User Interface design

Visual styling requires an iterative workflow and tight engagement with the client team in order to meet the often long list of need the software must fulfil. Zeitguys worked closely with the Unitron team to explore a variety of visual “idioms” and approaches in order to nail down the right “feel” for the application. Leveraging popular design software, we turned out static digital mockups, presented in the same format as the finished application, for review, discussion and signoff by all stakeholders.

Icon Design

Icons play a prominent role in the TrueFit™ navigation, and inform the entire application’s look-and-feel. It became important in the early stages of the UI design to come up with a unique and compelling look for the icons that could become one of the key distinguishing features of the application.

Before styling could even begin, we needed to ensure that we had the conceptual base right. Similary to wireframe stage of development, the infographic stage in icon design also divorces the stylistic overlay from the base structure, allowing the core concept, metaphor or idiom that makes an icon resonate with its intended target audience. And then, once a few baseline infographics were established, we could then begin to explore various ways of rendering those infographics in a compelling way.

The final rendering style of the TrueFit™ navigation icon set conveys modernity and sophistication while remaining parseable at small sizes (40 pixels). The icon style guidelines describe an off-axis hand-rendered 3D look leveraging a duotone colour palette with a third colour for highlight floating above a pool shadow. All icons are hand-crafted as scalable vector artwork, optimized for specific pixel dimensions and simplified for XAML import into the application framework.

Screen-by-screen design

With wireframes as the blueprint, Zeitguys then provided supercomps of each required screen along with any screen-specific custom controls or graphics, to give the development team a pixel-perfect blueprint from which to assemble the application views. In the end, the TrueFit™ application in its current incarnation is an Audiologist’s powerhouse: every screen contains rich, easily parsed information, and highly interactive controls for fine customization for every minute parameter of the hearing device hardware.

Zeitguys brought in a process which allowed us to focus on our goals and customer needs first. They worked very closely with us to ensure we could do a parallel development, with out losing sight of the end goal. Their processes ensured we stayed on track and on time, it clearly identified interim check-in points, so we could test concepts and functionality with our customers.

The end result is spectacular, we get raving reviews from our customers, and our main objectives have been achieved. Easy to use and incredibly easy to learn fitting platform, with a very stylish modern look and feel which is scalable for years to come.

The work that we have gone through has been not only huge in scope and effort but I’m also convinced that without the help of Zeitguys we would not have gotten the results we are currently seeing.

André de Goeij
Director, Product Management
Unitron

Having teamed up with Zeitguys in the past for their identity, product packaging and website design, it was only natural to re-enlist the Zeitguys team to design the promotional/information cards that would accompany the product in retail spaces. The design requirements were obvious: since all GliSODin products are carefully formulated using various natural ingredients, GliSODin wanted to ensure that each major ingredient be at the forefront of the promo card design, thus allowing the user to quickly identify the primary active ingredient within each formulation.

Early Design Process

Once the team developed the parameters for the design, a series of sketch layouts which illustrated visualizing how the content could be displayed.

Bright, stylized imagery was used for the main ingredients in the center of the promo card. Tools you would find in a laboratory were used to accent the scientifically formulated aspects of the main ingredients to echo the dermatologist and nutritionist seal of approval on the product. The lower portion of the card contains a small listing of the various other ingredients found in the products along with a small description of the ingredients beneficial effects.

The back of the card, which is predominantly text-heavy, was accented with a infographic that describes how GliSODin works.

The result is a clean, fresh and colourful series of eye-catching display materials that stand out on the retail shelves and are leveraged wherever the GliSODin Skin Nutrients product line are sold.

Former Progressive Conservative leader, John Tory, has been named to lead an advisory committee that will recommend what to do with the property. Options already being discussed include condominiums and a casino. The purpose of the Save Ontario Place Website is to promote the campaign to keep Ontario Place open, while future plans are being made and to ensure that Ontario Place remains a public, family-oriented and accessible space for all Ontarians to enjoy. When Zeitguys was approached to help out this cause we were more then happy to lend our services to the design and construction of the WordPress site.

With a two day turn around, the site needed to be rapidly developed. In conjunction with the WordPress framework we also used custom widgets which we had previously built to ensure the site a quick and seamless turnaround in the requested timeline. Though the site needed to be produced quickly we were still able to add our own little flair through the various aspects of the site such as the unique call to action sidebar buttons that utilized our custom widgets.

Want to know more? Check out the site for more info on how you can help to “Save Ontario Place”

Zeitguys was engaged to design and deploy achieveresearchtraining.ca as a user friendly, easy to edit website aimed at providing information to ACHIEVE fellowship applicants and new researchers. The project deliverables included:

• Information architecture and UX design
• Visual design and WordPress theme customization
• Plugin research, implementation and customization
• Custom plugin and widget development
• Project management and testing
• Documentation and end-user training

From CRICH to ACHIEVE

One of the challenging aspects of this project was the challenge to take a brand that had been under the St.Michael’s and CRICH umbrella and develop it as its own without losing all recognition of the parent brand. To achieve this we decided to bring the traditional St. Michael’s hospital blues into the design as well as stay consistent with the style of imagery used. Imagery for the site echoed the style and community subject matter that was present on the parent site.

Keeping it Accessible

With the task of keeping the design consistent with the parent brand underway, the next aspect to address was that of user accessibility. Though the site would mostly be used by healthcare professionals, we felt that it was still crucial that the site have an accessibility plan that followed the web content accessibility guidelines curated by W3C due to the fact that it is a healthcare site containing information about research done in various communities within the city.

Our primary accessibility targets were the elderly and vision impaired. To accommodate this group an on-the-fly font resizing control panel was built into the site. Here users could increase the text size of all main content without “breaking” the design or structure of the page.

Below is a sample of the text at regular size and increased by 150%

Special care was also taken in the selection of colours used on the site particularly in navigational regions to ensure that their would be a high enough colour contrast ratio to accommodate visually impaired users. All page elements also used CSS text styling over large header images to ensure that all page elements could be machine readable in case the user depended on a machine reading program such as “click hear“.

Since the site had a second level navigation that was only visible on hover a second footer site map navigation was added through a Zeitguys-built custom WordPress SiteMap plugin along with another home-grown Cookie Crumb plugin for easier navigation throughout the site.

The second accessibility targets were users with motor skill impairment and hearing impairment. To accommodate this group of users we ensured that all actions buttons we large and in prominent locations on the page and that menu items and links were keyboard-accessible through conventional shortcut keys and standard tab key navigation.

Events and Widgets

One aspect of the ACHIEVE framework that was crucial for the site was the addition of a custom events section. Leveraging the WordPress platform, we custom-built back-end functionality that allowed ACHIEVE site administrators to painlessly add events and have the new events populate in the sidebar under “Upcoming” or “Recent Events”.

We’re going to boast a little here, but we’re very proud. One of our own principals, Tom Auger, is listed in the credits on the popular blogging and content management software WordPress. Tom has been active in the WordPress open source project, and is one of Canada’s leading WordPress resources. In 2011, Tom spoke at WordCamp Montreal, was active on the WordPress official and unofficial support forums, filed bug reports and contributed patches and code to fix bugs and make enhancements. In 2012, Tom intends to futher solidify Zeitguys’ commitment to the WordPress community and will be involved with the WordPress core team in rolling out new features and enhancements in upcoming versions of the software that will be distributed across 14 million sites worldwide.

Needless to say, Zeitguys is heavily invested in WordPress and any new website we build for clients is automatically upgraded to include the powerful content management features of the WordPress platform that allow our clients to manage their own websites with very little technical training required.

We are committed to the WordPress platform and will continue to give back for free to the community in the aim of improving this versatile and powerful platform for all.

Healthydebate.ca is a vibrant, expertly curated, community-driven website aimed at fomenting active discussions by community leaders, activists, healthcare professionals, and engaged members of the Canadian public. The scope is healthcare in Canada, and the topics are broad and varied.

Zeitguys was engaged to bring this social media project from the pages of the research grant to full online reality. Our deliverables included:

• Information architecture and UX design
• Visual design and WordPress theme customization
• Plugin research, implementation and customization
• Custom plugin and widget development
• Project management and testing
• Documentation and end-user training

From Blog to Social Media Platform

The really exciting part of the project was taking the raw materials of the WordPress platform and crafting them into a usable and compelling social media destination that engages the site visitor at every turn. We supplemented WordPress’ already powerful commenting system with approval ratings, and also added rankings, polls, social media controls and popularity filters throughout the site all aimed squarely at getting even the casual visitor involved in the feedback process.

By carefully selecting and leveraging key add-ons, and with a healthy dose of home-grown coding, we adapted WordPress’ blog-based technology into something much more sophisticated and interactive.

Rankings and Ratings

Each article has a visitor-defined ranking score that is generated by allowing any reader of the article to select from a 5-star rating. Each visitor may only rate the same article once. The process is easy and casual (no registration or verification is required) and so user adoption of this behaviour is high.

The user commenting system also benefits from its own “thumbs up / thumbs down” rating system. Coupled with a custom popularity filtering tab, this democratizes the commenting process and ensures that the most useful and well thought-out comments bubble to the top.

Survey Says…

The next tool that encourages user participation is the polling / survey system. Polls can be easily created and added to any article – some articles contain multiple polls. Users select from multiple-choice answers and only see the poll results once they themselves have participated in the poll (or the poll expires).

A site-wide “featured poll” is also available in the ubiquitous sidebar, and is often used by the site curators to solicit feedback about what the next topics or articles should be.

The Social Scene

These days, no website is complete without the standard suite of Facebook, Twitter and other social networking links. In addition to these links, we built in a tight integration with Facebook, leveraging the Facebook API, and added a comprehensive sharing tool that covers nearly every current mode of digital communication from email to digg and beyond.

But wait, there’s more…

We could go on and on about this project, talking about how we implemented an integrated opt-in mailing and newsletter system, user feedback forms, easy flash and media embedding, metrics and analytics and a host of other customizations that make the day-to-day administration of the content straightforward.

But we won’t. Instead, we will just encourage you to jump on over to healthydebate.ca and join the debate!

Along with Demeure Club brand development, Zeitguys Inc. was also given the opportunity to develop for Demeure, this premium photo book highlighting travel destinations around the world. Having worked with Yuri Dojc in the past, we jumped at the opportunity to work with him again on this new collection of his photography. Needless to say, we were thrilled to learn that Applied Arts Magazine has named Live the World as one of its award winning photography books of 2010.

To learn more about Applied Arts Magazine 2010 awards, visit appliedartsmag.com.  To learn more about Demeure Club, visit demeure.com. And to learn more about Yuri Dojc, visit yuridojc.com.

“This is a pretty great moment for Zeitguys,” stated Senior Partner and Creative Director Tom Auger, when he received the long-anticipated award. “It’s fantastic that an app that’s such a good cause for hearing well-being is getting this kind of attention. Hopefully this will just increase the app’s profile and more people will download it and test their hearing.”

uHear is a scientifically accurate hearing testing tool, with three different tests based on standard tests used by audiologists. It delivers accurate results and features a cool touch interface that encourages younger people to try it out and test their hearing.

The app, which can be downloaded from Apple’s iTunes store for free has been ranked consistently high in the Medical Apps category in the North American iTunes store. It is currently climbing in France and Germany since the recent release of translated versions. Unitron Hearing also offers a simplified online version of the uHear self-assessment hearing test, created by Zeitguys in Adobe Flash.

Zeitguys hopes that this recent exposure will encourage more customers looking to create innovative interactive experiences to contact the Zeitguys team and start the dialogue.

–

Contact Zeitguys at 416-966-4345, tom[dot]auger[at]zeitguys[dot]com

This compact site window provided instant access to Laurence Group news and media postings; at-a-glance summaries of the Laurence lines of business; and multiple, easy to find jump links to all the Laurence Group sister sites.

The Laurence Group parent website also features a collected news posting are with quick highlights of company-wide information and continued quick jump-off links to specific areas of interest.