Welcome to Learnings. From SeekOut Grow
An all-in-one destination to discover online courses and learn your next skill.
Overview
Project timeline: 3 months
Roles: Lead Product Designer
Project Type: Full Time
Introduction to SeekOut Grow
SeekOut Grow assists companies in recognizing their internal talent's skills and discovering career prospects within the organization. It stands apart by continuously developing a deep understanding of each employee's background and abilities. Utilizing AI-driven matching, it identifies growth opportunities, empowering both companies and individuals to reach their full potential and find new career paths together.
What is SeekOut’s Learnings feature?
Learnings is a feature within SeekOut Grow where we took 5 LMSs (Learning Management Systems) and compiled them in our platform so users can playfully explore, search for, and discover courses to up-level any skill they wish to improve upon. Think of it as a one-stop shop for finding any online course you’d like! Below are the 5 LMSs we integrated into SeekOut Grow: Udemy, Cornerstone OnDemand, Docebo, Percipio, and O’Reilly.
Kicking it off
Why build this? What problems were we trying to solve?
Employee Growth:
Gives employees opportunities to grow and expand their knowledge - and in turn their horizons. By improving existing skills or learning new skills, employees can make actionable progress towards the next steps in their career growth.
Employee Retention:
Increases retention by allowing employees to develop, grow, and explore in their current company and role. Employees can see new paths unfold ahead of them based on their increased knowledge and skills.
Productivity:
Increases the productivity of employees and a company overall via up-skilling or re-skilling the workforce to stay current and competitive as innovations are introduced, and the market or industries shift.
Product Roadmap
With the Principal Product Manager, I worked closely with, we worked on a comprehensive roadmap that defined exactly what would be included in this feature along with key milestones along the way.
Engineering Scope
In any product development process, considering the engineering scope is crucial, and in the case of this feature, the involvement of engineers was particularly important. Why? In short: data.
Each Learning Management System (LMS) houses distinct data related to its courses, including attributes like length, ratings, descriptions, images, and more.
However, the integration of all these LMS platforms proved to be more complex than a simple "plug and play" approach. Consequently, in collaboration with our backend engineers, we meticulously crafted a comprehensive document outlining the diverse data elements from each LMS that could be seamlessly integrated into SeekOut, leveraging the available API. A sample of that document is attached below
A portion of the extensive API documentation I worked on with our engineers.
And before we begin, a few more major considerations
Courses vs Learning paths:
Learning paths contained up to 5 courses, so the question was how to handle this. How do we search and filter for both courses and learning paths on the same page? Or do they exist on different pages? Since each has different data sets and unique facets, it was a difficult problem to solve.
Pushing the norms:
I came into SeekOut Grow working with legacy designs and there was a lot of hesitation by the team at large to explore new territories. So how we do I walk the line between elevating the experience while keeping stakeholders onboard and feeling safe?
Balancing business objectives
We wanted to get this out quickly, but as a designer, my role was to advocate for balancing delivering products quickly for validation vs. making the product good enough for productive feedback. So to optimize for both speed and quality my north star was to do less, but better.
Early wireframes
The search page wireframe
Do we separate courses from learning paths in different tabs (left-hand wireframe)? Or do we keep them on the same page but give learning paths a distinct section (right-hand wireframe)? These were two options I brought to the table as I presented initial ideas to stakeholders.
Course details page wireframe
Once the user clicks on a course card, what’s the details page like? The version up top utilizes the same layout we use for SeekOut Grow’s job posting page, so I wanted to bring an “easy lift” version where we simply re-tool an existing UI for this feature.
The bottom is a new concept where we turn the details page into a modal. This was my preferred pattern as a modal offers an ergonomic experience where the user never has to navigate away from the main page – they simply have to close the modal to go back to search. It’s no wonder why products like Netflix use it.
Learning path details page wireframe
As a reminder, learning paths group numerous courses to create an entire learning journey. So the question became, how do we show what courses are included within a learning path? These are two possible concepts: the first is a carousel of course cards contained in a modal. The second is a more unique concept: when the user clicks a learning path tile, it expands dynamically to show all the courses on the search page.
But…
After presenting all of these wireframes, receiving feedback, and doing my own reflection I began to have some major hesitations and realized all these wireframe concepts were representative of a deeper problem at SeekOut Grow. So I hit the brakes and discussed these issues with the VP of Design.
SeekOut Grow’s Current Problems
A paradigm of “it will do”.
Often, the ethos was “just get something out the door". This meant doing things like:
Bolting new designs onto old foundations
Reusing old patterns that were broken
From the moment I joined, these were the themes, and the expectation was to rush and ship something without putting proper care and time into it. This had a myriad of downstream consequences. Most notably we designed ourselves into corners because we weren’t future-proofing, and the rush to get as many things out the door created an experience that was an inch deep and a mile wide.
Not understanding the user
If you pause and get to know the user, SeekOut Grow’s features often tilt more B2C than B2B (yes we were selling to businesses, but the actual users were their employees), but we were designing a solely pragmatic B2B-esque experience.
We weren’t taking into account the fact that a good product in this domain also requires a level of delightfulness. It’s not only a utilitarian tool.
Customers called Grow’s original designs “outdated, not interesting, not engaging”. Ouch.
Speed trumped design “MVP, MVP, MVP”
MVP is a popular catchphrase, and for good reason – MVPs are essential to test out ideas. An MVP still needs to be good enough to be test-worthy, but because we wanted to move SO fast the MVPs we were testing simply didn’t have the goods for users to come back with productive feedback. Why was this happening?
An attitude of “FOMO” made us FAST but we lacked a north star. There are lots of competitors in this space, so we always wanted to be first in line.
This grew into a culture of simply feeding engineers vs handing off the best designs.
It turns out good ideas need breathing space, and an obsession with “moving fast” and a fear of spending the proper resources towards good design can be poisonous. A great quote from Ralf Speth, the CEO of Jaguar Land Rover, sums up the consequences perfectly: "If you think good design is expensive, you should look at the real cost of bad design!"
Finally, a product with no identity
This seems a bit nebulous, so what does it mean?
A well-crafted product has an identity, a style, a behaviour, and a voice.
Remember the feedback we received that SeekOut Grow felt “outdated, not interesting, not engaging”. Yeah, that’s what I mean about having no identity.
Good design means users remember it, talk about it, and can envision it when they’re not even using it.
My proposed solution
Make it engaging.
Don’t simply make this a mechanical search and filter experience, make it an explorative, media experience. Think Spotify, Netflix, and Apple Music. It’s more than just a cut-and-dry tool!
Let’s explore new ways to add new, lightweight patterns for filtering and exploring that go beyond the boring filter panels or dropdown selections
Also, let’s bring in some movement. Make it dynamic.
Make it delightful.
Let’s elevate the UI. We need to wow our users with a refreshed look. We have to listen to the feedback where users have been saying our interface looks outdated and boring.
This means bringing in more colour, imagery, and illustrations
Also, we have to be okay with building new components that uplift the experience. We can’t keep retrofitting old, outdated components.
Make it useful and easy to use.
The current SeekOut Grow experience was convoluted and made it difficult to accomplish the actual goal. It was designed by a bunch of engineers, and the UI reflected that.
With this feature, we need to break that trend. The experience needs to account for the casual user and the more serious user
And our results
Some example screenshots of our final designs
Walkthrough of designs
The Home Page
The home page for Learnings is now an explorative, media experience. Examples:
The addition of quick filter pills allows users to quickly toggle through unique categories.
The addition of custom sections like “Recommended Courses”, “Highly Rated”, “Short Courses”, etc, gives the user a curated, personalized experience.
All these additions create a delightful experience that gives this feature a personality. It’s more than a search engine, it allows users to discover courses that they may have not even known they wanted to take in the first place.
I designed a new tile that brought a modern feel to the page, which was later re-used throughout the product.
Also, the UI in general looks SO much cleaner.
The Search Experience
Once the user types in a keyword or selects “All Courses”, they’re taken to an easy-to-use Search & Filter page.
After about a 2-second delay the “learning paths” tile appears with its unique purple UI. The delay was added to bring the user’s attention to that card as it appears after everything else.
All in all, this page is simple and easy to use. We consciously decided to minimize filters and unnecessary controls to make it a friendly experience.
Learning paths
We spent considerable time thinking through where to place learning paths (e.g. in a different tab?), but we eventually settled on keeping it on the same page as the course cards. Some more context:
Keeping it all on one page gives it default visibility.
That said, we couldn’t simply list out all the individual learning paths as the page filters only apply to courses. For instance, the “duration” filter that applies to a single course is irrelevant to a learning path as the latter contains multiple courses. Therefore, we needed learning paths to be compartmentalized where only the key-word that was searched for is relevant.
Once the user clicks into the learning path category tile, they’re greeted with a popover where all the individual learning path tiles expand in an animated fashion. I did this to bring in movement and a playful feel. Additionally, the popover eliminates the need for the user to leave the page.
Within the learning path overview page is a clean UI that utilizes white space. It also includes a carousel where they can see the courses contained within the learning path.
Course Overview
Contained within its modern UI, the course overview page sheds light on the most important evaluative measures. Metrics like rating, duration, an overall description, and skills the user will gain.
Additionally, I designed a section called “Associated Learning Paths” that identifies which Learning Paths this course is a part of. It is contained within an accordion where upon opening, a carousel with all the courses in that Learning Path is contained.
How did we measure success?
Adoption (even just 1 customer!)
We were working to deliver this feature to a New Relic so they would start using SeekOut Grow... And, to our great relief, we succeeded! Thanks to the hard work we put into Learnings, we won a second major customer
Happiness
Engagement isn’t enough, what’s even more important is whether or not customers are enjoying using it. If I had stayed at SeekOut longer I would have tested this by holding customer feedback sessions.
Did we elevate the entire product?
As I discussed throughout this project, SeekOut Grow fell into the trap of creating a product that was an inch deep and a mile wide, creating a fragmented, messy experience. But this new feature set a new high water mark – it’s clean, modern, easy to use, playful, and gives SeekOut Grow a personality.
Engagement
Exact numbers are hard to come by as I left SeekOut soon after shipping this feature, but initial results after release were very positive. New Relic informed us that approximately 5% of their employees had taken at least 1 course through our new platform.
Am I proud of it?
It’s very subjective. But if I’m not proud, then something went wrong.