1. Silent movie themed old-fashioned black background with white letters appears. Text: „BEFORE“ – 3 hours to complete the tasks (maybe a slide like “Due to in 3 hours” or showing the due to time and then what is the time for Laura).
2. Laura is sitting happily behind the computer and starts typing a document in her computer, titled „Homework“, then starts thinking…
3. Text: „I wonder how my coursemates have done this assignment?“
4. She starts looking for blog addresses, or Facebook or Twitter and turns serious.
5. Text: „This is going to take ages!“ „Let’s see if the course description says anything about this homework“
6. She starts looking for the course description in TLU page and IMKE page, and starts to feel bothered that she can not find it.
7. Text: „Are the course descriptions top secret information around here?!“ „Maybe other students from previous years have done something like it?“
8. Types in Google keywords IMKE, project, homework – results nothing relevant, Laura is irritated.
9. Text: „Why couldn’t I get all this information from just one place?“
10. The computer screen goes blank, leaving only the time ticking down.
11. “MEANWHILE” – then the blue IMKE monster appears on the screen and blinking its eye. The colors are turned a bit on and a clip of another student inserting the feeds to the site, click-by-click, is shown and a section of where all the web addresses (blogs, wikis, twitter) are collected together as fresh info.
12. “AFTER” – Laura is once again sitting behind the desk having the paper with her “Homework” in front of her. The same questions come up only this time it is showing click-by-click how the student can go to IMKE-monster web. First she views all recent info gathered from different blogs, twitter accounts etc. Also, she sees all the information her course mates have posted about the homework
13. Text: „Great, all the posts and recent discussions of my course mates“
14. Zoom in „About the courses“ and once again showing click-by-click how to reach the Courses menu and find the course she is looking for.
15. Text: „Course information… description… even evaluations by other students, cool!“ „I wonder what kind of projects previous students have done for this homework?“
16. She clicks on the Projects button which opens the bookshelves, she looks facsinated and looks around the projects page
17. Text: „This is everything done by IMKE students? Amazing!“
18. She goes back to her homework and starts typing, meanwhile looking at the IMKE monster page, the camera zooms slowly out showing how much time she has saved.
19. The IMKE monster appears for a couple of seconds saying “Feed me” and blinking his eye.
Few ideas for the graphic design.
Esteban - nice hand drawn footer
Meomi - cute illustration
Bearskinrug - serif type, nice typography
Flossy - Colors, big fonts
Gravual - Eyecatching monster
WeAreCupCup – shelf
Our group is building an informal mash-up page for IMKE -program. So far we have conduct following steps:
- Goals, main concept
- Personas, Scenarios
- Detailed description
- Activity report, feedback
- User stories (and giving birth to IMKE Monster)
The next step was to construct a set of paper prototypes – basic wireframe layouts constructed with different static and movable elements drawn on piece of papers.
Sometimes this sort of page design planning is done on a software or a web application but as we found out old-school drawing was faster and far more fun. During the process we also came up with a name for the site as well as dozens of cute little actions and additional functions which would add personality and interaction to the site.
Our paper prototypes look like this:
Testing and feedback
We tested usability of paper wireframes by asking four testers to complete simple tasks – among others to find out how to add a feed to the stream, how to view a certain project and how to see comments for a course.
The test process resembled playing with paper dolls. Test user pointed at things and another person – i.e. paper computer – committed actions by moving pieces around.
Most of the feedback is already taken into account and will be kept in mind when designing interface and content. Feedback questions and suggestions concerned for instans:
- blog URL – blog address or exact feed address
- content of login/registration box; form
- lacking of login link; perhaps next to about link in upper right corner
- identification of user writing comments
- verification of users adding projects
- place for title on the shelf or on top of a project thumbnail
- tagging: automatic fetch or additional tags
- relationship status of IMKE monster: single or complicated
Regardless the longish list, most of the IMKE test users found 3-view page rather simple. Our team is especially happy to know that the concept of feeding the IMKE monster with blog posts, tweets and other content was clear and welcomed. Or as our future notification box might say: “IMKE monster approves. Yes.”
Posted in Design
Tagged IMKE, imkedesign
First object of the second workshop lecture was to produce a set of brief user stories for specific actions and functionalities that our IMKE community page will have. Our team started gathering these brief stories by looking at the targets set by our personas and scenarios. As one can see, some of the goals were overlapping.
passive following ( > reading posts)
contacting fellow students ( > viewing original blogs)
informal information (> reading posts)
recommendations on upcoming courses (> reading comments)
previous achievements (> browsing through projects)
personal interests; what is said about courses (> reading comments)
participating in conversation (> writing comments)
linking blog content to IMKE page
(> 1. adding feed URL 2. tagging posts with a) IMKE b) course number or other tag)
As a result we came up with following diagram describing user stories in different views.
Our page will have 3 main views
- main (feed page)
At the moment Other views -section presented in the diagram concerns About page. Some of the elements such as logo will be shown in all views.
Diagram misses action “Logging out” which will happen by clicking on “Log out” -link. The link will appear next to About-link in upper right corner when user is signed in.
Few haunting questions
- When adding feed, should the user add own hash tags/labels as well?
Automatic tag fetching (IMKE, IFIxxxx).
- Do we need search? No. Done by filtering.
- Do we need a log in -link?
Not really but we can have a small one in the upper right corner.
The birth of IMKE Monster
While writing our users stories we sidetracked and started to talk about adding RSS feeds as action of feeding. Going further away from the task we started to discuss Tamagochies, cookies and monsters. As a result we came up with initial idea of IMKE monster who will be fed with our blog content and tweets. The story will continue…
Our upcoming IMKE page will soon be asking for an interface. The great way to start is look what has been done before.
Struggling for a while with a proper keyword, I found a term “smash-up”. A smash-up is basically the same thing than a mash-up – a page that aggregates and combines different data streams, sources and applications – but with a social twist. This post has few curious examples, one of them from College of William & Mary:
I also found that there is a great trend to build official and unofficial university mash-up sites like ours in US. Sometimes community sites have a great amount of visual and textual content like in UBMC, in other cases it might only be a small site which mainly concentrating on tweets, like in the case of NC State.
In many cases pages used rather simple solutions, couple of them listed below:
Probably there are also pages done with tools such as paper.li. Most of the examples are from US. There might be good pages in Europe as well but they are either hidden or I do not know where to look.
Posted in Design
Tagged IMKE, imkedesign
Last night we had a FlashMeeting session with our Media Project teacher and other students. The main outcome was that we should really start working on the project’s UI and content. The page also still needs a name. Done so far:
- a detailed project plan
- some initial engine related coding
– blog feed reader
– importing data to the database
- for Interaction & Interface design
– video script ideas
Feedback compilation on scenarios
IMKE personas in a group photo
Martin, inactive student
- “Works well as a problem scenario”
- Q: Do you have a space where it is possible to upload and share files?
Things are uploaded elsewhere – blogs, Google docs, SlideShare, Youtube, Flicr…
- Q: Will all the teachers also have accounts in IMKE community site?
They can create one.
- Q: Why Facebook feeds?
To 1) aggregate all IMKE related stuff 2) marketing purposes: to show that our community is actually active and “web 2.0”.
Ralph, power user
- “Duplicating the problem that was already explained with Martin”
- “I could imagine that active Facebook users don’t want Facebook group content duplicated in IMKE community site feed.”
- Q: Will there be also other content filtering options than by course?
For power users we might need an option to hide some of the incoming feeds, FB group for instance.
Robert, potential student
- “Courses are always listed in the curriculum”
- Q: What kind of information is only visible to the members?
Initial idea was that the information that is public already should be open on IMKE page as well, sort of like here – but with some spicing and visual aspect.
- Q: Photos from some events and Facebook group discussions are probably private? Comments about courses may be also very critical in some cases. Will these be public?
Photos, comments: IMKE group has over 30 members and while being informal, it is still self-censored by common sense.
We have to think about the identification for commenting too, maybe linking them to blog accounts, Facebook or e-mails.
Laura, active student
- Q: Will there be a way to browse blog posts by tags? These will be probably presented as a tag cloud? It would be more realistic to rely on categories.
We might need both – tags and categories as well as instruction how to make one’s blog/post visible on the page.
- “I think that it would be important feature to have a shared calendar in the community site.”
Great idea. How can be done; filtering?
It has been one year now that Robert has been working in an elementary school as a math teacher. He loves the world of numbers, but is now realizing that teaching is really not for him. He dreams of taking off time for himself in a totally new environment. Therefor, he is exploring websites of different universities to find an interesting master’s program via ERASMUS.
He starts his browsing among universities in Norway and Finland as he does not want to move that far from home. All the websites give him general information of different courses and additional links of more forums based discussion related to different courses. He gets a lot of information and clearer view of the programs which help him to realize his searching is not finished.
After long search, he reaches the webpage of Tallinn University. He looks through the pages of different institutions and their programs in hope to find “The One”. From the very first moment his interest is caught by a program in institute of informatics with intrigue name – Interactive Media and Knowledge Environments. The title is promising, but unfortunately the curriculum is quite general and formal, giving no idea of the actual activities. Robert start to surf around the net to find more information. He also wishes to find a list of supplementary courses with some recommendations. What he really misses, is contacts of current and previous students to get their opinion/suggestions. He is really stuck an in between wether to choose one program in Norway or to trust his guts and come to Estonia.
Luckily he found a contact for the program, the study assistant suggest him to visit IMKE community page which gathers different materials produced by fellow students into one place. The page contains a lot of different information about blogposts, done projects, upcoming events, pictures from previous activities and also links concerned other relevant information. Robert spend nearly half of the day surfing around the page and is thankful in his mind that some students have actually done helpful environment for possible new comer.