User Persona example – Dave Smith

As explored in lecture pod 5, user personas are used to ensure that designs meet their target audience. For the interactive design ‘Making Toast’ a user persona was created to orientate the final design.

Dave Smith

Dave Smith is the user persona for ‘Making Toast’, his persona profile is featured bellow.



Dave Smith’s user persona created with xstensio


Using all the information provided a mood board could be created, this mood board is used to influence design choices and as a visual reference for Dave Smith’s personality.


thumbnail_User Persona Mood Board - Dave

Dave Smith’s mood board



UI Screen Designs

After having worked through descriptions, flowcharts, storyboarding and UI charts a design can be transferred from paper to screen.

Below is a mock up of my ‘Making Toast Interactive’, created using Adobe Illustrator.

First I created the grid and basic wire framing within the outlines of the media the interactive is designed for, in this case the iPad.


Screen Shot 2017-03-13 at 9.34.04 am

Basic wireframing for making toast interactive


Once the wire framing was in place I added in the main content.

How To Make Toast Ipad content

Making toast interface with main content


After the content had been added I created the interactive elements such as the buttons and the progress bar.


Screen Shot 2017-03-13 at 9.35.15 am

Making toast interactive with buttons and progress bar



The next layer in my illustrator file included the highlights, the highlights in this interaction occur when the user touches certain elements. This is illustrated bellow with a bold yellow.


Screen Shot 2017-03-13 at 12.10.41 pm

Making toast interactive with brighter yellow highlights


The last layer in my illustrated mock-up was a gestures layer, showing the gestures used to navigate through the content.



Making toast interactive with gestures


Making Toast Mini Site

After creating a text description, flow chart and storyboard I continue to plan out my making toast interactive on paper through creating UI flow, a sitemap and sketching out an interface design.

UI flows

UI flows are useful in mapping out a user’s journey through an interactive and planning out how you will design the interactives navigation. Based on the storyboard I produced previously here is my making toast UI flow below, it features the buttons in the interface that the user clicks through to get through each step.


Making toast ui flow

UI flowchart for making toast


Extending content

After creating UI flows it is easier to see where you can extend the content of the interaction and therefore enhance the user’s experience. As shown below I have been able to extend the user’s experience by creating sections such as “What type of bread?”, “The toastiness scale”, “Topping ideas” and “Don’t like the result”. These sections can be accessed when the user reaches a corresponding step to the extended content.


extended ui flow

UI flowchart for making toast with extended content


Navigation and Sitemap

Once I completed the UI flow I was then able to create a list of primary and secondary navigational elements within the interface. The primary elements include the main elements that the user clicks through to find out how to make toast, whilst the secondary elements are the elements that users click through to reach extended content.

Primary Elements

  • Let’s Begin
  • Next
  • Back
  • Finish

Secondary Elements

  • What type of bread
  • The toastiness scale
  • Topping ideas
  • Don’t like the result

Listing the primary and secondary elements makes it easier to produce a sitemap as shown below.


Making toast sitemap

My sitemap for making toast


Interface Design

Once a sitemap is created an interface can be designed. As shown below I have created a sketch of my interface to map out where all my elements will be located and so I can have a clearer idea of what the interface will look like for the user.


Making toast interface design

My interface design for making toast


Whilst sketching out an interface design I was able to see areas of the interaction that could be improved e.g. I created a bar showing the user where they were up to in the process of making toast.

After planning out all these steps on paper I have gained a better understanding of what the interaction will look like and how it will work and therefore I am then ready to move on to create a digital mock up.


Although storyboards are most commonly used for films and animations, they are quite useful in the process of designing interactions. The storyboard allows the designer to express ideas and display sequences in a visual manner, this is helpful to a designer as they can organise their design on paper before committing to a design on screen.

Shown below is an example of storyboarding for an interaction on making toast.


Making toast storyboard@2x

Storyboard I created on how to make toast