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.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/. 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

Get WordPress Mockups

With the desire to improve the path for how people “get WordPress”, I proposed some Information Architecture ideas. Today, I’ve got a mockup to communicate these concepts.

First, I wanted to bring the different ways in which someone can ‘get WordPress’ into one single page that would communicate their relationship with one another effectively and clearly. Second, any buttons that say “Download WordPress” should actually download the software, and not link to another page.

These two points are addressed with the following mockup. The mockup combines downloading WordPress, downloading the mobile apps, and hosting into one page, with sub-pages for each. Combining these options provides a well-rounded view of how someone might go about “getting” WordPress – whether by downloading the software and setting it up themselves, having a hosting provider take care of it, or obtaining the mobile apps. Each section links to sub-pages that delve into more detail.

The mockup also slims down the navigation of this section 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/ and unifies related content.

/get page mockup

/get page mockup

View full size mockups

Design Decisions

The mockup above has some explicit designs that are worth noting:

  • Button styles are the same as the one in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • The title bar on this landing page has a new design, unlike others throughout WordPress.org (but somewhat similar to make.wordpress.org).
  • Dashicons have been used on the page, when relevant.
  • The typographic scale has been refined and Open Sans has been embraced.

This mockup is a view into the design direction for WordPress.org, so please chime in with your comments. I’d love to hear your thoughts.

(With great help from @hugobaeta.)

#design, #get

Get WordPress: Improving the Path to WordPress

For quite a while now, the metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. team has been interested in improving the download and mobile pages on 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/. Unofficially, we’ve been referring to this as the “Get WordPress” project. Here’s an overview of the thinking thus far.

Note: The overview and proposal below are just exploratory to gather feedback.

Overview

Currently on WordPress.org, there’s are three related navigation items in use: “Mobile,” “Hosting,” and “Download WordPress.” Visitors to WordPress.org must select which “path” they want to follow.

There are a couple of issues with situation:

  1. When a visitor clicks on “Download WordPress,” they may be expecting an immediate download of the software. Typical software websites don’t use the “Download” terminology if that package will not be immediately downloaded.
  2. Much of the content in the three navigation items is related. We currently duplicate content from the mobile page across the site when a user is on mobile, for example. Each of these pages is a different way someone can “get WordPress,” either direct to their computer, on their mobile device, or through a recommended host.

Proposal

There are a couple of approaches we can use to fix this.

  1. The easiest approach is to keep the three navigation items and update the “Download WordPress” button to immediately download WordPress.
  2. Conversely, we could rename “Download WordPress” to “Get WordPress” and keep everything in place.
  3. A third option is to rename “Download WordPress” to “Get WordPress,” and create a new landing page (/get/), removing the other two navigation items. Get WordPress would provide an overview of the WordPress mobile applications, a download button for the WordPress zip, and links to preferred hosts, as well as 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/ (this currently exists).

I think the preferred option is #3 in the above list. For one, creating a page that is context-aware (mobile vs desktop) is a win-win for users on all platforms. Additionally, merging these pages gives visitors a full overview of how to get started with WordPress. By displaying these items on one single page, we can help communicate the purpose of each section and how they would relate to the visitors and each other more fluidly.

Merging these pages also reduces the number of items in the main navigation and clarifies the main call-to-action button that exists across WordPress.org. We’d also want to ensure that we provide this merged page to all Rosetta sites.

Information Architecture

Here are both the current and proposed IA.

 

download-current-IA

Current IA

get-revised-IA

Proposed IA

Feedback

What do you think? We’d love feedback on the proposal above and this possible direction. Leave your comments below!

#download, #get, #mobile