Intro

In my previous lab report, “NETWORKS ON – WHO’S THE MURDERER?“, I introduced a Chinese online reality show that is called “who’s the murderer”. In short, in each episode, 6 celebrities need to solve a crime together and find the real killer among themselves. Except for the player who plays detective, all the other 5 players will be considered suspects initially, but only one of them is the real killer. Now, 6 seasons have passed and the relationship between existing characters is very complicated. The fans want to create a map for the show, but it is very hard for them to archive the goal since they don’t have the right tool. Luckily for me, I learned to use Gephi and also learned a lot about data storytelling. Therefore, after I tried with a beta version on lab 3, I decided to work on this topic for the final project, which is creating the M universe infographic. 

Tools

Gephi can be very hard to work with when comes to design. Therefore, though I have a lot of experience working with similar datasets, I’ve experienced many failures. For example, the biggest challenge for me is always choosing the right layout. I tried Force Altas and Yifan Hu’s proportional layout first. They both show the key connecting nodes clearly but the cluster looks like a mess. I tried to manually adjust it but it looks bad. Then, I move on to the Fruchterman Reingold layout. Now I can see each edge label clearly and I can make the key connection standout but by changing the size of the connecting nodes. However, I still can’t separate clusters. Finally, it comes to me that I can alter the area and gravity to change the distance between each cluster. Now, I got my prototype map.

3.Guerrilla Usability Testing

At this stage, I think it is time to do a usability test on visual design. Since I’ll create all the content writing and other charts on Figma, it is important to figure out if there is any major issue with the current visual design. It would be very hard to adjust the existing font, color, line weight later in the process. We need to settle down on this visual element and make a standard in the future.

I choose Guerrilla Usability Testing because it’s satisfied all my needs. The guerrilla test is a cheap and fast way to observe if the users like the visual design. Under the current condition, I make one adjustment to this test. Instead of asking people in person, I share this image with multiple testers who watched the show before and interview them via a chat application. The result is fruitful.

Several version is created and send to the testers to review again and after that, I export the final version with transparent background.

Findings of the map: When I examine the final map, I am amazed by the algorithm of layout and how some nodes can connect a series of shows to another. It also helps me understand the show better. For example, in the NZND series, there is a character that is called Jia tianwang. He is the father of many other characters. I think it is not exaggerating to say that without him, there is no NZND series. However, I never think he is that important before. It is hard to connect him to all his kids after 6 seasons. Therefore, I think my map will be useful to my audiences and they will find much more in the final infographic.

5.Infographic design on Figma

Step 1: Gathering more data

It is very hard to acquire free data if the genre is related to detective. On the one hand, nobody likes being spoiled. Therefore, the fans won’t discuss murder weapons, motives, or causes of death openly. Even if they do, they provide overview result rather than organized raw data. On the other hand, these data are valuable to the show crew. They rarely provide statistics on case details because they are afraid that fans will use it to guess or even predict future plots. Thus, the only thing I can do is watch in speed mode and take notes. I decided to go over the core series from the beginning to the end. I need to refresh my memories of the plots. Meanwhile, I will pay close attention to the success rate of murder; the vote distribution; the kind of murder weapons; motives, and causes of death. Other than that, I do acquire a list of celebrities who plays in the show and their identities from Wikipedia.

Step 2: Complete the map by adding more details

As I planned, I put the network map on the center of my Figma page. Then, I start to tell stories by adding more detailed data. For each series, I add a section to present fun statistics of this series. For example, the yellow part shows a set of data that explains who is the richest character in the universe. I input a list of debts this character owns but also explain how he gets rid of all his debts. When I finish these storyboards, I placed them on each side of the map properly and connect them to the series that they belong to.

Step 3: Design Deck/ UI Kit

Before I continued processing other graphs and charts, I need to make a design deck to keep the visual consistency. First, I extract the map colors. I won’t use it anymore since I already finished the core. Then, I picked 2 colors to distinguish gender. Next, I use adobe color to extract a set of theme colors from the show’s logo. I used these colors for all additional graphs and charts. Besides the main Chinese font, I decide to use a special number font that is called “graduate”. This font provides a vintage feeling that compatible with the detective genre.

Step 4: Adding peripheral statistics charts and graphs

