Handbook Redesign

The Handbooks are slowly being updated to the o2 theme (Breathe). With this upgrade, I’ve been thinking about how we present our documentation, reference materials, etc. While Breathe was definitely refreshing, there’s still some experience issues I need to work through.

CURRENT ITERATION

Right now, the amount of floating menus on the page is too many. When navigating to a Handbook page there’s a floating menu on the left side, and possibly another floating menu on the right side for in-page navigation. This compresses the initial intro of the document a user might be reading causing some confusion with its odd flow of characters.

Current Handbook

 

PROPOSED ITERATION

I believe we could alleviate some of this by anchoring the left side menu a bit better and structuring these pages to appear more like a true documentation portal. I made a few changes in Inspector within the browser and came up with something like this (b/c of this there’s no mobile version yet):

Handbook

 

Some PROS and CONS are mentioned in a conversation here: https://meta.trac.wordpress.org/ticket/2389

FEEDBACK

Please leave some feedback here in the comments or on the actual ticket. Everything is helpful. I’m personally struggling with the floating right-side menu. There’s been some good ideas for solutions, what’s yours? If you have a few minutes to take a brief survey regarding the Handbook usage, please do! Handbook Usage Survey

 

#design, #make

New Homepage is Launched

There’s been a lot of positive feedback regarding the new homepage development, and I’m excited to say it’s live! While this is only the first iteration, the plan is to continue design and development to create something truly amazing. This is the first step toward that goal. This project moved quickly in hopes to provide something beautiful for the holidays, and I’m proud of this beginning.

Thanks to everyone involved in this process: @rosso99, @sonjanyc, @hugobaeta, @brad2dabone, @matt, @otto42, and the many others who provided feedback!

Take a look and leave some feedback. Just visit the homepage to see the new changes! https://wordpress.org/

+make.wordpress.org/marketing +make.wordpress.org/design

#design, #homepage

New Homepage Redesign

Wow, this is happening fast! During the Contributor Day at WordCamp US, the Marketing Team sat down with a project in mind—the homepage of wordpress.org. Being that the new design style is making an appearance in various places across the site, there was a desire to reboot the homepage as well. @rosso99, @sonjanyc, @hugobaeta, @brad2dabone, and @matt got together to begin creation.

Sketches were presented and thoughts shared.

Collaboration of sketches

Soon the idea took form and Matt expressed the need to get this project live. While much was resolved during Contributor Day, there was still more to go. The design was kicked of by @hugobaeta, and followed up by me (@mapk) and shared via Codepen Prototype.

Quick View of Homepage

Quick view of homepage

Homepage Mobile View

Some things to note:

  1. This is version 1 – we plan to iterate.
  2. The homepage screenshot section is a fixed background so the user sees many examples while scrolling.
  3. The map will show location pins of all WordCamps and Meetups worldwide.
  4. The quick view does not include the header and footer which will be present in the final implementation.

What are your thoughts?

Keeping in mind that this is only version 1 and we’re planning on launching and iterating quickly, please share your thoughts and feedback with us. We’re excited to see what you have to say.

+make.wordpress.org/design, +make.wordpress.org/marketing

#design, #homepage

Plugin Directory User Testing – Round 1

With the advent of the new Plugin Directory, I wanted to get some basic user testing in place to help guide UX decisions. Props to @designsimply for helping me with the tasks, and to @tellyworth for making sure functionality was up-to-par for testing.

In this test, I wanted to observe the user’s ability to easily find a plugin, and verify which meta information helped the user select the best plugin for their use.

Tasks

  1. Find an SEO plugin you think would be the best solution for your website, and talk through the reasons why you’d pick that one
  2. What would be the next step you would take to install the plugin on your site? [Verbal Response]
  3. How was your experience finding this plugin? [Verbal Response]
  4. Locate the Plugin Search Field and search for a plugin that will add an image slider to your website.
  5. Are you able to make an informed decision from the search results page? Why, or why not? [Verbal Response]
  6. If you haven’t already, click on the plugin that you like best to view the details.
  7. Looking at this Plugin Detail page, how do you feel about the content layout and organization? Is there anything you might improve? Is there anything that is unclear? [Verbal Response]
  8. What are the top 3-4 things on this page that influence your decisions when selecting a plugin? [Verbal Response]
  9. Please share your overall experience with this process. Was there anything you’d like to see improved? Was there anything you thought particularly helpful? [Verbal Response]

Video

User Testing Round 1

