App patterns applied: calendar key journeys

Last week we introduced key screens for our core utility app designs, and we’ve been sketching key journeys ever since to unpack these concepts further.

Whereas the key screens communicate the overall, high level concept of an app, outlining key journeys is a design technique that gives us a feel for how users can accomplish a typical task when using the app.

For today, here is a closer look at the Calendar concepts key journeys

Change to another month

• To move to the next or the previous month, simply swipe left or right on the month view.
• Month names in the header roll in sync with the swipe

Change to another day

• To move to the next or the previous day, swipe left or right on the agenda view
• Selected day is popped out in month view, but today’s date remains highlighted in Ubuntu accent colour
• You can also tap on a day number above, to move to that day

Compress the month view into a week view

• Scrolling up on diary view, collapses the month view into one row, showing one week only and giving more space to display your events

Change from timeline to diary view

• You can toggle between ‘gapless’ diary view and hourly view by bringing up the toolbar from the bottom edge and tapping on the Timeline / Diary view option

Create an event

• The option to create a new event can be found in the toolbar, so just swipe up from the edge and tap on New Event
• To cancel, just tap on outside the card on the top, or push it back down

• Create Event card pops up with the keyboard, so you can immediately give title to your new event
• You can also specify date, time, location etc. and add people to the event (details to be iterated)
• When done, tap Save, and the card will slot into its place in your diary

View event details

• To view an event in detail simply tap on it
• Event details open up in full screen, it should be easy to glance when it is, what it is about, where it’s taking place and whose coming
• If you want to, for example contact any of the people invited, just tap on the name, and their contact details open in a split view*

• To go back to your diary, swipe up the toolbar and tap on ‘Back’

Remember we are still in the sketching and wireframing phase, visual design will come later and undoubtedly steer the design further!

What’s next?

We need something real to touch and poke, that we can test and improve – so don’t hold back as this is a great time to start prototyping!

As usual, sign up to the Ubuntu Phone mailing list and the IRC channel to discuss more.

* Picture of “Anna Olsson” used under Creative Commons from Isabel Bloedwater.