The 5 key UX steps behind the award winning startup Intact

Every idea can be a great idea. It all depends on how you nurture it and patiently you explore its holistic user experience design. Yes, it takes time.

Another comment I often receive as well is that initial design artefacts look babyish and can be seen as a waste of time. Besides the fact that all that makes it a fun activity, we must never underestimate how difficult it is to translate our ideas into prototypes that can be understood by others. By others, I mean anyone that is not you and this includes your team members.

In this post, I will be walking you through some snippets what it took to create the advanced prototype that Intact used to win the Maltese and European startup competition. My role with this startup was that of a tech-mentor, UX-designer and Android Developer.

The principles shown in this course are also taught at Saint Martin’s Institute of Higher Education in the User Experience and Interaction Design courses.

The European awards won by Intact — “Client in Focus Award” and “Overall Winner” at the JA Europe Enterprise Challenge

1 – Storyboards

The storyboard set is the first bridge between your conceptual idea and its tangible future. At this point, there are some principles that I like to follow:

  1. Simple — Leave detail for later. At this point you have to get the concept through and it has to clearly show the entire context. Don’t elaborate on the drawings and the best way of stopping yourself from getting into detail is by using (at least) medium sized felt-pens or markers. Just to spell it out, do not use pencils, pens of fine writing stationery.
  2. Fast — If it’s taking you long to draw your storyboards, something is not right. The sample below took approximately 8 minutes (yes, I timed it for the purpose of this blog :))
  3. Self-Contained — Each storyboard should include the start and end of a use case scenario. If you can’t do that, your idea is not clear enough. They way out is force yourself to sketch more storyboards until it’s clear.

Tools needed? Just blank A4 papers and a thick pen (at least medium).

I will be providing a complete guide to storyboarding in a separate blog post. The photos below show a selection of storyboards that I created for Intact. They basically depict the scenario where a user decides to go for a journey, sets on the Intact app and then an accident happens. The phone generates an automated emergency call while the user is unconscious and he is saved just in time.

2 – Experience Mapping

After various iterations of storyboarding, the main stages of the user journey are to be established. A user journey is not a pun on Intact, but it is a way of identifying the key stages in the user experience.

The next, exciting, step is the creation of an Experience Map. There are different ways of mapping experiences and below you may see a snippet of my adaptation. There are various resources for a variety of techniques and my favourite resource is Kalbach’s book published by O’Reilly in 2016. In a separate blog post, I will be writing in more detail about this.

The photo below shows an initial experience mapping exercise on a whiteboard. I like using 5 rows and every column would represent a stage. My preferred rows are the following:

  1. Stage — Clearly state the stages that make up the entire experience. This must not be limited to the use of the app and should also include the steps before using the app (discovery etc.) and also after the use of the app (sharing etc.)
  2. Medium — Which medium/channel will enable the user to experience the stage? This might not necessarily be the software app but it could also be signs, adverts or other channels. On the other hand, it can also be a specific feature or page in your software.
  3. Experience Boosters — What can make your experience an amazing one at that stage?
  4. Experience Poopers — What can ruin your experience at that stage?
  5. Notes — I like to use this row to add notes and things to keep in mind at that stage of the experience to make sure you boost the experience rather than anything else.

Tools needed? Nothing that you don’t already have. This can be done on a whiteboard where size does matter. An alternative is using an A2 (at least) paper and post-it notes.

Intact Experience Map

3 – Flow

If you wish to guarantee failure for your app, just skip this step. Once you have identified and explored the main stages of the experience that your service/app will enhance, it is now time to design how users can actually will walk through the app itself.

Designing the flow can, and should, take different forms. In this blog I’m only displaying a sketch of the initial screen flow of the prototype. This diagram shows how the user can navigate from screen to screen. This diagram is crucial as much as it is simple. It allows you to identify gaps in the experience and whether you need more (or less) screens to deliver a good experience as originally intended.

While this is helpful, this does not exist in isolation. It also needs to be accompanied by a proper Flowchart or Activity Diagram (the UML equivalent to a flow chart). The Activity of this app is not presented in this blog due to its commercial sensitivity.

Tools needed? Just a blank paper and pens. It’s recommended you organise this in single pages to reduce complexity and facilitate understanding and feedback.

4 – Sketch the Screens

Prototypes serve 2 main purposes: getting feedback and being thrown away. Never get to attached to a prototype because you should/could be trashing it not soon after its creation. In other words, the best prototypes are those that can give you quick feedback as fast as possible. This means that if you spend too much time building early prototypes, something is not right.

I came across industrial situations where designers invested significant time in coming up with highly polished screens early in the process. They thought it was shameful to show paper-based sketches/prototypes to the client. Showing the advanced pixel perfect prototypes lead the client to believe that everything was cast in stone, fine and ready to go for launch. This product barely made it to the store…let alone being commercially successful.

Sketches showing different options for the Intact Main Menu screen

Tools needed? Just blank A4 papers, pens (finer pens are OK now) and a phone/stencil. NB: Different colours, help.

My approach displayed in this blog is basically tracing the outline of my phone on a blank A4 paper and start placing UI components. It’s really fast and easy to throw away. Once this gets finalised with the clients/users, you can start refining on Powerpoint and then on Sketch, Photoshop, Illustrator.

Variations of the OnJourney Screen of the Intact App

5 – High Fidelity Prototypes — Getting Real

Android is my favourite mobile operating system to create advanced prototypes that people can actually use and experience. This is the ultimate method of getting user feedback. It also allows you to create Wizard-of-OZ prototypes and I will present a couple of such demos in another blog entry.

In the Intact case, mobile prototypes were important to provide the user with a complete experience and to reassure that the technology can deliver what is promised. This blog entry skips the under-the-hood details that make all this possible but we’re more than happy to display some screenshots of the actual application below.

Do you have an idea and don’t know from where to start? Simply contact me and we’ll explore the possibilities

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s