Notes

  1. [1:48] After browsing, user decides to search for ‘SEO’
  2. [2:07] User looks at ratings as a good indicator for which plugin is best b/c other people tried it out and were satisfied.
  3. [3:17] User still doesn’t seem to have enough information to choose a plugin directly from search results page.
  4. [4:21] User clicked to check negative reviews and ended up at older layout for plugins reviews.
  5. [6:11] User is highly influenced by ratings above all else.
  6. [7:14] User checks “last updated” as well at this point.
  7. [8:33] User would download plugin and figure out how to install it. He didn’t see any instructions in the ‘description’.
  8. [9:09] User uses ‘search’ as an option when he’s “stuck”. He prefers browsing first, and then later searches.
  9. [10:23] User found the Plugin Search quite easily but then gets confused seeing another search field above it in the header. He expected it to be in top right corner.
  10. [12:21] Not enough info on search results page to make an informed decision.
  11. [15:09] User says layout is pretty typical on the Detail page.
  12. [16:10] Bringing negative reviews closer to the top would be helpful for this user.
  13. [16:30] Top 3-4 things this user relies on for selecting a plugin are: 1. Ratings, 2. Last updated, 3. Description/Feature list, 4. Maybe FAQs?
  14. [18:31] Overall experience was “fine”. Easy to find plugins. Providing more meaningful descriptions would be helpful b/c they all kinda looked the same in the short descriptions.

#design, #plugin-directory, #user-testing

Support Forum Preliminary Mockups

The next revision of the support forum design is ready, as we get closer to coding, hopefully by next week! In order to move to the next stage, I want to get these mockups in front everyone to gather comments and feedback. These are definitely preliminary mockups; things can and will change, especially during the implementation phase.

If you haven’t followed along before, take a moment and review the Design Research post and the Wireframes post from earlier.

The Homepage

Homepage

Homepage

Mobile view

Mobile view

Homepage Notes

  • Search is prominent in the blue title bar, which follows the design pattern from the new Plugin Directory and Get page.
  • 3 columned jump points to various popular documentation destinations.
  • Forums have a grid layout, as seen in the wireframes, but the most recent topic links have been removed. Instead, longer descriptions have been added. The support team can customize these to make it easier to locate the relevant forum and dive into it, without be overwhelmed with text.

Forums page

Forums page

Forums page

Mobile view

Mobile view

Forum View Notes

  • Two columns in the table now use icons instead of text descriptions to minimize their width. This should reduce wrapping of the topic title.

Topic/Discussion page

Discussion page

Discussion page

Mobile view

Mobile view

Discussion page Notes

  • The initial post is given a grey highlight, to separate it from replies.
  • If the post has been resolved, it’s marked as such and the specific answer is noted with a green checkmark.

Search results

Search results page

Search results page

Mobile view

Mobile view

Search Results Notes

  • As of right now, search will be use the built-in bbPress 2 search, so it will only return forum posts in the results.
  • If the user doesn’t see an answer or post about their question, there’s a button to quickly move this into a form for creating a new discussion.

Feedback

I’d love some some feedback on these mockups! Feedback on anything is great, but in particular I have a couple of questions:

  • Should comments from moderators, authors, and plugin authors have a different style than regular comments?
  • Where should the “All Topics” and “No Replies” links go? Perhaps on the homepage?

Leave your feedback below and let us know what you like and don’t like. 🙂

#design, #forums

Support Forum Preliminary Wireframes

After looking through the feedback from the initial forum design research, I began to create wireframes to help organize some of these ideas. Forum design is pretty standard across the web, and features don’t vary much either, so building out wireframes proved to be a straightforward task.

I wanted to stick with something basic and build from there. The forums and the topic/discussion pages are simple and straightforward. I worked through some layouts for the Support homepage and played around with the display of content in different ways.

The Homepage

Homepage

Homepage

Mobile view

Mobile view

  • I made the search more prominent on the homepage. Rather than diving down into the forum topics, people are more likely to search for their issue instead.
  • I provided three very prominent sections at the top for the ‘Welcome’ intro, a link to the Codex (documentation), and a third link, possibly to the Support Handbook.
  • Below those jump points, the forums are separated out and grouped with their 3 most recent topics. This was done to help with discovery and ensure users find the right forum. I determined that, if the topic was popular enough to continue getting activity, then others coming to the Support page might also relate to that topic.
  • The post tags are moved to the bottom along with other useful links.

 

The Forum Page

Forums page

Forums page

Mobile Wireframe - Topic page

