UI restyling - Admin pages

[uxkai]

Product owner: @thijsdevalk
UX designer: @uxkai

What are we going to build?

Yoast SEO (Free and Premium), also including the Configuration wizard and the Network Admin settings (for multisite).

What problem does it solve?

We decided to take control of Yoast SEO's styling and rebuild it with our (MyYoast) design kit.

Note: This issue is specifically about literally rebuilding the UI and NOT about improving the UX (which will be phase 2 of this project).

Designs

Functional prototype

• Yoast SEO Premium
  https://www.sketch.com/s/2cdeaf38-2a8d-4cbd-b902-37e6d5246c21/a/W0Zj00/play

• Yoast SEO Free
  I only made designs of these two pages to show the components that are not used in Yoast SEO Premium:

1. Search Appearance > General tab
   (This page shows the ads sidebar at the right, the Upgrade ad at the bottom and the blue ad for Local SEO.)
   https://www.sketch.com/s/2cdeaf38-2a8d-4cbd-b902-37e6d5246c21/a/KYmqZn/play
2. Premium page
   (This page differs substantially from the Premium page of Yoast SEO Premium.)
   https://www.sketch.com/s/2cdeaf38-2a8d-4cbd-b902-37e6d5246c21/a/w0agAw/play

• Configuration wizard
  https://www.sketch.com/s/2cdeaf38-2a8d-4cbd-b902-37e6d5246c21/a/0VQj82/play

• Network Admin settings (for multisite)
  I only made designs for the General and Restore Site tab, because the Features tab is - apart from a few lines of copy at the top - the same as in Premium.
  https://www.sketch.com/s/0d67b0c5-b00e-4901-9d14-b9b53f0515e3/a/eY5PL2/play

Design files

• Yoast SEO Premium, Yoast SEO Free and Configuration wizard
  https://www.sketch.com/s/2cdeaf38-2a8d-4cbd-b902-37e6d5246c21

• Network Admin settings (for multisite)
  https://www.sketch.com/s/0d67b0c5-b00e-4901-9d14-b9b53f0515e3

Component specs

https://yoast.atlassian.net/wiki/spaces/U/pages/118390789/Components