Week 5: Personas

Lecture Pod

User Personas

In most cases, personas are synthesised from data collected from interviews with users that are captured in one to two pages description that include behaviour patterns, goals, skills, attitudes and the environment or context. With a few fictional details to make the persona a realistic character. For each product, more than one persona is usually created but one persona should always be the primary focus of the design. When defining personas, we need to ask ourselves, what are the task your user is trying to perform?

User Personas

  • age
  • sex
  • occupation
  • hobbies
  • likes/dislikes
  • other details germane to the product such as behaviour patterns, goals, skills, attitudes, their environment (or Context)

Large vs Small Audience

  • Who is your core audience?
  • Who is your fringe audience?

If you focus on your core audience when defining your personas, you can still cover a large portion of your user base. The hope is that your design will satisfy your fringe audience but to keep the focus on satisfying your core audience.

Artefact Personas

Another approach is to also apply personas to the Artefact (the project or product, not the user). This can be most useful for client meetings where often the discussion collapses into subjective assertions. To develop an artefact persona, you ask product personality questions such as:

  • If the interface was a person, what would she or he be like?
  • How would you expect users to react when they first view the product?
  • How would you describe this product to a friend?
  • How is the product different from competitive products?
  • Which celebrity (or car, movie, etc.) is the product most like? Least why? Why?


Class Time

On Monday, we made a collage for Dave Smith’s user persona. Then, we worked on creating our own user persona using xtensio. On Wednesday, Sarah was away so we did not have a class but we started writing user scenario for our project.



“Make It Persona(Ble): How Creating User Personas Helps You Sell More”. Ecommerce Insights Blog. N.p., 2017. Web. 8 May 2017.

“Persona | User Experience Design, Ux And Usability Blog – Keepitusable”. Keepitusable.com. N.p., 2017. Web. 8 May 2017.


Week 4: Instructional Design

Lecture Pod

Instructional Design is how to “do something”, or to explain “how something works”. Working memory refers to how we manipulate information, stalling our short-term memory and one of IKEA executive functions. Working memory is limited for example if you ever gone to the shops thinking you will remember what you need and found you forgot something when you got home, you have experienced the limits of working memory.

Photography might not be the best way to go for instructions because often the material contains too much information to be useful. There is too much detail in the photographs. Kinds of interaction such as instruction (by clicking buttons), conversation (back and forth dialog), manipulation (drag and drop elements), and exploration (open, playful, game like). Challenges can be limited screen area and resolution. Opportunities are time and layering details and information and revealing these responses.


Class Time

On Monday, we spend one hour to finish our user interface workflow for our toast. Then we had a class vote to see who’s toast user interface workflow was the best. After that, our class created Invision, a website, and posted our toast user interface workflow on it.



“Instructional Design – Education And Training UK”. Education and Training UK. N.p., 2017. Web. 8 May 2017.

Li, Dian, Tom Cassidy, and David Bromilow. “The Design Of Product Instructions”. N.p., 2017. Print.

Week 3: Design Patterns for screen

Lecture Pod

Design patterns and interactive design goes beyond style and more than just visual repetition. They are similar and reusable solution that have a working function often seen interface and software design. “Each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the problem presented”.

User interface pattern must guide users through a smooth experience. Some patterns such as the hamburger menu is easily recognizable for users. The hamburger button is a symbol that contains three parallel horizontal lines displayed on the screen. Other useful design patterns are account registration, long scroll, card layouts, hero images, animation, material design, responsive design, and flat design.


Class Time

In class, we started using illustrator to design our user interface workflow.  We first practice setting up one of Greg’s user interface workflow before we design our toast one. Once we finished designing 2 pages of our toast user interface workflow, we had to post it on our blog. On Wednesday, group 2 had to deliver their precedent presentation. Then, we had to discuss our project ideas in a group. Every person will be given a colour hat to talk about the other person’s project.



Up, Navigation. “Navigation With Back And Up | Android Developers”. Developer.android.com. N.p., 2017. Web. 8 May 2017.

“How To Use The Best UI Design Patterns”. Studio by UXPin. N.p., 2017. Web. 8 May 2017.

Week 2: Graphic Design: Interactive Digital Media

Lecture Pod

There are at least 8 distinct phases that can be seen in the design interactive process. Error, Idea, metaphor, scenario, engineer task, model, representation, and manipulation. Early visualization with diagram and flows helps us identify potential directions, missing information, and the most appropriate next steps. At some point in the design process, we need to draw our solutions and create interactive prototypes to validate our ideas. Personas helps us understand people.

The concept of context is an important component to consider when designing interactive. Context includes ‘contexts for use’ and ‘context of use’. We need to understand ‘what people are trying to do’, ‘how they may try to do it’, what gets in the way or helps’ and ‘where they might be doing it’.


Class Time

In class, we continued our toast work. Group 1 did their precedent presentation. We started doing flowcharts, storyboards, and user interface exercise for making toast. Then we had to post our flowcharts and storyboards on our toast blog. We also looked at some wire-frames.



“Multimedia Lecture”. sirjongsubjectlectures. N.p., 2017. Web. 8 May 2017.

“OIDMTC”. Omdc.on.ca. N.p., 2017. Web. 8 May 2017.

Making Toast


How to toast a bread?

  1. Put bread in toaster
  2. Check toaster is on
  3. Check toastiness dial
  4. Pop down
  5. Wait for toast to pop up. Get out spreads
  6. Check toastiness
  7. Take out
  8. Put spreads





UI Flow Diagram








“Charlotte Hunter Nutrition | What’S The Deal With Acrylamide?”. Charlottehunternutrition.co.uk. N.p., 2017. Web. 8 May 2017.

“Mistral MBT 141 4 Slices Toaster Malaysia – MY Online Home Appliances”. MY Online Home Appliances. N.p., 2017. Web. 8 May 2017.


Week 1 Lecture Notes: What is interaction design?

Lecture Pod

Everything from a button to a link to a form field is part of interaction design. Bill says that interaction designer has 3 questions to answer, how they do, how they feel, and how they know. He further explains that a human design something as we provide possibilities. As designers, we design the way that the machine gives feedback and what kind of knowledge we expect from our users.

Definition for interaction design:

  • “Designing interactive products to support people in their everyday and working lives”
  • “The design of spaces for human communication and interaction”

Definition for interactivity:

  • “Of or relating to a program that responds to user activity”
  • “Working together so the total effect is greater than the sum of 2”
  • “Capable of acting on or influencing each other”

A few interactions that we have communicated are book, mobile phone, online website, or a conversation. In interaction design, there are 5 key design area that contributes to interactive products, interactivity, information architecture, time, and motion, narrative and interface.


Class Time

On Monday, we started creating our blog using a website called WordPress. On Wednesday, we had to write down each step on how to make a toast.



people, Stock. “Flat Design Concept Mobile Apps Phones In Hands Of The People”. Dreamstime.com. N.p., 2017. Web. 8 May 2017.

“What Is The Difference Between Interaction Design And UX Design?”. The Interaction Design Foundation. N.p., 2017. Web. 8 May 2017.