Cover Image for  Web Stories for WordPress

Web Stories for WordPress

First time Use Experience and Pre-publish Checklist redesign.


What we did
  • Pre-publish Checklist redesign
  • Improvements in First Time Use Experience
  • Heuristics for default text color depending on background color or image (Color Contrast Accessibility).
Industry
  • Search
  • Advertising
  • Publishing
  • Media

Intro

Web Stories for Wordpress is a plugin developed by Google to make it easy for WP users to start creating Web Stories that Google started promoting in search results. As part of the SumUX team in Huge and Lead UX Designer for this project I led the redesign of the First Time User Experience, Pre-publish Checklist and other improvements to the user experience to make it easier for creators to publish amazing-looking stories that are accessible and easy to discover.


Challenge

Google had been working with Huge for a couple of months on this project before I joined the team. At the time I joined the Web Stories for WordPress team the main focus was on helping creators publish high-quality content.


Solution

With new templates, a Pre-publish Checklist with design, content and accessibility suggestions and some improvements in the user experience when users added new type elements, we managed to improve the user experience for first time and general users. My main contributions were the UX and UI for the Pre-publish Checklist, a prototype with a few ideas that were implemented to improve the First Time Use Experience, and heuristics for defining the default text color based on the current background.


Benefit
  • Users are now able to have both checklist and object properties open at the same time.
  • Users are no longer shown a challenging blank canvas when opening a new file. Now, they can see an empty state screen with instructions on how to start adding content.
  • Users can now add text objects and vector images with the default color (black or white) selected based on what provides a better contrast ratio with the current background (color or image).

Case studies