Admin Help – User Personas

Note: This is taken from a past Happiness Engineer meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. project focused on WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ users, so there may need to be some editing here to better fit our understanding of WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ users

Persona 1

Marci, 55
Married with children, one grandchild. Empty-nester. All her help for set-up comes from the web.
Husband, George, is the local pastor, and she has started a blog for his church, wanting to proactively be modern and support him. She is unwittingly about 5 years behind technological trends.
Enthusiastic, a bit flighty.
Located in the American Midwest – Ohio
AOL user

Needs:

  • Upload videos or shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. from the YouTube
  • Find the right theme
  • Add users/subscribers
  • Add posts
  • Create a custom menu

Tech-savviness rating: 1/10 (1 is least tech-savvy, 10 is most)

I’ve read the page for custom menus three times and been following it, and I can’t see my pages

Persona 2

Angelo, 40
Small business owner
He’s pretty successful locally
Someone told him about .Org, and he struggled with it, but learned about plugins and themes.
He doesn’t want to spend a lot of time on this – it has to just work. He will be stingy with his money depending on how much perceived value something has.
He has a teenaged son.
Married to his high school sweetheart
Hotmail user.

Needs:

  • Theme
  • Upload a logo
  • Much more a static site, but will eventually branch into some light blogging.
  • Wants to have increasing traffic over time to increase business

Tech-savviness rating: 4/10 (1 is least tech-savvy, 10 is most)

“I’ve spent 5 hours of my time on this. I don’t have time, I need this done.”

Persona 3

Jessica, 20s
Personal blogger
A few years out of college.
Relatively savvy – grew up with technology. Has an iPhone.
Knows a little HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites., but not that into it.
Has been blogging on Tumblr for a few years, but now wants to be able to have more themes and a bit more control behind the scenes.
Stays on top of trends.
Gmail user.

Needs:

  • Themes
  • Flexibility to change domains when hobby changes
  • Wants to curate followers/increase followers
  • Publicize on social media

Tech-savviness rating: 7/10 (1 is least tech-savvy, 10 is most)

“How do I pick the image that gets posted to Facebook”

Persona 4

David, 35

Does web design work professionally, but not on WordPress
Lost a bet on a basketball game, and now has to set up a site for a friend.
Very savvy, knows a lot about computers.
Thought that setting up the site on WordPress would be a 10 minute job, and now it’s been a few hours and he’s frustrated.
Comes in with very specific expectations that may not actually be accurate on how things should work.
Hosts his own email address through Gmail on his host.

Needs:

  • Themes
  • Set up site structure (pages, maybe a blog)
  • Set up a home page
  • Where does the HTML go?

Tech-savviness rating: 9/10 (1 is least tech-savvy, 10 is most)

“I work with websites a lot, and I’m setting up a site for my friend and I can’t figure out this WordPress thing. How is this easy exactly?!?”

#admin-help

Handbooks Design Comp – Preliminary

WP_Handbooks_comp-01a

Click to enlarge

Last week I presented an initial design comp for the handbooks in IRC [log] and we discussed it there, and I’m posting here to continue the conversation.  This design builds on previous wireframes, but is very much a preliminary design, as we’re still not clear what theme (or themes) we’ll be using to house the various handbooks yet.

What we do know is that at least some of the handbooks will find their home in existing P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. blogs, so that is what I’ve started with here.

How do you design without a theme?

Legibility, scannability, whitespace, and typography are all things that should serve the content, not the theme, so that is where I’ve focused for now.

I’ve also tried to design with overall flexibility in mind as well; a font change and a few tweaks are all that should be needed for this design to work with most themes.

Here are some highlights:

  • Body copy – The body is set in 16px with a 24 px line height for whitespace, about 80 characters per line.  Helvetica Neue is used here to match P2 blogs but can be easily substituted.
  • Headings – Beyond varying font sizes, I also outdented h1 headings to make them stand out from the body copy.  For h2-h6 headings, I indented them from the body copy, and added border-left to create an added graphic element.  [See all headings]
  • Text Containers –  Content boxes for code, info, alerts, and next steps are color coded to stand out from the body copy.  I’ve used Genericons for the related icons as well.
  • TOC – This is generated automatically, based on the headings on the page.  Only h1-h3 headings are represented for now, and the font weight of each has been varied to make this easier to scan as well.   I’m not sure if lesser (h4-h6 headings) even have a place in the TOC.

