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: 

  1. It is difficult for a creator to discover blocks - most creators only use the 6 default template blocks. 

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

  3. Saving content is not a clear experience - over 200 creators have written into support reporting that they have lost all of their unsaved changes.

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

blockdiscovery.png
ty.png
sitepage-3.png

Some ideation and exploration artifacts

IMG_3890.JPG
IMG_2186.jpg
IMG_2544.jpg
IMG_3894.jpg
IMG_3889.jpg
IMG_2334.JPG
IMG_1152.JPG
block-explorations
 

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

  1. Keep tracking data and usage 

  2. Continue to rebuild remaining blocks used in the old editor to establish parity

  3. Increase value of the new editor by introducing new features and customization