Thursday 23.1 – Wrap-up

The final day of the work in progress!


  • Conduct a usability test with your me-fi prototype
  • Make final corrections based on the feedback
  • Finish teams’ A3-poster
  • Update your progress in the team’s blog (if possible, also add a web-versions of your logos and posters)


On Friday we will have informal presentations and demos of your teams’ projects, starting from 10.00.

You can show your blogposter and demo. Tell in your own words what your team has being doing during the past 9 days – what was your original idea, how it evolved, what key feedback you’ve received through the usability tests, few words about your design…

After presentations we will go to TV-tower for some well-earned after course-fun! 🙂

Wednesday 22.01 — Design + Development

Today we started to incorporate logos, designed during Tuesday class, into final poster designs. Work on interactive me-fi prototypes is continuing as well.

Today’s presentations about handy Design Tips:

Tuesday 21.1 – Designing

Daria presented a process and a case study of logo design. The theme of the day was to create a suitable logo idea for the team’s project, draw couple of sketches and trace or create a logo based on these sketches in Illustrator.

Tomorrow we will finish the logos, start working with the project posters and continue with app development and testing.

“How to Design a Logo” Presentation:

Monday 20.1 – Me-Fi Prototyping

We will continue in the MacLab, Astra building 4th floor, room 403.

On Monday we will finish projects’ paper prototypes and move to prototyping with computers. We suggest to use

For alternatives and more info, check this post.


A wireframe shows the hierarchy of the objects, such as headings, paragraphs, images, videos, buttons and menus as well as the main features of the app, page or service. The purpose of a wireframe is to give a quick overlook of the importance and position of various objects, and to help to assess whether or not something is missing or is out of place.

A simple low-fidelity wireframe usually lacks specific visual treatment – objects are pictured as boxes , lines and areas in white, black and shades of grey. General symbols, such as “play”, “settings” etc. can also be applied. Such approach makes the layout quite robust and easy to modify. Wireframing is an useful tool for the development process – when the structure is set, development can begin simultaneously with the user interface design and copywriting.


Example of a page and a wireframe (


Medium fidelity prototype

Me-fi prototypes differ from high fidelity prototypes in their “unfinished” look.  The purpose of such visualisations is to test (again) the logic of the layout, interaction and behaviour as well as the content – copy, titles, labels, menus… In case copy is not yet available, placeholder texts such as “lorem ipsum” are commonly used instead.

Developers might program simple prototypes, just to express the interaction between views. This can be done from scratch or for instance with a help of libraries like jQuery, CSS Blueprint or Bootstrap or APIs. However, all project are different so there is no standardised approach.

Graphic designers tend to use stencils and desktop design softwares such as Photoshop, Illustrator or Fireworks + UI packs. Connections between views can be done in Fireworks or images could be saved and interconnected with online applications such as InVision. Another approach is to use desktop or online application which is especially dedicated to creating mockups and prototypes, such as ProtoShareJust in Mind and Balsamiq.


Wireframe with interactions. (From ProtoShare)

Schedule for the 2nd week:

  • Monday – prototyping
  • Tuesday – design + prototyping
  • Wednesday – design + testing
  • Thursday – wrapping up
  • Friday – presentations

17.1 – Testing paper prototypes

Friday’s topic: testing paper prototypes.

We will look into scripted usability test approach, see some examples and conduct usability tests on your paper prototypes.

Recording from the test

A summary video of one of the 6 tests conducted during the class.

Testing paper prototypes

Usability test example

For the future

Testing high fidelity prototypes

(Home page tour 6:00, first task 8:10)

Wed 15.1 – Personas, Scenarios, Use Cases

Today we will continue to work in A447:

  • 10.00 Opening team blogs and writing  1st post – a short description of the project idea
  • 10.30 Lecture on Personas, Scenarios and Use Cases
  • 11.00 Team work – create 3 posts:
    • Post 1, Persona– Determine 1 primary persona for your project; combine a bio with his/her picture, short bio, short problem centred story and main goals (3-5).
    • Post 2, Scenario – Write a scenario (a activity centred story) where your persona interacts with your  solution. Tip: try to avoid words like “clicks”, “selects a calendar” and “opens a new window”, use more general verbs instead.
    • Post 3, Use Cases – Pick use cases from the previous scenario. Concentrate on most complex and less obvious stories. 
User Story template: 
As a (persona/role/"user"), I want to do (what), so I can (achieve what).

Photos from the brainstorming


Tuesday 14.1 – Ideas

Schedule for today

  • 10.00 Zahhar’s presentation on technological trends
  • 10.30
    • Idea round
    • Forming teams
    • Opening project blog
    • First post: “About” – project concept


Update. Couple of photos from yesterday 🙂

2014-01-13 12.40.41 2014-01-13 12.40.57 2014-01-13 12.41.14

Monday 13.1 – Introduction

Welcome to our workshop!

Today we saw presentations from Zahhar (coffee machine, Phidgets), Ilya and Daria (Touch the Exchange, mTLU), Mati (Eye-tracker) and Valeria. See you tomorrow for brainstorming, team forming and starting your project blog! 🙂

Our schedule for today

  • 10.00- Meeting in front of T-217 (Terra-building)
  • 10.30- Presentations in Ooas (cafeteria on the ground floor of Astra building)
    • Zahhar’s demonstrations
    • Ilya and Darja introduce “Touch the Exchange” -project
  • 11.00- Project demo continues in university’s Library
  • 12.00- in A-447 (Astra building)
    • Ilya describes “mTLU” project
    • Mati showcases an Eye-tracker
    • Zahhar tells us about new technology trends
    • Valeria briefs about interaction design
  • 12.50 Recap and “homework”

IxD is in the air…

Warm welcome to our participants of Winter School, Experimental Interaction Design -workshop.

Detailed schedule and first day’s slides will be uploaded here soon.

We will meet on Monday 13th of January at 10AM near the Winter School room T217 (Terra-building, second floor). Here are few useful links:
See you soon!
Kind regards,
Valeria Gasik
Daria Tokranova
Zahhar Kirillov
P.S . As an appertizer, here is an interesting talk for you to explore: