Flojuggler iOS Design Update

flo-explorationAs we move ahead with first round BETA testing I’ve started to explore the final aesthetic treatment of the brand, the details of the UI, and some ideas within the UX. Here we see the action buttons revealed after the user swipes downward on a list item. The item itself animates by sliding down, pushing the items below, and making a “click” sound on animation end.

The shadow is applied to the action buttons only. This makes them stand out against the dominating flat design of the item list. The conspicuous dimension of the shadow invites tactile investigation by the user.

The following images are direct grabs from the simulator. These are not mockups. Once the MVP is done I tend to do most of my refinement in live code. If the feature is drastic enough, like the control drawer pictured above, then I’ll mock it up first. That way I can get user feedback before investing in coding hours.

Flo List Screen

You can see how we start with a minimal viable product on the left and iterate toward a more refined UI/UX over sprints. The left facing arrows indicate the ability to swipe left which did not exist in previous versions.

Flo Detail Screen

As time passes we see the new logo, larger numbers, and larger thumbnails in response to usability during previous sprints,


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s