Redesigning Continu's most important feature Learning Tracks.
My role: Product Designer.
The tools used: Sketch, Adobe CS, and Principle.
The team: Continu's CEO, one front-end engineer, three back-end engineers, and one product designer (me).
Overview
The Challenge
Continu, the learning software for modern teams used by companies such as Eventbrite, Steward Weizman, and Go Pro; while it was not a clunky legacy system of the past, it was in need of redesign as a whole. The challenge was to gradually update the platform, by starting out with it's most important and used feature "Learning Tracks".
The solution
Redesign this critical featured based on data, feedback, and a genuine understanding of what Continu's customers genuinely want out of the Learning Tracks and Continu as a whole, as to think ahead when rolling out additional changes to continue improving the rest of the platform.
Scope
After several meetings with Continu's CEO and engineers, it was agreed that we were going to try to gather feedback to understand major pain points, produce design work, and develop in about 1 month. Given the complexity and many use cases involved, this was a very ambitious challenge to say the least.
Research
After a clear understanding of the problem and what we’re trying to build as a team, I was ready to embark on the research phase.
Research Goals
From a content-creator's perspective:
-
Determine specific pain points when building learning content
-
Identify what might look like the ideal building blocks for different types of companies using Learning Tracks within Continu
From a learner's perspective:
-
Determine specific pain points encountered with content created
-
What is the ideal format, amount of content, and time-frame for different use cases when learning inside the platform
Looking for inspiration
Looking at the market there are several learning platform solutions that can offer revealing clues into what might be working and what might not.
Customer Interviews
A great positive was having access to Continu's high profile customer's such as Nitro and Eventbrite. I conducted a handful of user testing sessions which revealed many experience problems leading to the following key findings that needed to be addressed:
-
Poor navigation across the board, specially between sections
-
An unclear understanding of which steps have been completed and not
-
Too much clutter and lack of hierarchical information
-
A visual design experience that feels outdated
Design
After taking a careful look at several platforms with similar offerings, gathering info on the user's pain points, and discussing with the team, it was time to get some ideas on paper and screen.
User flows and task flows
Considering the many use cases, multiple user flows and task flows were developed as part of the design process. Below an example of a task flow for creating a learning track.
Sketch Design
Translating both user flows and task flows for the many use cases was the most challenging part of this project. Below a few sketches of some of the screens produced for this project.
High fidelity prototypes
Below, the results of exploring multiple iterations, conducting user testing sessions with Continu's customer's and discussing with the team what's feasible and not from a development standpoint. Low Fidelity prototypes were tested and given the green light to push forward internally and externally. Having these screens allows the marketing and sales team to present an almost entirely new product.
From Continu's Blog
A whole new learning experience
"If it's one thing we've learned, it's that providing users with a great experience will have them coming back time and time again. That's why today we're thrilled to launch an all new version of Learning Tracks and a new look across all content views in our effort to provide an even better Learning Experience.
Let’s take a quick look at some of the new changes. 😎"
From Continu's Blog
Make your learning tracks look beautiful
"Just like with other content, you can now add beautiful large banner images to your tracks to give them the attention they deserve and help them stand out. Existing Learning Tracks without banner images will fallback to your default brand colors so they remain looking just as great."
From Continu's Blog
An immersive content experience
"We've removed all distractions to allow learners to have a fully immersive learning experience. Content is more focused and learners will see only what they need to pay attention to. Individual content views have a brand new look to make it even more enjoyable to read articles or watch videos."
From Continu's Blog
Easier than ever to navigate
"We've overhauled the entire navigation system to help users easily understand where they are within a Track as well as what's coming next. It's also even easier to pick up where you left off with the new 'Resume' feature that always shows where you were last, and just as easy to navigate on desktop, mobile or tablet."
Additional Sections
Considering the many use cases, it was important for example to think thru how would a page on learning tracks look like with no imagery, avatar, or content. Additionally, sharing, liking, @mentioning, were also important to consider cross-platform-wise. Below some of the many sections re-deisgned, including the "Quizzes" page section was given a quick visual design face lift.
Landing page with default branded colors, and no avatar.
Article: Scroll, Sharing, and Liking Content.
Article: With image and text.
Quizzes: A last minute visual design improvement, to match these updates.
Circling back with users
Circling back with users once again, I wanted to validate the final designs and see how they felt about their initial concerns regarding navigation, completed steps, focus, and visual design overall. The feedback was positive across the board, despite having a few things lost in translation from design to development which we intended to work on as team to polish things out to pixel perfect design.
Bonus: Smart Search
We continued looking at other areas that needed design improvements, and one of them was "Smart Search". Smart Search would allow users to see content relevant to them, and filter by more than just location and category. Also, admins would be able to segment content, assign content to segmented groups, and see which content is assigned to segmented groups. Below, a look at Smart Search using Principle.
