Number 41 Media – Interaction Design Portfolio

I had an excellent experience working with the talented team of people at Number 41 Media in Victoria BC for a couple of years. A smaller company with roughly 20 staff, Number 41 has been in operation for 18 years. It has an excellent reputation for UX design for large scale software projects and more recently, service design projects. This is a summary of the projects that I’ve been involved with.

Employers’ Advisers Seminar Registration System

The Employers’ Advisers Office is a part of the Ministry of Jobs, Tourism, and Skills Training and offers employers resources to aid in compliance with WorkSafeBC requirements. A large portion of their efforts go towards providing seminars throughout BC about WorkSafeBC related topics such as occupational health & safety, the claim submission process, and modifications to legislation that affects employers. Their online registration system was outdated and difficult to use. The administrative side of the system relied heavy on manual processes. The new web application will automate seminar registration and improve the usability of the public facing site. I was the lead UX designer on this project, responsible for creating conceptual wireframes, high fidelity wireframes, and writing interaction design specifications and process flows. Supported by the rest of the design team, we created a new front end that the client loved, and detailed specifications for automating the registration that will make their jobs much easier. The new registration portal can be seen here.

A page from the Business Requirements Document provided by EAO

 

The new seminar listing page which allows filtration by location, category, delivery method and date.

 

The Selected Seminars concept acts like a shopping cart, a familiar design pattern to most.

 

An interactive process flow diagram created in AxureRP to compliment the wireframes and specificaitons.

Surgical Wait Times

A common complaint throughout BC is about the long wait lists to receive surgery that can take anywhere from three months to a year. Most people just take their general practitioner’s recommendation for a surgeon without considering alternatives such as travelling to receive treatment sooner. The Surgical Wait Times website was created to give the public access to wait time information in order to empower them to make their own decisions regarding where and by whom to receive surgery. The site has valuable information, however was quite difficult to use for the average person. For this project, we were able to do usability testing with the existing tool and found that almost no one was able to easily understand the results table. Our job was to update the look and feel of the site to comply with modern Government style guidelines, as well as improve the comprehension of the results. After several rounds of usability testing and iterations, the new site can be seen here.

A mockup of the new homepage design.

 

The updated Find a Procedure Tool

 

HealthLinkBC

HealthLink is the British Columbia Ministry of Health’s primary public facing web presence. They provide non-emergency health information, tools and videos, a public health alerts feed, and much more. Most popular may be their ‘dial 8-1-1’ service, which connects residents of BC with nurses, dietitians, exercise professionals, and pharmacists 24 hours of the day. This project has spanned almost two years and is being completed in two phases. The first phase, now completed and built, included small updates to the IA and re-skinning the site to comply with the new ‘Gov 3.0‘ design guidelines (which Number 41 created before I started working there). The second phase, still in progress, is updating the search functionality to be more user friendly, and to incorporate location based results (Find Services) onto the main search results page.

During the first phase, I was responsible for creating an inventory of all page templates and content types throughout the site, and comparing them to design patterns already established by Gov 3.0 guidelines. This enabled us to determine what patterns we would need to come up with to accommodate all the content on the site. From there, we created thorough high fidelity interactive wireframes of the unique pages and elements, and a set of visual design specifications. Some challenges included showcasing enough content on the homepage, highlighting the Public Health Alerts, and improving the Medical Tests/Medication search pages. For the first round of usability testing, we visited communities throughout BC and walked them through a series of tasks that tested our solutions for these challenges. We found the same usability issues repeatedly, so were able to address them in the next round of design work. This was the first project where I really began to see the importance of usability testing as the issues we found I would have never predicted. In the final round of testing, we got much better results and very positive feedback.  By then we were confident enough with our design to hand off to the development team.

The second phase was much more challenging and interesting.  Our goals were to improve the quality of the results page, provide an alternative way to search outside of a query string, and incorporate the location based results. Being the lead designer for this phase, I spent time researching best practices for search results pages and found it to be an interesting topic. We went through several iterations of this design, gaining feedback internally as well as from the client along the way. Once we were happy with the direction, we again created high fidelity interactive wireframes of the new features and completed several rounds of usability testing. A very successful tool we introduced was a step through process to help guide a search (pictured below). During testing, we found that roughly half of the participants preferred the search assistant to a typical query search, and seemed thrilled that it was an option, citing that they would recommend the tool to friends and family.  This phase is currently being developed, I am looking forward to seeing our design in action once it is completed.

 

The first step in the project was to create a design element inventory of the site to ensure we had a grasp on all page template layouts and content types.

 

Desktop version of the homepage content slider

 

Mobile version of the homepage content slider; an accordion.

 

We created a ‘Search Assistant’ walk through to help users find information.

 

A redesign of the search results page ties in the location based results on the right, giving a more cohesive search experience.

Healthy Families

