A Tool for Empathetic User Experience Design

Role: Research, Physical Product Design (Make Tool)
Timeline: 3 months

As designers we always spend a lot of time in the beginning of every design process to understand the user and clients needs. Because of the amount of the time and budget spent at this stage, sometimes we see designers and stakeholders prefer to skip some of the initial research activities and rely on their anecdotal knowledge about the issue.



Collaborative Design

As part of my master thesis at ASU I decided to dive deep into this problem. I focused on empathy as the key to create a make-tool that can help design teams to not only understand the user and clients needs but also to bridge from research to a designed solution much faster than before.

Magnetic Wireframe Tool

A magnetic wireframe tool has been used as a ‘make tool’, and a sample project has been defined in order to see how the tool can create empathy among stakeholders. In this study fourth year graphic design students at Arizona State University (ASU), USA, are participating as users, faculty members have the role of clients, and Forty, Inc., a design firm in the Phoenix area, is the design team for the study. All of these three groups are cooperating on re-designing the homepage of the Design School in Herberger Institute for Design and Art (HIDA) at ASU. A method for applying the magnetic tool was designed and used for each group. Results of users and clients’ activities were shared with the design team, and they designed a final prototype for the wireframe of the sample project. 


Observation and interviews were done to see how participants work with the tool. Also, follow up questionnaires were used in order to evaluate all groups’ experiences with the magnetic wireframe. Lastly, as a part of questionnaires, a sentence completion method has been used in order to collect the participants’ exact thoughts about the magnetic tool. Observations and results of data analysis in this research show that the tool was a helpful ‘make tool’ for users and clients. They could talk about their ideas and also ii designers could learn more about people. The entire series of activities caused an empathetic relationship among stakeholders of the sample project. This method of using ‘make tools’ in user experience design for web sites can be useful for collaborative UX design activities and further research in user experience design with empathy. 

Magnetic Tool In-Action

Here, we can watch a videos, showing users and client interaction with the tool and another one that shows the design team interaction with the tools and its results:

Magnetic Wireframe Used by Users

Magnetic Wireframe Used by Design Team


How might we be able to create more empathy faster in the beginning of a design project using participatory design?


User Interviews, Participatory Design, Surveying, Contextual Inquiry


This was as part of my graduate program at ASU. Forty design Studio helped with the final tests.