Revamping the page editing experience
Designing a WYSIWYG website builder
Problem
Teachable website pages are the main discovery and sales tools we give to creators to help market their products to prospective students. However, only 23% of creators actually use this tool.
With the current setup of our page editor, there are a handful of issues:
It is difficult for a creator to discover blocks - most creators only use the 6 default template blocks.
Creators are unable to immediately see the updates they’re making to the page - they have to toggle between editing and previewing tabs, which lengthens time publishing experience.
Saving content is not a clear experience - over 200 creators have written into support reporting that they have lost all of their unsaved changes.
Understanding the user journey between creating pages and publishing them - with no tracking on the old editor, we are not truly understanding how our customers are using it.
Our creators agree:
“For 2019 it's a disgrace. It's ugly, super basic, non-responsive and volatile. I think that compared to the kind of web creation software out there it damages the Teachable brand to no end. Sorry to be so blunt but this aspect of teachable is by far my least favorite! :(“
“Your page editor is absolutely horrible. It's full of glitches, and is completely outdated. Other online course platforms have WAAAY better options than you. The only reason I haven't switched is because I can design wordpress pages.”
“It's super glitchy and unreliable. I use the page editor often to refine our sales pages. It takes hours to complete a simple update or task like fixing a spacing issue, font, or bullet list. My edits DO NOT get changed or updated all the time (even when saving constantly), meaning I have to toggle between the preview 100 times OR attempt to adjust the HTML code editor which I'm not a pro at doing. If you could fix just one thing to make life easier today and save me hours of work, it would be to fix the page editor.”
Desired outcome
Our goal is to create a cleaner UX/UI to make page-building easier, faster, and more customizable for our creators.
High level goals:
Increase average customer retention rate
Streamline the page-building experience and increase discoverability of blocks
Increase usage and customer satisfaction
Decrease time to publish
My role
I joined the project after the hypothesis was already established. From that point, I led research and design along with a project manager and a team of engineers.
Final Results
Before Screenshots
Some ideation and exploration artifacts
A few (very) preliminary observations
The editor is slowly being released to specific cohorts over time. The first cohort to receive the new editor for all pages are new users or new schools. Legacy users now have access to the new editor for their site-wide pages.
“Loving the new features it really helped me in organizing the curriculum and pages! Looking forward to seeing the evolution of teachable!” - From a user who started a new school with the new editor
Overall, creators are getting to their first sales faster, time to publish is decreasing, and creation of pages with the new editor is increasing. We are constantly monitoring these metrics to watch trends.
Next steps
Keep tracking data and usage
Continue to rebuild remaining blocks used in the old editor to establish parity
Increase value of the new editor by introducing new features and customization