Portfolio

A Beginner’s Guide to Finding User Needs

userresearchbeginnersResponsibilities:Teaching Concept, Writing, Design

A text written for all those who want to design products according to the needs of human beings. It covers recruiting, interviews, observation, data analysis and reporting. It is written in a hands-on manner and has lots of examples.

Since it has its origins in teaching design students, it does not require the learner to spend much on costly equipment or services. The text itself is free  (CC-BY-4.0)

http://jdittrich.github.io/userNeedResearchBook/

User Research: eLearning

Responsibilities:Research Concept, Data Collection, Report

To find out how and why students use digital media for their learning, students of different courses were interviewed and observed. I analyzed the data using affinity diagramming to determine the needs of the students.

The research helped to focus project resources on topics relevant for student's learning: distribution of learning materials in the form of files and communication were key concepts for the students. Project resources could be allocated to these core topics that might have been  neglected otherwise.

Teaching: Human Centered Design Research

Responsibilities:Teaching Concept,Teaching, Contact to mentors

For three terms I taught basic skills for Human Centered Design Research, including interviewing, observation, data analysis, idea generation (based on the earlier research, naturally!), paper prototyping and user tests.

I taught lightweight methods suitable for the student projects. To teach new skills I used educational scaffolding including worked examples, exercises and  »how-to-cheat sheets«.

Students used a wiki for documenting and presenting their projects and for exchanging information.

Each term we cooperated with another company or foundation which provided the design brief and mentoring: The university’s library (Service Design focus, Class '12/'13), Creative Commons Foundation (Web platform focus, class '13) and the Guardian Project  (Mobile Interfaces and encryption, Class '13/'14)

During the three terms the class has been constantly evaluated and improved using an action-research approach. I collected data via feedback rounds, questionnaires, interviews and evaluation of deliverables. For analyzing the data I used affinity diagramming. The research triggered several changes like an introduction to tools for collaboration, improvement of teaching material, the creation of templates and the shift to interactive workshops for learning skills.

On the wiki which we used for organizing the class are examples of students’ works as well: Class '12/'13, Class '13, Class '13/'14. Below some examples for teaching material and results.

See also: https://blog.mozilla.org/ux/2013/08/bauhaus-wrap-up/

User Research and Usability Evaluation: Medienwiki

Responsibilities:Usage Analysis (Interviews, Web-Analytics), Touchpoint Analysis, Design Concepts, Usability-Tests, Programming (CSS/Javascript)

The medienwiki is an important part of the eLearning strategy in the Media Arts and Design course of the Bauhaus University. I prepared a redesign of the platform.  I analyzed the students use of the system with qualitative methods and web analytics. Core problems were identified using this mixed-methods design:

  • It is difficult to add images though it is often needed.
  • Information is hard to find
  • many functions are not used (and visible in the Interface) while others are often needed but hard to locate.
  • Students must be reminded by teaching staff to add a license to their content

Results:

  • From several card sorts by current users I derived a meaningful structure for the content.
  • The upload functionality (a important function for students to present their designs) was changed to an assistant based design. I used a iterative design approach going from sketches to paper prototyping, jQuery based prototypes and finally tests in the actual wiki environment.
  • An new, clear design to the overall wiki based on the Bauhaus University’s main page design.

The upload dialog was iteratively developed using wireframes and tests with paper prototypes. I ran a usability test  on the working implementation (measuring completion rates and using a  think aloud protocol). According to the results, the usability was greatly improved. Testers added license information to their files, probably as result of support of the interface (Testers were not told before that this was a problem that the interface may solve)

mapping the content

mapping the content

paper prototype

paper prototype for the upload dialog

wireframing

wireframing

working implementation

working implementation upload dialog

Wikifoto from 2014-04-12 21:14:29

customization based on Mediawiki’s Vector Skin (The default in Wikipedia)

Interaction Design and Research: Hold-And-Move

Responsibilities:Gesture Concept, Data gathering, Prototyping, supporting data analysis, writing

In this work, we designed, implemented and evaluated a new gesture for mobile devices. The work was done with Alexander Kulik. We published the results on the ACM MobileHCI '12.

holdAndMove

Hold and Move in Action: The thumb "holds" the background, the index finger moves the piece.

The hold-and-move gesture allows seamless switching between navigation (panning/scrolling) and manipulation on touchscreen devices: While a single touch still pans and scrolls (e.g. a list of songs) an additional finger will move items (e.g. a list entry when resorting a playlist).

Without hold-and-move, this switch from scrolling to dragging items is usually achieved using a  cumbersome ›long-tap‹ gesture.

The hold-and-move gesture runs on off-the-shelf multitouch devices and does not need on-screen widgets. It is build upon natural principles of interaction: Holding something in place with one hand, doing manipulations with the other – just like one does when repairing a small device or when writing on a sheet of paper.

hold_n_move1_arrow

pan and scroll by touching with one finger

hold_n_move2_arrow

for drag and drop,use one finger to "hold" the screen in place, so the page/background does not scroll or pan…

hold_n_move3_arrow

…and drag the item with the other finger

The research was published in the proceedings of the ACM MobileHCI '12 (read the preprint-Version).

For examples, go the Hold-and-Move Webpage. It even has interactive demos you can try on your smartphone or tablet!

Usability and Interaction Design: Netspeak

Responsibilities:Usage Analysis (Web-Analytics, Interviews), Prototyping, Usability-Tests

Netspeak is a web-service which offers the search for suitable word in the context of an existing sentence. The service demands interaction by writing in query syntax. In the redesign, a graphical interface was developed and evaluated. In a usability test users had shorter task completion times and gave higher subjective ratings when using the redesigned interface.

sketches

sketches

mockups

mockups

implementation (jQuery+API)

implementation (jQuery+API)