Mobile view

  • The layout comes with the new subnav that’s being implemented on other parts of the site. This includes a search field, and the three main subnav links.
  • The title of the forum is on the left top with a description under it.
  • The list of topics in the table below display the topic title, author, author avatar, number of participants, number of replies, latest person who replied with their avatar, and the date.
  • Below the list, if logged in, you’ll see the form to add a new topic. Otherwise, you’ll see a call to action to login and add a new topic.
  • The sidebar has been moved to the right. Primary content in LTR languages should be on the left, while meta content should be on the right. The sidebar includes: number of topics/discussions, number of replies, Last reply, and last activity.

 

The Topic/Discussion Page

Discussion page

Discussion page

Mobile view

Mobile view

  • This page would include a breadcrumb nav to help orient the user to their location given that it’s deeper than two levels.
  • The title of the forum is below that.
  • The initial question is a highlighted box which includes the user’s question/title, the user info, and the detail of the question/topic.
  • The comments are displayed below in a simple layout.
  • If logged in, there will be a reply form below.
  • Sidebar includes: number of replies, number of participants, last reply (user), last activity (date), and ‘favorite’ option.

 

The Search Results Page

Search results

Search results

Mobile view

Mobile view

  • The question is predominantly displayed at the top.
  • Search results are displayed below with pertinent information like title, desc., author, date, etc.
  • Pagination
  • Sidebar includes ability to convert the search query into a proper question (‘Ask Question’ button). Most likely transfer the user to a form page where the user can select which forum this question should be posted in.
  • Sidebar also includes recent forum posts and additional meta data.

 

A Call for Feedback

I’d love to hear what you think about the wireframes. Please leave some feedback below! 🙂

#design, #forums

Forum Design Research

As some may have noticed there are efforts to improve the support forums on WordPress.org. In addition to the backend changes, this seems like a good time to make some design upgrades as well. To kick things off, I’ve done a bit of research into various forum designs in use online (similar to the web store explorations for the plugin directory).

If you’re interested in the forums, please take some time to review the research here and leave your feedback. What stands out from these examples as something you’d like to see implemented on WordPress.org? Which design feature is your favorite and why?

Feature comparison

Feature comparison

Below are some screenshots from each of the forums reviewed.

Non-bbPress Support Forums

bbPress Support Forums

Thank You

Thank you for your feedback! If there are other forums designs you’ve seen on the internet that should be reviewed, leave a comment here, along with any other feedback you have.

#design, #forums

Plugin Directory Prototypes (Single View)

Yesterday, you saw the mockups and prototypes of the Plugin Directory homepage and search results. Today, I’d like to share the “single view” plugin page mockup. The single view is the primary page for all plugins.

Like the earlier mockups, the content is not accurate and the entire page is still undergoing changes.

Prototypes

You can play around with the prototype here: http://codepen.io/mapk/full/YqJezm/

Screenshot

Single View

Single View

Notes

  1. Many details are still being worked out.
  2. Some views still need to be created, like the ‘Reviews’ and ‘Support’ views.
  3. The ability to ‘favorite’ a plugin still needs to be designed.
  4. The ‘Ratings’ section is far from complete.

#design, #plugin-directory

Plugin Directory Prototypes

When we created the design for the ‘Get WordPress’ page, it was meant to set a new design standard for WordPress.org sites. As a result, here are here are some new designs for the home page and search results page of the Plugin Directory.

Keep in mind that these are still preliminary and the content is not accurate.

Prototypes

You can play around with the prototypes here:

Screenshots

Homepage

Homepage

Search Results

Search Results

 

Notes

  1. Homepage
    1. Again, individual plugin information is not accurate.
    2. The terminology for “pro” and “light” are explorations for design purposes. (Look for a taxonomy post on this blog in the near future.)
    3. The three sections at the bottom will have links to their respective subpages.
  2. Search Results
    1. Typing a keyword in the search field will replace the content area with search results.
    2. Pagination still needs some work.

We continue to iterate quickly and a second post on the design of the plugin detail page is forthcoming.

If you have any feedback on the design, please comment below. We’d love to know what you think! 🙂

#design, #plugin-directory

Final Mockups for ‘Get WordPress’

Working on this project has been a fun and creative journey and both @hugobaeta and I have made some great breakthroughs on the design direction for WordPress.org. Below are the final round of mockups (text still subject to change).

(Want background on this post? Check out the IA post, followed by the initial mockups.)

‘Get WordPress’ landing page (located at /get/)

Get WordPress - Mobile View

Mobile

Get WordPress - Desktop

Desktop

‘Get WordPress’ subpage
Mobile - Closed Nav

Mobile – Closed Nav

Mobile - Open Nav

Mobile – Open Nav

Desktop

Desktop

#design, #get