Overview
Shopify Learn hosts video courses for entrepreneurs. Behind it sat an internal CMS that engineers had built and no designer had ever looked at. It was confusing for non-technical users, so every course needed developer help to go live.
My role
I championed end-to-end UX for this project. I audited the current experience, mapped out the platform's information architecture and proposed a simplified workflow. I created a component prioritization matrix to separate must-haves and define the MVP scope, rapid prototyped designs and shared a UX recommendations deck with stakeholders for feedback. I kept iterating while keeping everyone in the loop, kept the designs within the Polaris design system, and worked closely with engineers to ship the MVP to production.
The team
UX (me)
End-to-end design, from audit and IA to the shipped MVP.
Course producer
Highlighted key pain points and needs, and walked me through the current workflow for uploading courses.
Content strategist
Helped with content needs and brainstormed ideas and information architecture.
Product manager
Aligned the goals and scope, and answered product questions, constraints and concerns.
Staff engineer + eng intern
Built the MVP with me, and answered engineering questions, constraints and concerns.
Context and goal
Uploading or editing course content on Shopify Compass (now Shopify Learn) needed the Education team and developers to work together. The process took several days, and the CMS had many usability issues for anyone without a technical background.
Goal
Find the key problem areas and build an MVP workflow that lets course producers upload an average course within a day, without any dev support.
- Success criteria
- Adoption of the CMS across all course producers.
- A course producer can upload an average course in a day, without dev support.
- Constraints
- Used by the internal education team, so we focused on an MVP instead of adding too many features.
- Videos and transcripts lived in the Wistia player, since a native player didn't exist yet.
- No UX research involved, as it was an internal product.
Research
Understanding the problem space
I worked with course producers to map out the current workflow and every step involved in uploading a course. Then I identified the key issues and proposed a simpler flow.
The biggest issue: courses are written top-down (course, module, lesson, video), but the CMS made producers build them bottom-up, uploading videos first and then re-opening the course again and again to attach everything. In the proposed flow, existing videos can be added right inside the lesson form using their Wistia ID.
Research
Auditing the CMS
I audited the existing information architecture and UI, and noted observations, opportunities and questions to share with stakeholders and get more clarity on the problem space.
Themes for the MVP
Content creation
Content is planned course → module → lesson → video, but the CMS made producers build it in reverse.
Import and automation
Producers used a .yml file to upload content quickly, which pointed to an opportunity for automation.
Finding content
As the library grew, finding a specific course again was slow, with no search, sort or filters.
Editing content
Long forms, unclear required fields and lost progress when leaving a page.
Previewing content
Only individual parts could be viewed, so visual bugs were hard to catch before publishing.
Scope
Defining the MVP
To agree on scope as a team, I created a component prioritization matrix and rated each idea from the UX, dev and content perspectives.
I also ran a quick competitive analysis of platforms like Udemy and Vimeo to understand how they structure video content, text editors and overall IA.
Version 1
Rapid prototyping
With a clear view of the problem space, workflow and scope, I started exploring designs for the MVP. These are early V1 explorations next to the screens they replaced.
Iteration
Feedback
After sharing the designs with the team, the feedback shaped a leaner MVP:
- We descoped importing for the MVP, as it added too much engineering scope.
- We simplified search, sort, filters and actions (publish, unpublish and archive).
- Inline structure and grouping made content easier to scan and more accessible.
- We simplified adding modules and lessons, since the proposed design added engineering scope.
- Minor UI and content fixes, like dropping the asterisk on required fields.
Next, I iterated on the designs, shared a new deck with the final improvements to get alignment and push for build, then worked closely with engineers throughout the build to handle edge cases.
Version 1 → final
Revisions
Course list
Descoped importing and bulk actions, and simplified search and sorting into one search field and a sort menu.
Edit course
An inline structure for card content, with better grouping and tags and categories right beside the course details.
Modules and lessons
Simpler adding of modules and lessons: name a module inline, then add lessons to it.
User flows
I mapped the final flows for adding a course overview, modules and lessons, covering states like drafts, manual video uploads and existing videos.
Final design
The shipped course upload workflow, built on Polaris.
Outcome and learnings
Outcome
The MVP shipped, and course producers could upload courses within a day without any dev support, proving the new workflow more effective.
Collaboration
How to collaborate effectively with a PM, engineers and other stakeholders.
Prioritizing an MVP
Using a component prioritization matrix to rank features and align on scope as a team.
Deciding quickly
Making quick decisions on edge cases that came up during the build.
Internal tools matter
Improving internal processes can help the whole product grow.
