shipped work

Showpad "Coach" Integration

Aligning UX and UI between a recently acquired "coach" product and Showpad's main "content" product.
Lead Product Designer
project duration
4 major projects over 2 years
team capacity
1 PD, 3 FE Eng, 2 BE Eng, 1 QA
Sketch, Zeplin, Jira, GSuite
LearnCore is a sales training software that was acquired by Showpad in 2018. Before I joined the team, a first pass at "re-skinning" LearnCore's UI to better align with Showpad's product was made. However there was more to be unified, not only the visual language but also underlying UX patterns and incoherent product logic and behaviors.
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"
Showpad "Coach" product consists of 4 major facets. Each facet, has a primary user persona.
The creation of course and training materials done by the admin persona.
The storing and management of training materials done by the admin persona.
The consumption or taking of courses and training done by the sales rep persona.
The insights and data compiled from learners or reps and surfaced to their sales manager.
Identifying Gaps
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
Old design for team "insights"
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
Understanding the Space
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

Ineffecient flow; steps are linear and require saving after each single one.
Users want to a tool to build/draft them faster.


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.


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... 😬


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.
Drawing Parallels
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

Page: a container to hold media, text, etc components
Course: a container to hold similar but also tests & PitchIQs components


Page: text, gallery, assets, pages, experiencese, spacer, button , video
Course: section, lesson, test, survey, PitchIQ
Layout & Architecture

Page: tab in side panel next to details
Course: calls it "discussion" button in header


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
Testing Before Shipment
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.
Live Product Demo
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 (New)
Coach (New)
Coach (New)
Coach (Mobile)
Business Impact
This effort has helped move the coach product more closely with the rest of the platform, amplifying that Showpad is strategically a platform solution. The small but mighty UX improvements and alignment have significantly decreased the amount of incoming tickets from customers.
Back to Top