A short post explaining why and how I used Keynote to prototype a multi-application login journey.

Background

We have started designing a new login interface for one of our clients who has multiple applications.

Users should be able to login from the homepage and have access to all of the applications. We started to think about how this might look in terms of logic/code and user interface.

My task was to create an interpretation of the sketch above that we were able to take out and about for testing.

Why Keynote?

There are a lot of really great prototyping tools out there such as Balsamiq, Sketch, Photoshop etc. However, I sometimes find that when using these tools, prototyping tasks can quickly become over-complicated and considerably time consuming.

Keynote is a popular choice for designers and both Apple and Google use it a lot.

As well as saving time (and money), it allows you to export to many formats which means your designs are testable on almost any device.

Creating the Layouts

The layouts I created are very basic with no styling. I want to keep the applications almost anonymous for testing purposes.

To create the layouts, I simply used the shape tool in keynote.


The ‘click’ functionality is created by placing a transparent shape over the area you require to be ‘clickable’ and linking it the the correct slide. You can add a link to any object, however it’s important to note that if you try and link grouped shapes/text, that the link won’t work when the slideshow is exported to PDF.

TIP: For grouped items, place a transparent box over the area you wish to be ‘clickable’ and add the link to that instead.

I haven’t included much animation on my prototype, I probably should however I wanted this to be as time efficient as possible. I decided that at this early stage, animating all the things probably wouldn’t add that much value when testing with users, as we are focusing mainly on the journey from A - B.

I did include some animation on the login forms to imitate text being typed into a field, to make the journey seem more real. I did this by adding a typewriter animation to the field.

TIP: Note that the typewriter animation only works when the presentation type is set to normal.

Exporting to PDF

I exported my presentation to a PDF because we wanted to be able to test it on a range of devices. Of course, you can just test in presentation mode using the Keynote app.

To export to PDF, go to File - Export To - PDF.
Check the links work, and you’re good to go and get started with some user testing!

Finished Product

Here’s a little .gif of my finished keynote prototype.