A project still in the works, the HealthyFamilies BC website re-design was an interesting project to be involved in. There were several issues with the current site, such as poor information architecture and lack of useful cross-linking. Goals for the project were to improve the IA and the browsing experience, as well as increase readability of the blog articles. It was a great opportunity to create personas, journey maps, and do usability testing throughout BC to guide our re-design efforts and ensure they met the needs of the target population. I was able to facilitate usability test sessions with a wide range of users including those for which english was a second language, elderly persons, and poorly educated individuals. Our team created detailed personas and corresponding user journey maps, and ensured our tests covered the needs of each of them. The tests involved a survey, a set of tasks to complete on the HTML prototype, and a follow up interview. We were able to do two rounds of testing, modifying our design in between which allowed us to test our solutions. In the end we delivered a high fidelity, responsive HTML prototype with a style guide and interaction design specifications.

Lisa's Journey - the primary persona used to guide the design process

Lisa’s Journey – the primary persona used to guide the design process

 

A screenshot of the homepage design. I assisted in designing the interactive panel pictured.

A screenshot of the homepage design. I assisted in designing the interactive panel pictured.

Track Group

Track group is a provider of devices, platforms, applications and services which enable corrections and law enforcement institutions to track/monitor convicts and suspects. Number41 was tasked with updating their existing TrackerPal application with a new look and modern interface, as well as add several new features. Playing a supporting role on this project, I helped design several screens and assisted with unique challenges such as creating a robust yet user-friendly dashboard. The app was commonly used out in the field so it had to be optimized for tablet devices. Starting with a substantial business requirements document, our team created interactive mock ups covering all the tasks and workflows involved in TrackerPal, and created a visual UI system from scratch.

The alpha wireframe stage when concepts were still being developed

The alpha wireframe stage when concepts were still being developed

 

After many iterations, we completed our beta wireframe deliverable

After many iterations, we completed our beta wireframe deliverable

 

An interactive HTML/CSS visual design style guide was provided to assist with development

An interactive HTML/CSS visual design style guide was provided to assist with development

Natural Resource Road Permit Application

A project we did for the British Columbia Ministry of Forests, Lands, and Resource Operations  called RRS (Resource Road System) was a complete re-design of the existing system used to process applications for resource road permits. The primary users of the application are geospatial technicians who evaluate proposed plans for new roads to ensure they don’t intersect with existing roads or illegally cross private land. The existing system they use, FTA (Forest Tenure Administration System), is also used for other types of tenures/permits such as timber harvesting permits. With plans to increase complexity to the road application process, the intent was to pull the road related functionality out of FTA and into a system of it’s own. Our job was to take the 200 page business requirements document, and translate it into a complete set of interactive wireframes and development specifications for the new web app. I was the lead UX designer on the project which spanned almost one year. The challenge in this project was learning the subject matter. In order to re-design the app, I needed to have expertise in the concepts and have an accurate mental model about the process, legalities, and technicalities of road applications. We went through many iterations of the design, continually getting valuable feedback from users and stakeholders. Alongside a visual designer and senior UX designer, we delivered a comprehensive set of interactive HTML wireframes of an app that we knew was well tested and carefully designed. I also created a detailed specifications document and process flow diagrams to hand off to the development team.

The original FTA dashboard, a starting point for processing applications and the most frequently used screen.

The original FTA dashboard, a starting point for processing applications and the most frequently used screen.

 

The front page of the business requirements document.

The front page of the business requirements document.

 

A process flow diagram provided by the client in the initial stages of the project.

A process flow diagram provided by the client in the initial stages of the project.

 

Final UI design for the dashboard screen created using AxureRP.

Final UI design for the dashboard screen created using AxureRP.

 

A static visual design mock up of the dashboard.

A static visual design mock up of the dashboard.

 

UVIC Co-op & Career Services

The University of Victoria recently underwent a website/brand re-design and is in the process of converting all of it’s sub-sites into the new UVic Edge design system. The Co-op and Career portal was notoriously unusable as it had a problematic sitemap with a lot of repeated or extraneous content. Our information architect did a comprehensive analysis of the content on the site and came up with a new sitemap with helpful cross-linking. The co-op and career department asked us to give them the necessary guidance to apply the new brand design as well as integrate the new sitemap. As the lead designer on the project, I created a design element inventory in order to select which page templates, elements & workflows were the most representative of the entire site, so we could create mock ups for a small sub-set of pages which would guide the rest of the design process.

 

Preview of a document which made recommendations for the re-design

Preview of a document which made recommendations for the re-design

 

The homepage design for the new site. Interactive wireframes made with AxureRP.

The homepage design for the new site. Interactive wireframes made with AxureRP.

Worker’s Compensation Board Alberta

Anyone could attest to the fact that going through the process of getting injured at work is a hassle for employers and workers. N41 was tasked with re-designing the WCB Alberta public facing website to make the information easier to access and to create a more friendly brand presence. I got involved near the end of this project to help to create a high fidelity prototype which was used for usability testing. In particular, I contributed to the design of the mega menu and the ‘Quick Search’ feature. This was the first project where I used AxureRP to build interactive HTML prototypes. I worked closely with a lead UX designer, visual designer and content strategist/information architect.

 

The final homepage design, an HTML prototype.

The final homepage design, an HTML prototype.