Premise
Dynamic personas are personas created using user behaviors data to reveal new design and improvement opportunities for better user experience in a product.
Synopsis
A persona is a realistic, impersonated version or a representation of a target user or audience (Monus, 2019; Tictrac, n.d.). Personas are generally constructed from a user research consisting of behavior patterns, cognitive characteristics and demographic data (Huang et al., 2012). However, this traditional static way of creating personas can no longer support the constantly changing and evolving target audience (Huang et al., 2012). Nowadays, classification or clustering methods of machine learning allow creation of personas to be data-driven. The nature of data-driven personas are consistent and data-based user goals, tasks, and attitudes. Data-driven personas present new design opportunities for better user experience and at the same time serve as arguments in personalization decisions (Guo & Razikin, 2015, p. 417).
Substantiation
Dynamic personas exploration
The main goal of this technological research is to educate decision makers and UX designers about the importance of dynamic personas in product creation. Therefore, the first part of technological research focuses on the process and usage of dynamic persona creation in different fields. The following are resources for exploration of dynamic persona:
- Persona development: Anthropological user research, classification of users in product development
- Persona creation with machine learning classification and/ or clustering: Book 1, post 1, post 2, Youtube videos part 1, part 2, part 3, part 4
- Persona creation using Google Analytics: Article 1, article 2, article 3
The above exploration resulted in understanding of the variety of techniques available to process user behavior data into dynamic personas: Using aggregated data such as Google Analytics data, using classification machine learning method or using clustering machine learning method. The exploration also resulted in the understanding that to create a dynamic persona from raw datasets, K-Means seems to work the best because it basically groups users based on characteristics. Therefore, the K-Means model was chosen to be used further in this technical research.
Interactive elements of web application
The next step is to explore a variety of possibilities on how to show dynamic personas best to the target group of the research. The second goal (also a personal learning objective) of the research is to display a machine learning algorithm outcome that is written in Python into a web-application (HTML, CSS and Javascript) and showcase it in an interactive way. The following are resources for exploration on how to show dynamic personas best to the target group of the research:
- Web-application using Python: Flask documentation, Django documentation
- CSS animation: Article 1, article 2, article 3, article 4
- Parallax effect: Article 1
The above exploration resulted in a conclusion that Flask would be ideal to be used to combine python and front end languages (HTML, CSS and Javascript) to show dynamic personas because it is pretty simple, yet extendable when necessary. Therefore, Flask will be used to create the web-application for this research. The chosen technology to show the importance of data and dynamic personas are CSS animation and parallax effect.
Data set
Lastly, a dataset of telecom users were chosen to be used in the dynamic persona creation. The dataset was taken from Kaggle in this link. The telecom users’ dataset was used in the persona creation because it has a good amount of variables, good representation of users and there are almost 6 thousands rows in the dataset.
Prototypes
#1 CSS animation for dynamic personas | Concept
In this iteration, the focus was to draw a CSS animation concept that showcases the relationship between data and dynamic personas. Inspired by Mario Kart games, a concept was created as follows: Take a dataset and create the personas using the K-Means model, then showcase the persona results on the web-application using Mario Kart characters. After that, similar to Mario Kart games, the characters will move to the finish line as a representation of users trying to achieve their goal. In the Mario Kart game, when the characters hit a question mark box, they will speed up. In the prototype, the question mark will represent a new data point of users that, if used wisely by UX designers and developers, can help the users achieve their goal faster.
The concept was drawn and explained in the above images and posted in the State of art Technology group in Microsoft Teams with a total of 4 users to test their understanding of the concept. Two out of four respondents did not come back with answers. While the two others understood the concept, uncertainty was still portrayed in their feedback. The two users’ understanding was considered good enough feedback for the concept of the prototype to be continued to the next iteration.
#2 CSS animation for dynamic personas | Web-application
As the concept was considered understandable, in this iteration the focus was to build Flask web-application, create personas through K-Means model and showcase that in CSS animation in accordance to the Mario Kart concept mentioned earlier. The first step was to create the personas in the Jupyter Notebook and saved it in a JSON file. Next, a Flask web-application was built. Taking the data from the JSON file, and using CSS animation, the below representation of personas was created. The size of each image represented the amount of users in each persona.
The Jupyter notebook can be found here.
This iteration was tested with 3 people, two with good understanding of data and one without. The test was done through a shared screen within Microsoft Teams video call. Their feedback of the above iteration was mostly curiosity on how/ why it came to these personas and that they were interested in learning the persona creation steps. However, since the topic of machine learning immediately took some of them aback, an interactive tutorial with clear introduction and summary could be helpful for the learning process.
#3 Dynamic persona creation tutorial | Concept
The feedback from the second user test indicated that the users were more interested in the creation process of personas and interactive tutorial, this iteration focused on the concept creation of the interactive tutorial. The concept of the interactive tutorial was created in a Google Sheet presented in the below video. Each sheet represented each web page which content highlighted information about dynamic persona creation using K-Means.
The concept was tested with 3 people, two different from the previous participants, one with good understanding of data and two without. The test was done through a shared screen within Microsoft Teams video call. Their feedback of the concept was that the steps and setups for the tutorials made sense and that CSS animation and parallax effects could indeed add enthusiasm and interactivity to the tutorials.
#4 Dynamic persona creation tutorial | Web application
In this iteration, the concept written on iteration three was transformed into a web-application. Flask was used to create the web-application skeleton, HTML was used for the template of each page, one global CSS style sheet was used, and Javascript code was added within the HTML templates when needed. Within the tutorial, every persona calculation was created in the Jupyter Notebook and the images shown on the pages were manually drawn. This is applicable to every page that has a calculation in it, except Page 5 where user image sources was taken from a Jupyter-Notebook/Python-processed JSON file.
Find here the repository for this iteration.
The web-application was tested with 3 people, two different from the previous participants, two with good understanding of data and one without. The test was done through a shared screen within Microsoft Teams video call. Their feedback of the web-application was that the order of explanation was clear, the parallax and CSS animation gave sophisticated interaction opportunities that encourage finishing the tutorial.
Conclusion
Throughout this technology research, one of the most important reflections is the importance of user testing, both in the concept phase and in the early phase of development. This definitely shows in the direction change between iteration 2 and iteration 3. Next to that, this research also shows that Flask is sufficient to build a simple web-application with HTML, CSS, Javascript, and Python. Furthermore, using fancy animation or parallax effect will be useless when the users don’t understand the message the researcher was trying to deliver during the user test. However, using parallax to slowly show information like in Page 8, CSS animation to show graphs like in Page 9 and to show 3D effect like in Page 12 can enhance enthusiasm and interactivity in such tutorials. In the future, it is better to first get input on what is a better way to educate people on a topic, rather than immediately start with a concept then test it. Additionally, the personas were separately calculated on the Jupyter Notebook in the prototype, while the visuals shown on the web-application are manually created. In the future, this research can also be taken further in the visualization of Python calculation in HTML/ Javascript in combination with parallax effect and CSS animation.
References
Guo, H., & Razikin, K. B. (2015). Anthropological User Research. Proceedings of the Annual Meeting of the Australian Special Interest Group for Computer Human Interaction, 417. https://doi.org/10.1145/2838739.2838816
Huang, K. H., Deng, Y. S., & Chuang, M. C. (2012). Static and Dynamic User Portraits. Advances in Human-Computer Interaction, 2012, 1–16. https://doi.org/10.1155/2012/123725
Monus, A. (2019, November 12). Interaction Design: Guide to Creating Personas. Hongkiat. https://www.hongkiat.com/blog/creating-personas/
Tictrac. (n.d.). Our Interactive User Persona. https://tictrac.com/research/our-interactive-user-persona/