Case Study
OutdoorSmart
Case Study
OutdoorSmart
Designing a LMS/CRM platform which offered region-specific, outdoor activity licensing courses, across multiple sub-brands.
Background
What is OutdoorSmart?
OutdoorSmart is provincial outdoor activity safety educator and license issuer in Canada. OutdoorSmart had multiple sub-brands, such as BoatSmart and HuntingSmart, related to different outdoor activities.
Managing a wealth of data
Tracking customer lifecycles and region-specific course engagement, across multiple sub-brands, required a robust admin-dashboard. The dashboard needed to support region-specific course material, accomodate regional governing bodies, and help administrators identify additional user engagement opportunities.
Driving user engagement
Our main vehicles for encouraging course completion and cross-brand engagement were to gamify the experience and to offer a distraction-free learning environment. We also encouraged progress sharing as a way to increase brand and product awareness.
Highlights
OutdoorSmart (new) – An Ambitious Dashboard Component
The “Customer Lifecycle” dashboard component
An Ambitious Dashboard Component
The challenge was to design a dashboard which allowed admin users to manage customer relations, collaborate with staff, and track the customer engagement across multiple sub-brands in multiple regions.
One particularly ambitious dashboard component provided an overview of customer life cycles across the entire population of users, and allowed admin to generate mass customer communications based on specific phases of a customer life cycle and customizable user segments.
Segmented Life Cycle Representation
Every segment was represented in each phase by circles of varying sizes to communicate either dollar value, or total users from said segment, within the context of the customer lifecycle.
The segments, which we name Buckets, could be toggle and edited as needed.
OutdoorSmart (new) – Segmented Life Cycle Representation
Users were segmented into customizable “Buckets”
OutdoorSmart (new) – Robust viewing interface
Linear lifecycle navigator and phase display selector
The lifecycle component in the dashboard was limited to two phases, due to the available room on the page. In the Customers section, the admin could view up to 3 phases and 3 value groups at one time.
Second viewing dimension segmented the users into value tiers
Robust viewing interface
The Customer Lifecycle dashboard component allowed admin to focus on 1,2 or 3 phases at a time in a given lifecycle.
The linear context nav component adapted to the number of phases being viewed as an additional context indicator.
A second dimension was included to segment value tiers.
Nested Life Cycle Phases
The component also supported a supported a 2-tier lifecycle phase structure, where the admin could drill down from a view high-level phase, such as Registered and Engaged in Course, to second-tier phases such as Lesson 1, and Practice Exam.
A breadcrumb style navigation reflected context within the phase tiers and allowed the admin to zoom back out to the first-tier view.
OutdoorSmart (new) – Nested Life Cycle Phases
A breadcrumb style navigation reflected context within the phase tiers and allowed the admin to zoom back out to the first-tier view.
By Clicking the zoom icon, admin could drill down from a view high-level phase
OutdoorSmart (new) – Gamifying the End-User Dashboard
Circular progress bars were used to echo the badging system and create a more visually appealing infographic
Engagement badges
Progress sharing call to action was a top priority in the enduser dashboard layout
The end-user dashboard for desktop
Gamifying the End-User Dashboard
We wanted to make platform engagement as fun for the users as possible, so we decided to gamify the experience.
Badges were already a popular gamification technique, and we decided to leverage it to incentivize platform engagement. Additionally, circular progress bars were used to echo the badging system and create a more visually appealing infographic.
To help drive brand awareness, the progress sharing call to action was given high priority in the dashboard design.
Region-Specific Course Material
The admin can choose to view standard or region-specific content using the dropdown at the top of the page.
By selecting a region the admin is presented with all of the standard course material. They could then modify any existing standard content or add additional content as required for a given region. Content Unique to a region was flagged with a star.
OutdoorSmart (new) – Region-Specific Course Material
OutdoorSmart (new) – Facilitating Collaboration
Sidebar commenting component.
comments dialogue ui (early prototype)
Status icons
Facilitating Collaboration
In order to accomodate reviews by regulatory bodies, and facilitate staff collaboration on course material, we designed a commenting component for the course editor sidebar along with various status markers.
This allowed the content to go through the any necessary review phases before it gets published.
The Learning Environment
The platform needed to provide a distraction-free learning environment, while allowing quick access to the course overview along with related lessons & course modules.
We decided to completely hide the main dashboard navigation while the user was engaged in a lesson, and added an icon to open it.
A course overview and navigation sidebar was also created. This sidebar was hidden for tablet and mobile users just like the main navigation, however, looking back I think we should have offered this function to desktop users as well.
OutdoorSmart (new) – The Learning Environment
Reflections
Process is Paramount
With a system this complicated, it was important to go through each of the steps in the design phase with extra diligence. The system had to be robust enough to facilitate creating courses across a collection of sub-brands, so each step was essential in understanding the both product we were building and the people who would be engaging with it.
Coming from an art background I would get lost in the details of the aesthetic before focusing on entire design process. Once confronted with a more complex project I soon grew familiar with, and very appreciative of, the product design process: personas, info architecture, user-flows, wire frames, and only then high-fidelity mock ups.
Reflections?
Lorem ipsum dolor sit amet – h3.h2
Lorem ipsum dolor sit amet labore cras venenatis.
Lorem ipsum dolor sit amet – h3.h2
Lorem ipsum dolor sit amet labore cras venenatis.
