Skip to main content

Your submission was sent successfully! Close

Thank you for signing up for our newsletter!
In these regular emails you will find the latest updates from Canonical and upcoming events where you can meet our team.Close

Thank you for contacting us. A member of our team will be in touch shortly. Close

  1. Blog
  2. Article

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.

Related posts


Lyubomir Popov
17 February 2025

A deep dive into our grid system and typography for the A4 format

Ubuntu Article

We recently redesigned our whitepapers as part of our broader rebranding project. Let’s look at some of the ideas behind our approach to layout and typography. The goal? A reliable, accessible modular system that communicates with clarity, purpose and precision across mediums — qualities that tie directly back to our brand values. Context ...


piperdeck
20 January 2025

An Introduction to Open Source Licensing for complete beginners

Design Article

Open source is one of the most exciting, but often misunderstood, innovations of our modern world. I still remember the first time I installed linux on my laptop, saw the vast array of packages I could install on it, all the utilities and libraries that make it work, all the forum threads filled with advice ...


Maximilian Blazek
6 November 2024

Designing Canonical’s Figma libraries for performance and structure

Design Article

How Canonical’s Design team rebuilt their Figma libraries, with practical guidelines on structure, performance, and maintenance processes. ...