Designing a calendar notes iOS app

Innovation during a platform port and re-skin.

Project layers discussed below:

• Introduction and goals
• Scope of what I should do
• iPhone Wireframes and Flows
• iPad Wireframes and Flows

These layers are in rough chronological order but are only meant to organize this walkthrough, grouping non-linear activities in a linear document.

Introduction and goals

I was brought into the Meshin project after they’d prototyped a native Android app but before creating a native iOS app for iPhone and iPad. While the iPhone interface just needed a few flow enhancements to adapt well to iOS customers’ known conventions — the iPad interface was open territory. They didn’t have any preconceived notions for what the tablet experience could be and wanted me to push them in a good direction.

Scope of what I should do

As with any new project, I assessed the need for supplemental documents and tools beyond the most obvious deliverables. The differences between Android and iOS users wasn’t deemed significant enough to build Personas or conduct any Usability Studies. There was also an established look and feel to use as unifying elements between platforms. From color scheme to information display, I wanted to keep the users from getting lost between platforms. For the iPad and eventual Android tablets, I wanted to enhance capabilities with the extra screen area — enable people to do more and retain better context within their activities.

iPhone Wireframes and Flows

iPhone designs were mainly filling experience gaps that could have caused friction points for people not accustomed to the method employed in the Android version. I received an archive of the current project assets and info docs, some of which I had to re-create for Retina screen resolution.

I created click flows with some new layout and interaction schemes:

which were promptly applied by the iOS developer.

iPad Wireframes and Flows

With the design for the Meshin Android 2.2 version nearing completion, I took some of the layout decisions that had been made and expanded them into a multi-function interface that utilized a swipe-folding navigation depth pattern that had been popularized by the Twitter iPad app.

I created screens in portrait and landscape modes:

which we discussed and finalized through ppt decks (their preferred tool for the job):

With a design agreed upon, they set to building. Soon after they decided to re-theme for a brighter esthetic. I also took that opportunity to reduce the information density a bit, replacing the space with motivators:

Originally published at www.ihoby.com on May 6, 2016.