Learning App Design

A few days ago I switched teams at Automattic to work on the mobile apps team until the end of this year. So, for most of the summer I’ll be flexing some long-forgotten muscles and designing the WordPress and Jetpack mobile apps.

Its been a (really, really) long time since I’ve done any iOS or Android design. I’m still waiting for my Android device to arrive — a Google Pixel 6 should be here next week — so I’m getting my feet wet with the iOS app. As a way to better understand Apple’s HIG, the current WordPress app, and the general workflows for designing for a phone, I’ve been starting from scratch; What could a brand new WordPress application look like? How could we improve the general information architecture, while adding some personality into the mix? How can we fully embrace the touch screen, high-density display, and other unique elements of a modern mobile device?

One of the first things I’ve learned is that you really have to design on the device itself. That is, you can’t trust Figma on a 27″ iMac to give you a real sense for how a design or flow works. Thankfully, Figma has an app for iOS that allows me to mirror — in real-time — my designs.

I’ve also learned that the best way to share a prototype of a mobile app, is to ask others to try it out on their device — not in a browser or on a laptop. The second best way is to share a video of yourself using the design on a device.

You can record the screen on the device itself (iOS makes this really easy), but you miss out on the important interactions and gestures that make a touch-screen device so special. So I guess I’ll need to get used to seeing my fingers and hands touching my dirty phone.

Here’s the first video I’ve made to show a prototype I’ve been building for the past few days. I bumped the camera half-way through, but you get the general sense of what I’m thinking.