Make WordPress Mobile

Tagged: UI Toggle Comment Threads | Keyboard Shortcuts

  • titanas 3:53 pm on October 7, 2014 Permalink |
    Tags: , UI, ,   

    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.

    • ctruman 6:14 pm on October 7, 2014 Permalink | Log in to Reply

      This looks really cool! Is this design motivated by trying to expand to new screen sizes? Or just to have a more distinctive iOS 8 style app?

    • titanas 10:35 pm on October 7, 2014 Permalink | Log in to Reply

      It started as personal frustration ( http://titan.as/making-wordpress-better-admin-menu/ ) and grew to a suggestion for improved clarity, UI and UX. Killing two birds with one stone as this will adopt and adjust to all iPhones and work exceptionally well with international markets

    • Aaron Douglas 1:16 pm on October 9, 2014 Permalink | Log in to Reply

      @titanas I did ping some people internally at Automattic working on design. Hopefully soon I can share some of the mockups for what is coming very soon. :)

    • Aaron Douglas 1:17 pm on October 9, 2014 Permalink | Log in to Reply

      @mikejohnstn just an FYI you may want to review @titanas‘ contribution for your thoughts!

    • Dave Whitley 10:04 pm on October 9, 2014 Permalink | Log in to Reply

      By the way, thanks @titanas for the contribution. I love to see what other designers can come up with.

      I’ve worked on only some parts the app (NUX, Notifications, tab bar). I feel your frustration — I wish we could devote more time to the overall app design.

      A lot of things are in flux right now on WordPress.com— we are working hard on the wp-admin frustrations (on the web) that you pointed out in your blog post, and we are striving for consistency on all platforms — web, iOS, Android. Hopefully we can share more soon.

      Some critical thoughts on your design:

      The “Add Site” change seems more native — I like it. Maybe that cell should just be attached to the bottom of the site list, with no space.

      The WordPress.com designers lean more towards the WordPress.com brand when deciding whether or not to use iOS specific styling, such as color, fonts, icons, etc. For icons, we want to use the same ones we use on the web and on Android. I’ve seen other apps successfully use iOS-style icons for their app (Path, Evernote), but for us, I don’t think it’s best. I’d rather the app feel like part of a cohesive ecosystem, rather than an iOS utility. For example, Facebook Messenger feels more like an extension of iOS, but the Facebook app feels more connected to the Facebook on the web. We want the app to use native patterns wherever possible, without losing sight of the brand.

      • titanas 11:04 pm on October 9, 2014 Permalink | Log in to Reply

        Thank you Dave. Good to know that you guys work hard to improve things. That’s great.

        Add Site can anywhere. Depends on how people use the app. How many sites the average user has etc. Placement of it, is more of a data driven decision.

        I understand the reasons for leaning towards to WordPress.com design. You should do that. There is a big but hanging in there.

        One will never be able to have a WordPress.com design on mobile devices. All mobile OS are designed and built with fundamental differences. iOS, Android and Windows Phone are very different. You cannot replicate the Android three dot action bar on Windows Phone. Maybe on iOS but that would be out of place. Which brings me to my seconds argument.

        When someone buys a mobile device makes a binary choice to choose or not to choose the device and its OS. It is crucial to honour this choice for the next 12 or 24 months. Sometimes even longer.

        Every mobile OS has it’s own typography, gestures, icons, UI and UX. Creating something that is 20% different from everything else in the OS creates friction. Especially for apps that are used to create content, aka used frequently. This is why the great examples you mentioned follow the iOS UI and UX. It’s fluid for the users. The feel comfortable. It works. It’s always “where it should be”.

        IMHO this is not a question about being part of a cohesive ecosystem rather an iOS utility. It’s about honouring predetermined user patterns and behaviour for today and the next couple of years.

    • Ploufside 5:04 pm on December 23, 2014 Permalink | Log in to Reply

      Hi Titanas, thanks a lot for investing yourself in the WordPress project ! It changed my life too :)
      YES, it would be awesome to see the iPhone App Mockup design upgraded as you’re proposing, it’s lot more clear like that ! Looking forward to see what is deciding the community 😉

  • Hugo Baeta 12:25 am on June 20, 2013 Permalink |
    Tags: design, intro, UI,   

    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!

  • Isaac Keyet 8:05 pm on September 19, 2012 Permalink |
    Tags: , , , , UI, , , ,   

    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.

    • Andrew Nacin 7:37 am on September 26, 2012 Permalink | Log in to Reply

      “Connect Blog” should aim to only submit a username and password to WP.com if the URL field is empty, or if the URL has been confirmed to be hosted by WP.com. If login credentials are sent to WP.com before confirming it is WP.com, I could see some opportunities for complaints. Overall, the new flow sounds like a huge improvement.

compose new post
next post/next comment
previous post/previous comment
show/hide comments
go to top
go to login
show/hide help
shift + esc