Introduction
My Role
Sole UX Designer for EduQuiz. Designed the website completely from beginning to end.
Project Duration
May 2021-June 2021
Responsibilities
Conducted interviews, competitive analysis, user personas, empathy mapping, journey mapping, paper and digital wireframes, usability studies, affinity mapping, low and high-fidelity prototyping, and accessibility accommodations.
The Product
EduQuiz is a fictional quiz taking website that partners with various online universities. EduQuiz provides its users a platform to complete their quizzes for their online courses. EduQuiz targets college students who prefer the flexibility of the online university format. These students could be either right out of high school or older adults trying to get their degree.
The Problem
Users need a quiz taking platform that is easy and simple to use. They need a quiz taking platform where the results of the quiz reflect each student’s actual ability instead of issues with the platform.
The Goal
Design EduQuiz’s quiz taking website so students can easily take their online university quizzes.
User Research: Interviews
I started the process by conducting interviews to give me an idea of previous experiences that students have had with online quizzes. By doing the research, I found that people had a lot of different preferences for what they liked/disliked about taking quizzes online. This finding confirmed the assumptions I made about how users have really different styles/preferences for learning.
The research showed a few surprising findings as well. One of the most surprising aspects of the research was that a lot of users were concerned about issues related to wasting time. Whether it was getting frustrated by the slow page transitions or wasting time searching for buttons, this seemed to affect the user’s perfomance in a big way. Another surprising aspect of the research was how the issues users had with previous quizzes seemed like they could be relatively easily fixed. I expected the issues that users had to be more complex.
User Research : Pain Points
No Back Button
Users were frustrated when a “Back” option was not available for quizzes. Sometimes later questions would trigger the user to change an earlier answer.
Hard to Find Buttons
Users felt like they wasted time searching for essential buttons because they were hard to find/see.
Slow Question Transitions
Users hate having to wait for a slow question transition. When the next question loads slowly, the user feels like they lose their momentum/interest.
Quiz Format
Some users had a clear preference for having a quiz that gives 1 question at a time instead of all of the questions on 1 page. Having all questions on 1 page made concentrating harder for them.
User Persona: Monica
Problem Statement
Monica is an online college student who needs an easy to use online quiz taking website because she does not want her quiz performance to suffer due to issues related to the platform.
User Journey Map
Monica’s journey map shows the steps that the average user would take to complete their online college quiz. It also provides how Monica would potentially feel during each step. This helped me emphathize with the users.
Sitemap
Paper Wireframes
Creating paper wireframes for each of my screens was really helpful for visualizing various layouts. They really showed me areas that were well thoughtout and areas that I might consider altering in the next phase. This made creating digital wireframes a lot easier.
Digital Wireframes
Based on my initial design interviews, I wanted to ensure that students were prepared for their quizzes. A common experience for students was not wanting to waste time during the quiz. Providing pre-quiz information can help the students be prepared for what the quiz has. Giving students a list of materials needed prior to the quiz allows them to focus all of their time on the quiz instead of searching for materials.
Based on my initial design interviews, users had various preferences for the layout of the quizzes. Many users had a tough time concentrating when quizzes listed all of the questions on 1 page. Users preferred having 1 question at a time. Also, users had a hard time with buttons in the past. One user wanted a back button in case a later question made them change their answer to a previous question. Another user has had issues finding buttons occasionally. This lead to them wasting their quiz time searching for buttons.
Usability Study: Parameters
Study Type
Moderated Usability Study
Location
Sacramento, CA
Participants
5 participants. Ages 20-70. 3 females and 2 males. Participants are people who currently take online quizzes or have taken online quizzes before in educational or professional situations.
Length
10-15 minutes each.
Goal
I would like to find out if users have a seamless quiz taking experience. I also want to find out if users can naviagte the website. Users were asked to take a quiz on a low-fidelity prototype.
Usability Study: Findings
Struggled to Find Quizzes
Some users were confused about how to find the quizzes initially.
Progress Bar
Some users wanted to know how many questions they had completed and how many questions they had remaining.
More Pre-Quiz Information
Some users wanted more information to prepare prior to the quiz.
Design Iterations
Post Usability Study
Based on the information that I received from the usability study, I made several changes to the website design. The hope is that these changes will improve the user experience.
Actionable Insight #1
One of the actionable insights that I implemented was sending users straight to the quiz page after signing in. Prior to the usability study, users were directed to the review page after signing in on the prototype. This should help those that were confused about where to find the quizzes.
Actionable Insight #2
The 2nd actionable insight that I implemented was including a progress bar on the quiz. Prior to the usability study, users had no way of knowing how many questions they had completed and how many they had left. Along with the timer and the “Finish question by…” feature, users will be able to use the progress bar to pace themselves accurately to finish on time.
Actionable Insight #3
The 3rd actionable insights that I implemented was including more information about the quiz prior to starting. I added the chapters the quiz covered and the style of the quiz (multiple choice vs written). This should help students be more prepared for what the quiz entails.
Mockups
Accessibility Considerations
Throughout the design process, I made sure to think about various accessibility considerations. Hopefully, this makes my design more inclusive for everyone.
Every heading has the correct heading hierarchy. This will assist in making sure the screen reader reads the information in a way that reduces potential confusion.
Color contrast for the entire website passes the WCAG AA/AAA color contrast analyzer.
All form fields will follow a logical reading order, so a screen reader will read everything in a way that makes sense.
Takeaways
Impact
The website really empathizes with the user’s need for an easy quiz taking platform by providing them with a hassle free quiz taking experience where the results reflect their true abilities rather than issues with the platform.
Quote From the Usability Study
“The website is so straightforward and simple. I like how clearly stated the quiz due date and materials needed are. ”
What I Learned
I learned that a website’s user experience can be improved significantly if you simply listen to your users. I was surprised that interviewees with bad previous experiences with other quiz taking websites brought up issues that likely could have been rectified fairly easily. Taking the time to constantly iterate and improve your website even after launch is essential to user experience design.
Areas for Improvement
A key area for improvement would be enhancing the special features of the quiz taking platform. In my competitive audit, one indirect competitor had many special features that went above and beyond the normal quiz taking experience. As I continue gaining experience using prototyping tools, I would like to be able to include some more advanced features in my designs. In addition, I would like to improve the UI interface and make my designs more sophisticated.
Next Steps
Next Step #1
Continue to improve the UI design to implement a more visually appealing website look. I would like to enhance the website's aesthetics to be more advanced.
Next Step #2
Continue adding special features, such as pens, calculators, and highlighters, to the quiz taking interface to enhance the quiz taking experience. I would like to provide users with an experience that goes above and beyond the average quiz taking experience.
Next Step #3
Continue to research ways to improve the app’s accessibility accommodations. One of the main goals of the website is to make the quiz taking experience more inclusive for all learners.