When LearnCore was acquired in 2018, there was a 9 month rush to "integrate" the products. This left no time for the previous designer to fully do research and validation on the first version of the integration.
1. Create consistency in overall visual design
2. Align product concepts and architecture
3. Make sure UX and behavior patterns are cohesive
4. Reduce Coach and platform customer complaints
Showpad "Coach" product consists of 4 major facets. Each facet, has a primary user persona.
➕
Creation
The creation of course and training materials done by the admin persona.
📚
Storage
The storing and management of training materials done by the admin persona.
📝
Consumption
The consumption or taking of courses and training done by the sales rep persona.
📈
Insights
The insights and data compiled from learners or reps and surfaced to their sales manager.
A product comparison was done between LearnCore (aka Showpad "Coach") and Showpad "Content". Through analysis, parallels, concepts, and gaps were identified.
- drag and drop interaction
- "builder" layout
- side panel
- wizard like interaction
- tabbed layout
- accordion/sections
- does not use DS components
- proper data table w/ filtering & sorting
- tabbed organization
- side panel for detaills
- list with coloumns
- filltering and sorting is separate from the list
- expandable accordion for details
- does not use DS components
- detail side panel on the left
- navigation arrows in content area
- navigation/detail side panel on the left
- navigation arrows in the header
- does not use DS components
No "Content" counterpart for insights available. Below are examples of the old interface.
View of all team members' assignments
Aggregated view of all team members' course status per a course
Aggregated view of all team members' test answers per a course
Initial research interviews were done to understand the pain points users experience with the current implementation of all 4 products.
Simultaneously we were also getting tickets from customers reporting some of these issues themselves.
With this feedback we used it as a basis to validate a need for change & alignment while also considering for some specific use cases that the "content" product has not accounted for.
Meeting recording of user interview on the new course builder product before release
Excel sheet compilation of all the feedback per question across all users
Feedback Themes
Creation:
Ineffecient flow; steps are linear and require saving after each single one.
Users want to a tool to build/draft them faster.
Storage:
UI is very confusing and doesn't not aid with findability. Cross platform users are used to the content library UX and have to shift mindsets/learn a new pattern to use coach library.
Consumption:
Users often miss the previous and next arrows in the header to navigate through learning content and use the sidebar instead. They believe they are complete but the UI is not which is confusing.
Our customer's course creators actually ended up custom designing the first page to instructing users to use the top arrows... 😬
Insights:
Managers wanted more user centric insights. The current insights spoke more towards the admin persona. The UI seemed "dirty" due to the overuse of shadows.
Parallels were drawn to identify opportunities for alignment. Any similar concept was should exist in the same place and behave the same way.
a few examples
Concepts
Containers
Page: a container to hold media, text, etc components
Course: a container to hold similar but also tests & PitchIQs components
Components
Page: text, gallery, assets, pages, experiencese, spacer, button , video
Course: section, lesson, test, survey, PitchIQ
Layout & Architecture
Comments
Page: tab in side panel next to details
Course: calls it "discussion" button in header
Info
Page: calls it "details", tab next to comments. DS section components
Course: no name, in side panel. One off legacy "boxes".
With all the feedback and defining done, I took those into account when mocking up extensive flows, covering edge cases and being as detailed as conveying to developers how certain features should behave and animate.
ex. of mocking drag and drop zones and interactions for developers to translate into an interactible POC for testing.
ex. of extensive flow mocks
Playtests and Beta testing take place after every feature is implemented to catch bugs, odd behaviors etc before it is shipped to all users/customers.
Comparison of Content product with Coach after the alignment work on all 3 features. As you can see, not only is the visual language more unified, the flows and interactions also match up much better than before.
Coach (Mobile)
%20Mobile_My%20Team_01.png)
