GivingQuiz
I was connected me with two Master’s School of Business students from Stanford University to help them with a project that they are calling GivingQuiz. It was clear to me from the start that Kavya and Judy did a lot of research and put in a lot of hard work to develop the beta version of the quiz that they shared with me. What they needed me to do was to turn their betta quiz into a beautiful working product. Specifically, they requested that I focus on ensuring the language is understandable for a wider demographic as well as creating a beautiful user experience.
My target demographic for this project are educated users from the age of 18 to 35 in middle- to upper-class homes. I learned that I would also be working with an illustrator and a web developer to get our quiz into a working finished product. After understanding what my clients’ needs are, I can more clearly define my role in the project. I am supporting the team by delivering all parts of the UX process to design a giving quiz from initial user research and analysis to ideation and testing the prototype with users.
I couldn’t be happier. I have over a decade of experience as a visual designer and fell in love with the UX Design process because of the human interaction element of user research. This project will allow me to enjoy the best of both worlds.
My target demographic for this project are educated users from the age of 18 to 35 in middle- to upper-class homes. I learned that I would also be working with an illustrator and a web developer to get our quiz into a working finished product. After understanding what my clients’ needs are, I can more clearly define my role in the project. I am supporting the team by delivering all parts of the UX process to design a giving quiz from initial user research and analysis to ideation and testing the prototype with users.
I couldn’t be happier. I have over a decade of experience as a visual designer and fell in love with the UX Design process because of the human interaction element of user research. This project will allow me to enjoy the best of both worlds.
Understand
UNDERSTAND: Problem to Identify
The first step in the UX design process is to research the problem better to understand the users’ needs and pain points. I started with secondary research so that I can grow in understanding my target demographic as well as any associated problems with taking personality profile quizzes. In my research, I discovered that most users have a tolerance for how long personality tests should be according to how thorough the results would be. 100 questions seemed long but users would investor time if they felt like they were getting quality results. Also, the design of a quiz has more of an effect on the credibility of the quiz than the actual quiz content itself. For example, World Vision has a quiz that they call “The Giving Quiz” and users’ results appear in the form of celebrities. The initial impression is more of a casual social media quiz than a trustworthy in-depth approach to further understanding one’s giving personality. Essentially, users want a personality quiz that both looks good and is trustworthy.
UNDERSTAND: Competitive Research
As part of my research, I took a look into other giving quizzes and how they approached visual design and wording. Part of the UX process is to learn from others’ mistakes and victories instead of trying to reinvent the wheel.
Kavya and Judy were inspired by 16Personalities’ Myers-Briggs style personality test. This 100+ question profiler has become one of the most used free resources for people to learn more about themselves. They chose to go with an illustrated look with friendly colors and quite simple wording. The questions are phrased as statements that users agree or disagree with to come up with their results. 16Personalities is not a giving quiz but a great start to my research.
Kavya and Judy also pointed me to Gates Foundation’s Kind Quiz, World Vision’s Giving Quiz (mentioned earlier), Charities Aid Foundation, and WiserGiving.org. I already touched on World Vision’s Giving Quiz but I want to add that the aesthetic is a simple questionnaire that users get results in the form of a celebrity such as Oprah or Bono.
The Gates Foundation’s Kind Quiz has a photo in the background of one question per page. The background picture is a little bit hard to make out what it is with the question card covering it but the general impression that I think they are going for is “nice” and “elegant.” I think that the majority of credibility for this quiz comes from the fact that it is the Gates Foundation.
The Charities Aid Foundation is an organization specifically designed to fuel the relationships between generous givers and charities. Their 10-question quiz seemed almost too fast to be accurate yet carry similar credibility of the Gates Foundation because of who Charities Aid Foundation is. They have all of their questions on one scrolling page but they did something unique. They put a color reference in front of each answer option. There are four options and each option is red, green, blue, or yellow. I’m not sure why but it makes the design seem simultaneously clean and chaotic.
Lastly, WiserGiving.org has a 7-question quiz with photos and 6 answers per question. One question even requires users to select 2 answers! Their design approach comes off much more scientific and their profile theory is clearly stated in the form of a hexagonal graph.
UNDERSTAND: Primary Research
After about 4 hours of secondary research, I felt comfortable enough to move forward with primary research. I created a presentation and set of questions to ask users to gain an understanding of what they like and dislike about the beta GivingQuiz and its competitors’ language and design.
I took a divergent thinking approach into this first set of user interviews with no hypothesis or expectations except to allow the users to guide the process. Kavya and Judy had done a lot of research to get the point they were at with the beta quiz so I didn’t feel the need for a larger round of user research. I set up meetings with 6 users, 3 of which had already completed the quiz and I asked them the following questions:
These questions were asked during these slides:
The slides included the words that Kavya and Judy mentioned that they had some push back on as well as a few that I added for a better understanding. The last section of the quiz included screenshots of the competitors’ quiz designs. This will allow the opportunity for users to provide their direct feedback on what is working and what isn’t working for the quiz design.
The first step in the UX design process is to research the problem better to understand the users’ needs and pain points. I started with secondary research so that I can grow in understanding my target demographic as well as any associated problems with taking personality profile quizzes. In my research, I discovered that most users have a tolerance for how long personality tests should be according to how thorough the results would be. 100 questions seemed long but users would investor time if they felt like they were getting quality results. Also, the design of a quiz has more of an effect on the credibility of the quiz than the actual quiz content itself. For example, World Vision has a quiz that they call “The Giving Quiz” and users’ results appear in the form of celebrities. The initial impression is more of a casual social media quiz than a trustworthy in-depth approach to further understanding one’s giving personality. Essentially, users want a personality quiz that both looks good and is trustworthy.
UNDERSTAND: Competitive Research
As part of my research, I took a look into other giving quizzes and how they approached visual design and wording. Part of the UX process is to learn from others’ mistakes and victories instead of trying to reinvent the wheel.
Kavya and Judy were inspired by 16Personalities’ Myers-Briggs style personality test. This 100+ question profiler has become one of the most used free resources for people to learn more about themselves. They chose to go with an illustrated look with friendly colors and quite simple wording. The questions are phrased as statements that users agree or disagree with to come up with their results. 16Personalities is not a giving quiz but a great start to my research.
Kavya and Judy also pointed me to Gates Foundation’s Kind Quiz, World Vision’s Giving Quiz (mentioned earlier), Charities Aid Foundation, and WiserGiving.org. I already touched on World Vision’s Giving Quiz but I want to add that the aesthetic is a simple questionnaire that users get results in the form of a celebrity such as Oprah or Bono.
The Gates Foundation’s Kind Quiz has a photo in the background of one question per page. The background picture is a little bit hard to make out what it is with the question card covering it but the general impression that I think they are going for is “nice” and “elegant.” I think that the majority of credibility for this quiz comes from the fact that it is the Gates Foundation.
The Charities Aid Foundation is an organization specifically designed to fuel the relationships between generous givers and charities. Their 10-question quiz seemed almost too fast to be accurate yet carry similar credibility of the Gates Foundation because of who Charities Aid Foundation is. They have all of their questions on one scrolling page but they did something unique. They put a color reference in front of each answer option. There are four options and each option is red, green, blue, or yellow. I’m not sure why but it makes the design seem simultaneously clean and chaotic.
Lastly, WiserGiving.org has a 7-question quiz with photos and 6 answers per question. One question even requires users to select 2 answers! Their design approach comes off much more scientific and their profile theory is clearly stated in the form of a hexagonal graph.
UNDERSTAND: Primary Research
After about 4 hours of secondary research, I felt comfortable enough to move forward with primary research. I created a presentation and set of questions to ask users to gain an understanding of what they like and dislike about the beta GivingQuiz and its competitors’ language and design.
I took a divergent thinking approach into this first set of user interviews with no hypothesis or expectations except to allow the users to guide the process. Kavya and Judy had done a lot of research to get the point they were at with the beta quiz so I didn’t feel the need for a larger round of user research. I set up meetings with 6 users, 3 of which had already completed the quiz and I asked them the following questions:
- What is your definition of charitable giving?
- How do you participate in charitable giving today?
These questions were asked during these slides:
- What first comes to mind?
- What is your impression?
- What is your favorite feature?
- Is there anything about this that is difficult for you?
- What do you think can be done to make it easier?
The slides included the words that Kavya and Judy mentioned that they had some push back on as well as a few that I added for a better understanding. The last section of the quiz included screenshots of the competitors’ quiz designs. This will allow the opportunity for users to provide their direct feedback on what is working and what isn’t working for the quiz design.
Define
The next phase of the UX process is to further define the problem to help identify an approach to solutions. The goal of this phase is to create “how might we” statements, which are going to be the questions that I keep in my mind when designing solutions. To come up with these statements, I'm going to consolidate the data generated from the research phase to create an approach to the ideation phase of the UX process.
DEFINE: Affinity Map
There were 6 users that I interviewed over video chat where they were asked a series of questions regarding the wording of questions, their impression of word meanings, and their opinion on competitor design elements. You can find the research interview documents here.
There were three common themes that seemed to arise from the user interviews that all users seemed to share. The most problematic pain point for the users was wanting to clearly understand the meaning of the question. The language that the users were unfamiliar with caused frustration and confusion. Also, longer questions seemed to confuse users rather than give them a better understanding. The second common pain point for users was wanting to know that they were answering correctly. When users did not understand the terms, questions, or answers, they felt more likely to answer in a safer manner. Lastly, users expressed that the design of the quiz would make the difference between an enjoyable experience or unnecessary stress. Below is an Affinity Map that I generated from the research interviews:
DEFINE: Affinity Map
There were 6 users that I interviewed over video chat where they were asked a series of questions regarding the wording of questions, their impression of word meanings, and their opinion on competitor design elements. You can find the research interview documents here.
There were three common themes that seemed to arise from the user interviews that all users seemed to share. The most problematic pain point for the users was wanting to clearly understand the meaning of the question. The language that the users were unfamiliar with caused frustration and confusion. Also, longer questions seemed to confuse users rather than give them a better understanding. The second common pain point for users was wanting to know that they were answering correctly. When users did not understand the terms, questions, or answers, they felt more likely to answer in a safer manner. Lastly, users expressed that the design of the quiz would make the difference between an enjoyable experience or unnecessary stress. Below is an Affinity Map that I generated from the research interviews:
DEFINE: Empathy Map
After analyzing the common problems from the user interviews, I combined them into a fictional persona, Greg the Giver. Greg is the composition of the shared frustrations and enjoyments of the users that were interviewed. The purpose of this empathy map is to create a unified effort to design a better solution to GivingQuiz users’ pain points. The empathy map will be kept nearby as I begin the design stages in order to keep these problems at the forefront of my mind. |
DEFINE: Problem Defined
Based on the research, our users expressed areas where they saw problems and proposed how to achieve a better user experience. The combined feedback could be simplified to the following questions with proposed solutions:
Based on the research, our users expressed areas where they saw problems and proposed how to achieve a better user experience. The combined feedback could be simplified to the following questions with proposed solutions:
- How might we use terms that are easier to understand?
- Using common language compared to industry language will have a deeper positive impact on user experience
- Writing shorter and simpler questions will give users a better understanding of what the question is asking
- Using specific examples in the question will help more personality types understand the question (Sensory vs intuitive processors)
- How might we create a quiz that inspires confidence and creates an enjoyable experience for our users to trust their results?
- A clean, simple design gives users the impression that the quiz is trustworthy
- Limited use of colors and pictures will reduce the stress level of the user
Ideate
Now that research has been analyzed, a strategy has been developed, and structure for the project has been set up, it's now time to start designing wireframes for the app. Starting with mobile-first, I quickly sketch out a loose wireframe to be turned into a high-fidelity prototype for usability testing.
Went from a 41-question quiz to a 20-question quiz and then back up to a 28-question quiz.
IDEATE: Sketching
Using the red routes from user research and strategy, I created sketches of the screens that make up the critical user flows that GivingQuiz users will follow when taking the quiz. Focusing on user flows, I sketched out my ideas quickly onto a whiteboard. I started with the questions interface because it is where users will spend most of their time. Throughout this process, I am keeping my empathy map in mind. I drew up 6 versions and decided to run with the one that seemed to match what users wanted from the research interviews. From here, I head into Adobe Xd to design a high-fidelity prototype. You’ll be able to see the prototypes in the following sections but here are my sketches:
Went from a 41-question quiz to a 20-question quiz and then back up to a 28-question quiz.
IDEATE: Sketching
Using the red routes from user research and strategy, I created sketches of the screens that make up the critical user flows that GivingQuiz users will follow when taking the quiz. Focusing on user flows, I sketched out my ideas quickly onto a whiteboard. I started with the questions interface because it is where users will spend most of their time. Throughout this process, I am keeping my empathy map in mind. I drew up 6 versions and decided to run with the one that seemed to match what users wanted from the research interviews. From here, I head into Adobe Xd to design a high-fidelity prototype. You’ll be able to see the prototypes in the following sections but here are my sketches:
Iterate
ITERATE: Prototype User Testing
After designing a prototype in Adobe Xd being careful to include the user feedback from the research round as well as meet the needs of my clients, we landed on our first testable prototype. I enjoy testing earlier in the UX process with a lower fidelity version but our project looked more like a sprint due to the short amount of time that we had to work on it. I chose to test my prototype in Adobe Xd’s share feature with users over Zoom. Users would join me on a call and share their screens with me as I observe their interactions and ask them to talk through what they’re thinking and experiencing. During the usability testing, I will be asking these questions throughout the interviews:
ITERATE: First Round of Usability Testing
The purpose of the first round of usability testing is to test the first version of the prototype of The GivingQuiz to uncover usability problems by interviewing 5 users over a video call as users test use the version of the design based on the device that they are using.
Click here for the first prototype mobile version of The GivingQuiz.
Click here for the first prototype desktop version of The GivingQuiz.
After interviewing the users, these are the most common suggestions that they vocalized:
I brought the user feedback to Kavya and Judy and worked with them on updates to the GivingQuiz for the next round of usability testing. One thing that was skipped was adding more details to the home page and the results pages. I think that my clients wanted to keep the home page simple (similar to 16Personalities) to prevent bias as users were taking the quiz. As for the results pages, this was something that clearly still needed some attention. Nonetheless, they gave me their changes and I made design updates based on user feedback and observations to create the second prototype.
ITERATE: Second Round of Usability Testing
The purpose of the second round of usability testing is to test the second version of the prototype of GivingQuiz to uncover usability problems by interviewing 4 users over a video call as users test use the version of the design based on the device that they are using. For the second round of usability testing, only four users were able to participate in the video calls due to cancellations but I decided not to reschedule the users that canceled and asked them to provide unmoderated feedback instead.
Click here for the second prototype mobile version of The GivingQuiz.
Click here for the second prototype desktop version of The GivingQuiz.
After interviewing the users, these are the most common suggestions that they vocalized:
While observing the users, I found these areas that could use improvement:
Overall, this was an excellent round of usability testing and the feedback was unanimous. Some of the feedback started to creep into more of a subjective category, like “I really like orange, can you change the color scheme to primarily orange?” I felt like with this round of usability testing, we have what we need to get the prototype updated and into the hands of our developer. Once the GivingQuiz is live on the website, we can do one more round of usability on the live version of the quiz to work out any new usability issues or bugs.
After designing a prototype in Adobe Xd being careful to include the user feedback from the research round as well as meet the needs of my clients, we landed on our first testable prototype. I enjoy testing earlier in the UX process with a lower fidelity version but our project looked more like a sprint due to the short amount of time that we had to work on it. I chose to test my prototype in Adobe Xd’s share feature with users over Zoom. Users would join me on a call and share their screens with me as I observe their interactions and ask them to talk through what they’re thinking and experiencing. During the usability testing, I will be asking these questions throughout the interviews:
- What are you thinking?
- What do you see?
- What do you think about this?
- Is there a better way to do this?
- Is there anything awkward that can be improved?
ITERATE: First Round of Usability Testing
The purpose of the first round of usability testing is to test the first version of the prototype of The GivingQuiz to uncover usability problems by interviewing 5 users over a video call as users test use the version of the design based on the device that they are using.
Click here for the first prototype mobile version of The GivingQuiz.
Click here for the first prototype desktop version of The GivingQuiz.
After interviewing the users, these are the most common suggestions that they vocalized:
- 6 of the questions were confusing and hard to understand
- More user feedback on buttons (ex: changing colors when a button is pressed)
- More unity of design throughout the quiz (ex: illustrations throughout the quiz)
- More details about the quiz on the home page and more information on the results page
I brought the user feedback to Kavya and Judy and worked with them on updates to the GivingQuiz for the next round of usability testing. One thing that was skipped was adding more details to the home page and the results pages. I think that my clients wanted to keep the home page simple (similar to 16Personalities) to prevent bias as users were taking the quiz. As for the results pages, this was something that clearly still needed some attention. Nonetheless, they gave me their changes and I made design updates based on user feedback and observations to create the second prototype.
ITERATE: Second Round of Usability Testing
The purpose of the second round of usability testing is to test the second version of the prototype of GivingQuiz to uncover usability problems by interviewing 4 users over a video call as users test use the version of the design based on the device that they are using. For the second round of usability testing, only four users were able to participate in the video calls due to cancellations but I decided not to reschedule the users that canceled and asked them to provide unmoderated feedback instead.
Click here for the second prototype mobile version of The GivingQuiz.
Click here for the second prototype desktop version of The GivingQuiz.
After interviewing the users, these are the most common suggestions that they vocalized:
- 3 questions still seemed slightly confusing
- More details for the landing page and results page
While observing the users, I found these areas that could use improvement:
- Similar to round 1 of usability testing, users aren’t given direction on what to do with their newfound knowledge after completing the quiz. A call to action would be helpful on the results page (i.e. share quiz, matching organizations’ websites, share your results on social media, etc.)
- Design preferences: I want to add more spacing between section titles and questions on the desktop version
- Usability heuristics: add more spacing and increase touch zone between options on the Causes page on the mobile version
Overall, this was an excellent round of usability testing and the feedback was unanimous. Some of the feedback started to creep into more of a subjective category, like “I really like orange, can you change the color scheme to primarily orange?” I felt like with this round of usability testing, we have what we need to get the prototype updated and into the hands of our developer. Once the GivingQuiz is live on the website, we can do one more round of usability on the live version of the quiz to work out any new usability issues or bugs.
LAUNCH
Unfortunately, my industry design project timeline ended here. After about 42 hours of working on this project and helping get the developer set up to get what he needed, it was time for me to pass the torch and pivot to work on other projects. I offered to do a 3rd round of usability testing to Kavya and Judy but they ran into problems with their developer on getting the quiz results to generate based on the quiz answers. At the time of writing this, the finished product of the GivingQuiz is not complete but I do have the opportunity of sharing with you my third prototype version of the GivingQuiz. |
The Importance of UX Design
Specifically for this project, the importance of user experience design is evident although it doesn’t show up in the ways that a lot of people may expect. Many companies publish a design without user experience testing and work out the problems based on user reviews and customer service feedback. This approach will lead to a diminished product and a smaller number of satisfied users. With the GivingQuiz, integrating the user experience process into the choices for visual design and language provides the greatest experience for users. Ultimately, this increases user satisfaction fueling better reviews and customer trust. There may be more effort on the front end of the user design process compared to a design-and-launch process but the user satisfaction is the payoff.
Tools used in this project: Adobe Xd, Adobe Illustrator, Adobe Photoshop, Google Forms, Google Docs, Google Slides, Google Meet, Zoom, dry erase board and markers, pen and index cards, and plenty of empathy.
Tools used in this project: Adobe Xd, Adobe Illustrator, Adobe Photoshop, Google Forms, Google Docs, Google Slides, Google Meet, Zoom, dry erase board and markers, pen and index cards, and plenty of empathy.