Calypso UX Audit

[vazquez]

We need to understand the shortfalls of Calypso (if any) under a UX approach. What would be frustrating for a user? Where should and should we not be using Calypso?

[mmmavis]

It might be worth comparing the traditional Dashboard (the PHP version) with what Calypso offers.

You can check out the traditional interface via https://name-of-your-wp.wordpress.com/wp-admin/

[vazquez]

Writing a Post

Empty State :white_check_mark:

When writing a blog post for the first time, an empty state appears. This alleviates the frustration of looking around for a CTA. Instead, the empty state shows a clearly defined CTA to begin writing content.

Other empty states exist in Calypso. For example, when adding an image, you see a friendly empty state for media.

vs. Traditional Interface

Calypso features a much more understandable interface when it comes down to writing your first post ever. The PHP interface has too many CTA's, and it eventually ends up misleading the eye.

---

---

Editor :white_check_mark:

The Editor contains all of the normal formatting that would usually be available in a normal post editor. Lists, links, bold, underline, images, paragraph justification, etc. The Editor works inline, there are no visible boxes. This is a plus as it makes the creation of a document appear more simple.

The use of the Visual and HTML editor is useful only when adding complex HTML. Otherwise, the Visual editor is what most people will write on.

:warning: A drawback to this interface versus other interfaces such as the one found in Medium is that font-size when editing is too small, and one is unable to make the font larger.

vs. Traditional Interface

The traditional interface is quite confusing from first glance due to the high level of options that are available at a time. I suspect this would make writing a post a bit more challenging for individuals that have little experience with a blog editing platform.

---

---

Blog Post Options :white_check_mark:

The Calypso interface offers a condensed view of blog post options. It is here where the user can change the layout of a blog post, add a featured image, add a tag or categorize the post. Overall, it is easy to find blog post metadata in Calypso.

The Blog Post options also allow the author to Preview their content and Publish. One can also set a future date for the blog to be made public.

vs. Traditional Interface

The traditional interface has the same features as Calypso, but once again the options are overwhelming, as everything is shown at once.

[vazquez]

Reading a Post

The Reader :white_check_mark:

Both the traditional interface, as well as Calypso, offer a Reader. This could be beneficial for giving people a nice view of the posts around the Mozilla Foundation.

Both the traditional interface and Calypso redirect to Calypso.

---

---

Reading a Post :white_check_mark:

When the user clicks on a post in the Reader, they enter a Fullscreen experience.

[vazquez]

Viewing a Published Post

Summary :white_check_mark:

After the user has published a post, the Calypso interface shows them under "Blog Posts". Each published post contains a set of options, including post statistics. Admins are also able to search posts pretty easily thanks to their search bar.

vs. Traditional Interface

The traditional interface is again quite confusing from first glance due to the high level of options that are available at a time. More options appear when hovering over the title of the blog post. This type of interaction hides a lot of key features that should be more accessible, as they appear in Calypso.

---

---

[vazquez]

The Dashboard

Insights :white_check_mark:

The Calypso interface calls the Dashboard the Stats section which shows the latest post's summary, the stats of the site, along with a GitHub-like graph of posting activity.

vs. Traditional Interface

The traditional interface contains most of the information that is available on the Calypso Stats, but they are offered in a bit of a more visually complex matter.

---

---

[vazquez]

Pages :warning:

Pages in Calypso and Traditional

I don't know if it's just me, but I wasn't able to understand Pages. I added a Contact page, but when previewing my site, I wasn't able to view the Page I had just created. I don't think that a normal user would have to worry about something like this, but the UX behind creating a Page is confusing. Onboarding would help.

---

---

[mmmavis]

:exclamation: This ticket is now locked. Please continue the discussion on https://github.com/mozilla/wp-calypso instead. For more info see README.