Design Exercise 2


Challenge: Choose a mobile mail application and demonstrate how you might enhance the experience of going from the inbox list view to the message detail view, to the compose view, and back to the inbox list view.


  • I’ve tried to enhance the experience by creating more direct and fluid interactions. 

  • In an attempt to keep the user in a familiar world rather than having objects jump across the screen, I minimized travel distances.

  • I’m making the assumption that the animation behaviors I choose do not need to align with, or tie in to existing behaviors from other apps in iOS.

  • I’ve utilized contracting and expanding behaviors for navigating the views instead moving side to side. 





Mail App's Current Interactions

  • Apple’s iOS Mail app’s current state of navigating different views can feel clunky and disorienting as pages jump across screen.

  • Objects travel far distances across the screen. The Compose Window starts from below and jumps to the top which feels abrupt at this speed.


Inbox List View      >      Message Detail View


  • The message is fixed to user's finger and is moving with them. Before committing, user can peak inside the email but release to stay on the inbox list view.  

  • Having a threshold of how fast user swipes, or how hard screen is pressed determines the interaction. 

  • The subject header is a focal element that remains visible through the transformation, even once the entire email expands.

  • Soft fades reduce overlap.



Message Detail View      >      Compose View

  • Limiting the distance that elements travel across the screen make for a more natural, less abrupt experience. 

  • Nothing moves linearly.


Message Detail View      >      Compose View Exploration

  • Rather than soft fading off keyboard, this version uses scale to introduce each individual letter.

  • The feeling was that behavior is a decorative and unnecessary as the user will be doing this several times per day, and this secondary animation could make the action feel slow.



Compose View      >     Message Detail View


  • Soft fades combined with position changes can help ease transitions.

  • Keyboard has secondary animation to feel alive.



Message Detail View      >      Inbox List View

  • The email’s content retracts into the header as it lifts back up to the inbox list view, mimicking the behaviors of opening an email.

  • The email that the user was just in would sit at the top of the page so it’s not to be confused of which email they were in.