WordPress iPhone App Mockup. New But Familiar

I want to thank Aaron for giving me the opportunity to share my thoughts.

I love WordPress. My life changed because of it. It’s part of who i am today.

Looking at the WordPress app for iPhone i felt there is something missing. The simplicity and freshness of iOS 7.

I created this mockup to highlight my idea and changes to the current WordPress iPhone design. My goal was simple. Create something new. Make it look familiar.

WordPress iPhone app Mockup by Stefanos Kofopoulos

Current design (left). Mockup design (right). By Stefanos Kofopoulos

Think of it as upgrading from iOS 6 to iOS 7 and then to iOS 8. Simpler. Crisper. High contrast. Works on all iPhones and screen sizes running iOS 7 or newer.

All items calling for user interaction come with an explanatory icon and legend. Text can be translated to resonate with international users and complement the icon. Vice versa too.

In case of text only interactions (eg Settings, Edit) a different color is used. Strings translations will complement the difference in color and resonate with users too.

All elements and graphics used are iOS 8 native. Except the Reader and Notifications icons i created.

Nav bar

Stays the same. Theme colors apply. The improvements here include:

  • Edit menu moved to left. Where it usually is on iOS 8 table view and lists.
  • New iOS 8 typography.
  • WordPress color (#464646)

Sites list

Design overhaul based on iOS design language. The improvements here include:

  • Contextual ordered items (icons and typography)
  • iOS 8 like table menu with fav icons for each site
  • Different functions follow same design language (add button)
  • WordPress color (#464646)

Tap bar

Design overhaul matching WordPress app and iOS design language. The improvements here include:

  • Theme support matching Nav bar color
  • Clean. High contrast icons with legends
  • Simple. Unified content creation icon. Content can be video, photos, text. Older icon implied text only.

I would love to hear your thoughts. Design files are available for everyone. Made in Sketch 3.1 though.

#ios-8, #ui, #ux, #wordpress-for-ios

Hey y’all I would like to formally introduce…

Hey y’all! I would like to formally introduce myself!

I’m Hugo, a Portuguese designer (originally from Lisbon), living in San Francisco. I’ve been working for Automattic for two and a half years now – mostly on WordPress.com specific UX design – and recently joined the Mobile team contributing to the mobile apps (so far mostly iOS). The first thing I got the pleasure of working on was the New User Experience flow for the app (something you’ll only see when you first install the app or remove all accounts to start over).

Working closer with the community is exciting to me and I’m hoping to get more input to make further design (UX/UI) iterations to the apps!

More posts soon! Cheers!

#design, #intro, #ui, #ux

Mobile Dev Chat Sep 19, 2012

Summary of this week’s dev chat. chat log.


  • WPiOS 3.1.4 heads up
  • WPAndroid 2.2 check-in
  • XML-RPC check-in
  • New welcome screen/signup/connection flow discussion

WPiOS 3.1.4 heads up

We denoted that we’re doing some work to stay compatible with iOS6 and the upcoming iPhone 5. This release is due to be submitted today.

WPAndroid 2.2 check-in

The app was released for the BlackBerry PlayBook last Monday. There have been bugs with the release but we’ve issued bug fix releases. Now another issue has arisen and we’re prepping yet another bug fix release. The announcement is still due so we’ll make sure we post it asap (today is the plan). Look for it on the WordPress for Android Blog!

XML-RPC check-in

Max is doing the final review of the XML-RPC patches the mobile team has worked on (Jorge). There’s a write-up post on the status of all API enhancements going into 3.5 just below this post

New welcome screen/signup/connection flow discussion (was labeled “Sign up tweak”, among others, in the meeting)

Matt had brought up that our current welcome screen in all the apps has three options where most apps only have two – sign in or sign up (and perhaps one or two ways to sign in using a third party like Twitter or Facebook). We discussed this and after going back and forth for a bit seems like we all agreed the following would be best:

  • Sign up screen has two options (may be buttons): Connect Blog, Sign Up (copy is very likely to change)
  • Connect Blog has 3 fields, the WordPress.com specific log in screen is gone.
    1. URL (optional, with a placeholder that hints at the field only being necessary for self-hosted blogs)
    2. Username (just saying “Username”, not trying to specify .org or .com)
    3. Password (see ^)
  • This new flow would be a good opportunity to…
    • Use the same Geolocation toggle for both .org and .com.
    • Be consistent about actionable buttons (right now you log in automatically with a wpcom blog, but .org you need to press Save to continue).
    • Revisit the welcome screen – maybe we can make all the Connect fields visible when you first launch the app (not hidden behind a button).
    • Update/add error messages for the sign up flow to aid the optional URL field and provide a smoother set up altogether.


Please join us next week for the mobile dev chat, 15:00 UTC Wednesday.

#android, #dev-chat, #ios, #roadmap, #ui, #ux, #wpandroid, #wpios, #xmlrpc