App patterns applied: calendar key journeys

Canonical

on 27 February 2013

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.

Talk to us today

Interested in running Ubuntu Desktop in your organisation?

Newsletter signup

Select topics you’re
interested in

In submitting this form, I confirm that I have read and agree to Canonical’s Privacy Notice and Privacy Policy.

Related posts

Design and Web team summary – 8 July 2019

This was a fairly busy two weeks for the Web & design team at Canonical. Here are some of the highlights of our completed work. Web squad Web is the squad that develop and maintain most …

Vanilla Framework 2.0 upgrade guide

We have just released Vanilla Framework 2.0, Canonical’s SCSS styling framework, and – despite our best efforts to minimise the impact – the new features come with changes that will not be automatically backwards compatible with …

New release: Vanilla framework 2.0

Over the past year, we’ve been working hard to bring you the next release of Vanilla framework: version 2.0, our most stable release to date. Since our last significant release, v1.8.0 back in July last year, …