top of page
leon-wu-LLfRMRT-9AY-unsplash_edited.jpg

EduQuiz

Quiz Taking Website Case Study

EduQuiz Website Case Study: Image

Introduction

EduQuiz Website Case Study: List

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.

EduQuiz Website Case Study: Text

User Research : Pain Points

EduQuiz Website Case Study: List

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.

Screen Shot 2021-06-27 at 6.44.04 PM.png
EduQuiz Website Case Study: Image

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.

Picture1.png
EduQuiz Website Case Study: Image
Screen Shot 2021-06-27 at 7.03.41 PM.png

Sitemap

EduQuiz Website Case Study: Image

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.

Picture1.png
EduQuiz Website Case Study: About

Digital Wireframes

Screen Shot 2021-06-27 at 7.19.11 PM.png

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.

Screen Shot 2021-06-27 at 8.01.30 PM.png

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.

EduQuiz Website Case Study: Features
Picture1.png

Low-Fidelity Prototype

The low-fidelity prototype included the primary user flow of taking a quiz. The process began with the login/sign-up screen and ended with the quiz results. After the prototype was created, the user flow was tested in a usability study.

EduQuiz Website Case Study: About

Usability Study: Parameters

EduQuiz Website Case Study: List

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.

EduQuiz Website Case Study: List

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.

EduQuiz Website Case Study: Features
Screen Shot 2021-06-28 at 8.10.18 PM.png

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.

Screen Shot 2021-06-28 at 8.11.40 PM.png

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.

Screen Shot 2021-06-28 at 8.13.15 PM.png

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

Screen Shot 2021-06-28 at 8.16.35 PM.png
EduQuiz Website Case Study: Image
Picture1.png

High-Fidelity Prototype

The high-fidelity prototype uses the same user flow as the low-fidelity prototype. The new design changes were implemented to improve the quiz taking experience.

EduQuiz Website Case Study: About

Accessibility Considerations

Throughout the design process, I made sure to think about various accessibility considerations. Hopefully, this makes my design more inclusive for everyone.

EduQuiz Website Case Study: List

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.

EduQuiz Website Case Study: List

Next Steps

EduQuiz Website Case Study: List

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.

Get in Touch

Thank you so much for taking the time to review my work. I would love to hear your feedback. My email is linked below.

EduQuiz Website Case Study: Text
bottom of page