project case study

Alberta Motor Association (AMA) Web Application Design



The Challenge

Alberta Motor Association (AMA) is one of Alberta’s largest multi-service organizations, boasting a list of over 950,000 members. One of the services they offer is driver training education, and the web application they use to manage their entire province-wide driver training program was in dire need of a reinvention. We came in to help with this reinvention from a user experience & user interface perspective.

The Solution

The rebuild of the web application – dubbed EDEN – had been in various planning stages for 3 years. We were able to use the outstanding initial research & workflow planning work, pair it with an agile work methodology, and deliver paper prototypes, clickable prototypes, user testing, branding, user interface designs, front-end development, and documentation for development in only 8 weeks.

Key Project Features

  • UX
  • Workflow Mapping
  • Paper Prototyping Workshop
  • Clickable Prototypes
  • User Interface Design
  • Visual Identity Design
  • Front-End Development
  • Agile Workflow

The Details

AMA’s existing driver training management application – awesomely named Driveulator – had run its course in terms of meeting the needs of the variety of users interacting with the system. Workflow inefficiencies were glaring, and the potential risk of Driveulator as a system to manage one of their larger & more complex services to AMA as an organization was considerable.

AMA had been working on this project for 3 years, primarily from a business analysis level, before they came to us. It became clear immediately that in order to re-spark the motivation of the team – including CSRs, MSRs, and others using the existing application daily – we need to show some tangible movement on the project quickly. Further to that, we knew that we needed to truly listen to the core users of the software and let them steer requirements. After all, who knows what they need better than the people using the application daily?

paper prototyping

Paper Prototyping Workshop

Armed with that knowledge, we dug into research & testing of the existing application in order to give ourselves a baseline level of understanding. That led into a half-day, inclusive paper prototyping session with over a dozen AMA employees, wherein we broke into groups and iterated on core workflows quickly.

This workshop was an extremely efficient way to immediately start defining the key pain points and potential paths the new application could take, while also showing tangible project progress. Further to that, it helped the team bond, and helped AMA employees have ownership over the product, all the while communicating to staff that we were there to listen to them and build what they wanted.

web app wireframes

Sprints & Clickable Prototypes

The outcomes from the paper prototyping workshop allowed us to shift into two-week sprints. In the first week of a sprint, we developed clickable prototypes for 2 chosen workflows, using Sketch & Invision, that were tested on the Friday. The following week was reserved for improving the workflow prototypes based on the feedback from the previous Friday’s user testing. At the end of week two, we sent over the revised workflows for internal review by AMA – then started up a new 2 week sprint on new workflows the following week.

Without a doubt, this method of working was the singular most efficient way of tackling a project like this. It allowed for a fast – but reasonable – pace; actual clickable testing; user feedback; and iteration. In a short amount of time we were able to make huge strides in the project.

Visual Design & Documentation

Once workflows had been tested by users, iterated, and signed-off on, we moved into another sprint — but this time on visual design. By planning ahead during the prototyping stage and using Sketch features like symbols, our design team was able to easily design assets which then updated across all screens and workflows that used that asset.

This method of working meant rework was minimized – and when paired with the AMA brand guidelines and the thoughtfulness that went into prototyping, visual design was able to move quickly.

Given the updated name — sadly, Driveulator went the way of the dodo, to be replaced by EDEN – alongside the entire web application redesign, the project required a new logo as well, which we delivered in conjunction with the UI designs. The end result is a beautifully modern and usable reimagining of their driver training management application; a visual layer that aids the completion of objectives and all-important usability elements like user feedback.

ui documentation

At this point, we delivered our completed screens and workflows, alongside documentation for development, to AMA’s internal web team. Given the scope & complexity of the EDEN application — we designed & delivered over 80 views, which only covers core workflows — proper documentation of the interfaces was as important as the UI designs themselves. With that in mind, we set AMA’s dev team up for success with detailed, point-by-point documentation per delivered view. Shortly thereafter, AMA came back to us to hired us on for front-end development of the screens in order to give their internal development team a head start, which allowed us to aid usability via interaction design and more.

Overall, the EDEN project was yet another reminder that listening to users and adopting an agile workflow is an outstanding way to build a highly user-friendly application in an extremely efficient manner. It’s also great to be to come in and make an impact in a short period of time, and re-invigorate a team that relies on this software to do their jobs. That’s what it’s all about!

contact us

Let's make something amazing together.

Interested in working together, or maybe just having a conversation? We’d love to hear what you have in mind, and answer any questions you might have. Let’s make whatever’s rolling around in that brain of yours happen.

Onwards to view The Next Project →