This visualization project is aimed at helping aspiring UX (User Experience) professionals to understand and explore the UX field by interacting with visualizations that cover - backgrounds of people in UX, skills needed, roles in the industry, design processes across companies and salaries across different UX roles.
This project was a part of the curriculum for the course I took during my first on Information Visualization which included learning the principles of data visualization and tools like Excel, Tableau and D3.
My team and I are all UX Designers and when we first decided to go into User Experience, we had a lot of questions when we first started out - Can we make it in the field if we have a background in something that has nothing to do with computers? What do the salaries look like? What does a design process look like in a company? While it was easy to find the definition of User Experience, it was difficult to identify what practical skillsets would be required to pursue a career in this field. As a newcomer, it is difficult to identify which part of the design process you would fit into. As we discussed each of our journeys, we were realized developing a visualization that answers some of the burning questions that newcomers to field may have would be an interesting and challenging task with the potential to help others.
The resulting project can be seen here: https://kaushiki-priyam.github.io/
We visualized the Nielsen Norman Survey as they are considered a key leader in user-centric design along with few more resources to answer questions that students new to the field of UX may have! The other sources used have also been listed in the website.
We hope that this helps students interested in the field of UX and who want to know if this field would suit their needs.
User Flow Diagram, Brainstorming, Gathering data, Validity and Reliability of data | Source checking, Developing visualizations, Developing Style Sheet, Sketching
My contribution was finding sources of data and ensuring that we used data from good, reliable sources - this also meant ensuring that our visualization did not change the meaning of data and represent it in an alternate manner. I designed the visualization for the graph on the design process across companies to help users be able compare how the process varies across different companies. Additionally, to add the visual design, I added some hand-drawn sketches inspired by FutureOf
The duration of the project was 3 months and these were the various phases through which it went through:
Developing the framework
As we explored this topic, we wanted our website to be useful for students who are new to the field of UX. The questions we wanted to be able to answer after going through our website was - “Would entering into the field of UX be a suitable career for me?”
We had multiple brainstorm session for what questions we would like answers for. Each of us took time to write down what we would have liked to know when we started and listed it out individually. We worked together and pieced the website as list of questions that a student new to the field may ask.
The broad questions were:
What academic backgrounds do people working UX have?
What levels of education have they completed?
What design process are used in the industry across different roles in UX?
What skills would different roles in UX require?
How much will I get paid?
Working with data
In order to identify answers to these questions, we searched across multiple sources over the internet. We needed a source that was reliable and trustworthy so the visualizations would be truthful and valuable for the user.
For questions 1 & 2: We used the Nielsen Norman Survey on UX Careers
For questions 3: Instead of generalizing the data across multiple companies, we decided to stick the a realistic picture among the big tech companies and design Agencies and chose - Google, Facebook, Amazon, IDEO and Microsoft. We then looked at job descriptions to identify skills and the key processes that different roles in UX would be a part of.
For questions 5: We used data from Glassdoor and PayScale
The above was the result of multiple iterations of finding the right data and ensuring it answered the questions we were looking for. The process looked something like this:
We made a list of questions, then looked for sources. Sometimes there weren’t reliable sources or data and so we discarded the questions. If we did find a reliable source, we did a preliminary analysis to look at the data more closely and ensure we wouldn’t be relating the wrong variables.
Identifying the Visualization
There were some visualizations we were very excited to try out as they looked really “cool”. However, with the guidance of our professor and peers, we often got feedback about what visual representation would be ideal to help the user understand the depth of data we were trying to explain.
Particularly, I worked on visualizing the design process across multiple companies. I used the Nielsen Norman framework for the design process, which listed the key tasks under each phase. Then as I ran through the job descriptions we had gathered across the companies, I cross referenced responsibilities that for a particular role with the task under each process.
I’d like to acknowledge that at this point, I was aware that this wouldn’t be completely accurate for the different job roles, but it helped highlight the under which phase different roles are involved within the UX process and provide a student with a rough idea. Though, we highlight this fact in the text, to bring the essence that each phase of the design process is important, each role has constant line through all the phases in the background. However, segments where the particular role is important, it highlighted and brought to the foreground.
Further, in order to represent that each phase often runs into another, I decided to go with water painted background with no definite background
At each point, I took feedback from my teammates and noted their reactions. This helped me iterate through the various design. A key feedback was moving the description of each role on top. The graph was initially designed with the phases on the X-axis below all the roles, however, most users didn’t read the phases and it them a while to understand the graph.
The final step was replicating the same design across multiple companies and placing it within the website.
As someone who loves to sketch from time to time, we decided to add sketch elements into the website. I drew various characters inspired by FutureOf to help the website keep users engageed and add a fun vibe to it!
Exhibition & Usability Testing
After we pieced all the visualizations together and added the visual sketches, we exhibited the website to the staff and peers at the ISchool. It was a great opportunity for us to conduct some usability testing and learn about people’s reaction the each of the visualizations. We were pleased that we got a lot of positive feedback from our professor, Marti Hearst as well as our friends. All feedback we received were recorded and when there was consistent trouble with some visualization, we went back and checked the visualization to improve the experience.
The final deliverable was a website here. The visitors at the exhibition loved interacting with the website and had better understanding of the field of UX after.
“The paint strokes with the intersecting lines of roles per company is creative and innovative. This is a creative and well-chosen use of the looms chart; very well designed. Overall, a creative combination of information that gives real insight about the state of the field for those who want to go into UX as a career.”
Professor Marti Hearst
One of the most important learnings was that gathering the right data and choosing how to represent the data can be a really long process. I initially thought working with tools like Tableau and D3 would be the longest part of the project, but as we realized over the particular course about how carefully we need to represent data and ensure we do not mislead our users, it became crucial to spend more time looking at it in different light.
Gathering feedback regularly from peers is extremely useful tool during the design process. Another person’s insights often help us look at things differently which can lead to new ways of presenting things!
This was a wonderful project to work on from which I learnt a lot. I’d like to thank my teammates - Michelle Chen & Kaushiki Priyam - for their support and the enthusiasm they brought to the project. I’d also like to thank my Professor, Dr. Marti Hearst for pushing our team at each step to do a successful job.