Quizard's Logo
Summary: A website that simplifies the quiz/exam creation and taking process.
​
Roles and Responsibilities: I worked on this project as a UX/UI Researcher, visual designer, and as a frontend developer for the prototype.
Tools used include: Adobe XD, Figma, Google Slides, Zoom
Deliverables included: Wireframes, Sitemap, Journey Map, Persona, Paper prototype, Clickable prototype, Survey
Problem: Professors struggle to create modernized digital exams/quizzes that are fair and discourage cheating. Students are frustrated by outdated quiz formats that are oftentimes stressful and too harsh.
​
Audience: Professors and Students.
​
Solution: Create a quiz creation/taking platform that is simple to use, customizable, and encourages fairness.
Process
Discovery and research
I interviewed professors and students about their experience with online exams – positive and negative. I also did a competitive audit to gauge the limitation of other popular quiz creation platforms. I issued a small survey to several professors and students to gauge what they felt was most important for online exam platforms. I was surprised to learn that some features I’d expect to be there for those platforms were not. I assumed that customization was a priority for professors and was right. What I didn't see coming was a sizable amount of students wanting a more vibrant, positive visual presentation.
The gears in mind began to shift the more information I gathered from potential users. Observing that customization options, ease of use, immediate score results, and re-take ability were some of the most common features of online exams deemed essential, I decided to focus on that.
​
I developed two personas based on my research: Keith and Irving. Keith represented professors and their needs, while Irving represented students.
​
Keith and Irving Highlight the goals and frustrations of professors and students regarding exams and quizzes.
Information Architecture
​
Creating a sitemap helped me envision the layout for a quiz creation website.
Sitemap
Simplicity, but without sacrificing the features users need, was my focus when thinking of the site structure and flow. With that fleshed out, I then designed my wireframes.
Prototyping
​
After establishing the Information Hierarchy, I began developing wireframes - starting with paper and then once satisfied with the look and feel, digitizing them. My theme in mind was a intuitive (clearly defined menus, limited options), but a robust amount of customizable options. I also sketched out and digitized wireframes for a mobile version of the site.
Paper Wireframes
Digital Wireframes
When comfortable with how the wireframes looked, I began prototyping with the goal of having a clickable emulation of flows such as logging in, creating a quiz, and taking a quiz. You try out that prototype by clicking here.
A pie chart layout of most popular online exam essntials.
While testing was mostly positive, the first iteration of the clickable prototype didn't show which answers users got wrong on the failed results screen. Users also wondered why the site didn't have an about page, and noted the inability ability to add a picture to quiz questions. Taking note of this feedback, I incorporated these critiques into a high-fidelity prototype, but before that, I named the platform "Quizard", a combination of the words "Quiz" and "Wizard". I chose a mint green and dark purple color theme, making sure it works within the confines of accessibility standards.
Quizard High Fidelity Prototype
The next round of testing was overwhelmingly positive. Users cited liking the visual design and feel of the website. Of the six people I had test, they all were able to log in, create a quiz, add a picture to the quiz questions, customize the settings, take the quiz, and navigate to the "About" page on the first attempt with no issue. Please check out the high fidelity prototype of Quizard by clicking here.
Final Thoughts
​
As the world becomes more digitized, professors may feel overwhelmed by technological requirements. While tech is usually designed to provide pleasant user experiences, the quiz creation options left a bit to be desired. With Quizard, I am confident major steps are being taken in simplifying the online exam experience for both professors and students.
​
I learned that while exam oftentimes cause stress, whether you’re creating them or taking them, both professors and students would have rather that not be the case. Exams are supposed to be fun, engaging displays of knowledge gained, and I was happy to play a part in enforcing that creed.
​
For next steps, I'd like to test out adding a contact page, incorporating the ability add videos and .gifs to questions, and how to incorporate open-ended questions as an option.
​