I used the right corner of the infographic to present the celebrity players’ statistics. It is not surprising that the 3 main characters’ players also have the highest appearances number. I also add gender-based color to distinguish female celebrities who joined the show. It is not surprising that there are only 6 female players because this is in line with my perception. The rate of female players is 21%, I would say this is not ideal. Though it would be understandable that male players may enjoy participating more in detective shows to show their courage or high IQ, I think the show crew should always consider bringing more female players. Female players frequently find clues that it hard to observe by a male player and they are really good at finding motives of the murder due to their higher empathy ability.

Having this data on my mind, I start to calculate several interesting rates. The most surprising result comes from the success rate of finding the real killer. Players win just half the cases, and therefore, the success rate of finding the real killer is exactly 50%. Then I turn my sight on which gender is more likely to win as a murder. This result makes me feel less comfortable compared to how many female players are in the show. Only 20% of female players win as a murder. but 66.7% of male players win as a murder. The result could be more astonishing if I just use numbers. There is only 1 murder who wins in 14 cases as a female player. I really don’t know if this could be better if I count more cases, but the result is frustrated. I’m not saying that there is discrimination against females. However, I would suggest the show crew add more female players and try to balance the result a bit. Otherwise, it may give the impression that female players are less smarter than male players. Or worse. As a result of my findings, I add my comment on the infographic and under these pie charts.

Now we can talks about the more entertainment part of this infographic, which is the statistic of murder related fun facts.

Above all the motives, revenge is the top reason for killing. This could be true in real life too. The second motive on the list is protecting themselves. Though the murders are not “good” citizens, they don’t want to kill until they are threatened. Other motives include money, protection, etc.

When we compared the cause of death and murder weapons, an interesting discovery is that even suffocated is the top death cause, a knife is the top murder weapon. One of the reasons for this result is people use all sorts of tools to suffocated victims, which may vary from tie to fish type or even bowstring.

Now, I have my infographic for final round of usability test.

5.Unmoderated Usability Test

Unmoderated can be done remotely and we just need to prepare the right questions and tasks. For my infographic, I picked 2 fans who have more knowledge of the show and gives them 2 tasks and 2 questions.

1. What can you learn from the infographic?
2. Find out how much money Xu Baozi has now
3. Find out which female players have the highest appearances
4. What is missing here?

Here are my findings of the unmoderated test:

1. They can identify the connection between colors and series; they recall lots of memories of the show; it rise their curiosity about what I do with other cases
2. 2 out of 2 find the correct information
3. 2 out of 2 found “Wang Ou” is the top female player
4. They want to know who is the killer of each case; They both asked about another series that is not included on this map; They want to know more about each player’s voting rate and other details; the Series names are missing.

After I add a tag for each series, now I have the final infographic.

6. Final Infographic

Future Direction

In this part of my report, I’d like to explains what I’ll do next with my second usability test.

1. I decided to go over more cases (that didn’t select for this project) by watching them again, and evaluated if they can be added to the infographic. There is a whole hospital series that hasn’t been selected here since the newest season introduced a new story which I haven’t had the chance to check.
2. I‘m planning to do more user research on how to hint at the murderer without showing them too obviously. For one thing, I want to protect those who haven’t watched. For another, I want to keep only one version. Otherwise, the audience will find it anyway.
3. There are many other interesting data that I haven’t explore. I also consider making a small multiple session to present players’ data one by one. It might bring the attention of those celebrities’ fans. It will help to promote my work.

I also plan to move this report to my portfolio website and keep posting on the process.

Reference

1. https://studentwork.prattsi.org/infovis/projects/gender-portrayal-in-film/
2. https://studentwork.prattsi.org/infovis/projects/once-upon-a-graph/
3. https://usabilitygeek.com/guerrilla-usability-testing-how-to/https://zh.wikipedia.org/wiki/%E6%98%8E%E6%98%9F%E5%A4%A7%E5%81%B5%E6%8E%A2%E7%AC%AC%E4%B8%80%E5%AD%A3%E7%AF%80%E7%9B%AE%E5%88%97%E8%A1%A8#cite_note-4
4. https://blog.datawrapper.de/gendercolor/
5. https://samanthaz.me/writing/finding-the-best-free-fonts-for-numbers#:~:text=Droid%20Serif,to%20read%20on%20any%20screen.