Feedback?

Since we still need to figure out the theme issue, this is a good stopping point for the design.  Please leave your feedback in the comments so they can be included in the next round! 🙂

EDIT:  For some context, here is what the design looks like mocked up inside a P2 theme.

#devhub, #handbooks

Handbooks Wireframe v3

Handbooks-v3Based on feedback from the handbooks v2 wireframe posted earlier this week, as well as discussions in the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Contributor Handbook subcommittee on IRC (see log) here is a new one I worked up, which includes the following changes:

  • Shortened line length – I increased the text size so now there is approx. 75 characters per line. I think it strikes a nice balance between a comfortable line length and a decent amount of density, to keep pages from getting overly long.
  • Numbered headings and subheadings – There is some debate as to whether these should be manually or automatically generated. For now we’ll just try them on for size and see how they look.
  • “Scrolling” TOC – The table of contents is now moved to the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. area, where it is allowed to float free of the text, and follow the reader as they scroll.

And that’s about it. Everything else is held over from version two. Please click on the wireframe to view full size, and leave your thoughts in the comments section.

#handbooks

Handbooks Wireframe – v2

Handbook-wireframe-01Based on feedback from the handbooks wireframe posted last week, here is a new one I worked up, which includes the following changes:

  • More text and fewer images – This is probably closer to how a typical handbook page would look, which we would expect to have more written content and fewer illustrations than was shown in the first wireframe.
  • “Checklist” in the overview section – This would allow readers to determine at a glance what will be covered on the handbook page.
  • Added subheadings – To get a better sense of how subheadings would work in a handbook layout I added a few h3 headings. Lesser headings (h4-h6) are not represented but would follow suit. Note that subheadings are also displayed as a nested list in the TOC to show hierarchy.
  • Content box for displaying code – Styling would be similar to the other alert boxes, with a background color and icon.  Though not illustrated here, it would be ideal to use a syntax highlighter as well.
  • “Next Steps” section at the bottom – This is a good place to link to related pages within the handbook, as well as other external resources.

Please click on the image to view full size, and leave your thoughts in the comments section.

#handbooks

A Wireframe for Handbooks

Handbook-wireframe-01During the IRC meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. today (read the log) @siobhan shared the Handbooks Style and Formatting Guide that she has been working on; it’s purpose is to unify the tone and style of all the (awesome!) WordPress handbooks projects that have started popping up recently.

Also discussed in the meetup was the need for a better design for the handbooks, starting with wireframing. As I already toyed with a quick wireframe for the User Manual project, which has similar goals as the handbooks, to help jumpstart the discussion I thought I would post it up here.

Notes about the wireframe

It’s a bit early yet to know what the final home of the various handbooks will be. Some may live on dotorg P2P2 P2 or O2 is the term people use to refer to the Make WordPress blog. It can be found at https://make.wordpress.org/. sites, and others may use different themes instead.  For that reason, no sidebars, site navigation, and other theme-related features are shown in this wireframe; this is focused on the content column only for now.

  • Breadcrumbs – Nothing fancy, just lets the reader know where they are, based on the parent/child relationship of the page.
  • TOC box – Displayed at top of article is a table of contents. A lot of dotorg P2 blogs already feature this in an unstyled form, and it is generated automatically from the headings on the page.
  • Headings – Ideally, as mentioned in the style guide, only one topic or step will be used per heading. Generous top/bottom margins add whitespace between these “sections” of content, to keep the information easily scannable and digestible.
  • Body Copy – As with the headings, good whitespace between paragraph elements.  There should not be more than a paragraph or two per heading.
  • Images/Videos – These are always displayed at full width, which is helpful for detailed screenshots.  Can be linked to a larger image,  displayed in a lightbox or other modal window (not shown) so the reader does not have to navigate away from the current page when getting a closer look.
  • Image Captions – Descriptive captions help explain the image, and are also named (Fig. 1, Fig. 2, etc.) with matching footnotes in the text, to help readers link the instruction text to the related illustration.
  • Alert Boxes – These will likely use the blockquote HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. tag with an added class for styling and possibly adding an icon. Boxes for “tips” and “warnings” are represented, but others can use a similar format.

That’s pretty much it.  Leave you thoughts/feedback in the comments below, so we can start building a home for all these great new handbooks.

#handbooks