Rethinking the GlotPress UI

Hey guys, first post in the GlotPress blog, so I think I should introduce myself and give context to why I’m posting.

I’m Hugo, I work for Automattic as a Social Designer. I love designing user interfaces and craft the experiences so that a product is easy to use. I’m also part of the Portuguese WordPress Community and I’ve used GlotPress to help translate WordPress to Portuguese!

My friend and coworker Zé, asked me to “take a look” at the ui of GlotPress and brainstorm a bit on how it could be improved.

We started talking about a bunch of stuff and details, but I decided to focus on one thing at a time. Here are the priorities on my first iteration here:

  • Improve the visual design of GlotPress (Zé mentioned he’d love to have it look more like the WordPress Dashboard)
  • Improve the information architecture on the header – reducing the redundancy and streamlining the interaction
  • Improve the List Actions / Sorting / Filters to match the needs of a power user, as well as to make it easy for newcomers

With this list in mind, I sketched some ideas and we ended up coming up with this:

Things worth mentioning:

  • The visual design is much closer to the one on the WordPress Admin
  • Got rid of the GlotPress logo at the top, as it didn’t really give any context and if you contribute to translations on multiple sites (ie: WordPress.org, WordPress.com, Genesis Framework, etc…). Now you get instantly a notion of where you are without any clutter
  • Separated the Bulk Actions, Sorting and Filters into different areas, to make it clearer what each do. My thinking behind this was to have the filters (I’m calling it “Quick Filters” right up in the visual hierarchy, next to the contextual title (You’ll also notice a “Advanced Filters” link at the end, which I’ll mockup the interaction on a later iteration). On a second line you find the things that directly affect the list – Bulk Actions and Sorting on one side (made it much simpler by just using select items), and the Visualization options (Wishlist – like WordPress does with lists – more on this later on), item count (whishlist as well) and pagination.

I would like to get the discussion going around this and to get your opinion so I can know if I’m in the right direction or not (feel free to kick me in the but!) :)

Cheers!