Project Overview

The Research

Competitive Audit

I start all projects I take on with competitive audit research. I need to know what else is out there that’s similar and if there might be a gap that my own project can fill. So based on the Sharpen prompt I started looking at websites which can be used to create online quizzes to see what kind of flow each site’s users must go through to result in a quiz. I discovered there are three kinds of sites:

• Sites like SurveyMonkey and Google Forms allow users to create surveys/quizzes and send a link to the quiz to anybody.

• Sites like Teachable, Thinkific, and Podia allow anybody to create an online course, which can include quizzes, and market their course to anybody.

• Finally, sites like Blackboard and Moodle are geared toward use by schools and higher education institutions. An organization’s subscription to the service will allow teachers/professors to use the service for online teaching, which can include creating quizzes.

As the Sharpen prompt states that the project is for a “school in your hometown”, I would consider Blackboard and Moodle the direct competitors of the kind of site I would want to design. Luckily Moodle has a sandbox option available on their website so I could try out the site from both a teacher and a student perspective. This means I could play in the back-end to see how a teacher would create a quiz, and I could see the front-end where a student would take the quiz. I discovered there are several customizations teachers can add to quizzes that I had not thought of when first brainstorming the flow for creating a quiz, such as: 

• Does the quiz have a time limit? 

• Does the quiz allow multiple attempts? Does it have a grade limit needed in order to pass? 

• When does the quiz taker receive feedback? After each question? Are the questions interactive with multiple tries? After the entire quiz is submitted? 

• Can a quiz taker review and change their answers before submitting the quiz?

• Is the quiz restricted to only certain viewers? Does it need a password to access the quiz?

• Can the quiz be stopped mid-quiz and finished later/by a certain date?

While SurveyMonkey and Google Forms are less direct competitors to software being used specifically for courses with quizzes made for schools, they do have a free subscription option so I was able to use them to compare to the Moodle experience. These were my findings regarding quiz flows and interfaces: 

• The flow always starts with a login, both for the quiz creator or for the quiz taker. 

• A quiz interface generally shows a users progress through the quiz so they know how many questions are left or at least the percentage of the quiz they’ve completed.

• When creating a quiz, multiple choice is always the default answer choice.

• Questions are either one per page, or multiple questions to a page. 

• Grades for finished quizzes may be shown directly after submitting the quiz or on another page titled “Grades.”

While auditing the sites for creators who sell courses I discovered one more item I would add to my flow:

• Some software allows the creator to provide a certificate upon completion of a quiz because people like earning things.

Final thoughts: 

Through the competitive audit I discovered elements related to user flow and interface design that I need to consider when building my own quiz-taking responsive site, however with so many sites available where teachers/creators/anybody can create and take quizzes, it was hard to find a gap in the market.

User Research: Student Interview Empathy Maps

Because the prompt for the project is for a school, I wanted to be sure I included school-aged children in my user research. With permission from their mother, I conducted two in-person interviews with two public school aged children using the same questions as the online survey. Student A is a home-schooled female that rarely takes online educational quizzes but does take fun quizzes online with friends. Student B is a 9th grade home-schooled male that takes many of his classes online but never takes fun quizzes online. 

User Research: Pain Points

After aggregating the user research collected from the online survey and the in-person interviews, I determined users of online quizzes have these four Pain Points:

• Unclear questions that leave you second guessing. Unfortunately this pain point relies on the quiz question creator to write well structured questions.

• Quizzes that are not responsive and can’t be done on a device other than a computer. Sometimes users want to be able to use their phone or another device to take a quiz. The website should be responsive.

• Quizzes that are too long. Nobody likes quizzes that have too many questions. The design may cap the number of quiz questions allowed to be created. 

• Quizzes that have ads or require an email address then send you spam. As the design is for a school, it will require identification of quiz taker/creator (at least a name), but should not have ads nor require an email address.

User Persona: The Student

As students are the target audience for the product, it was necessary to create a Student persona. I based the persona on my research, however when it came to giving the persona a name, the persona I wrote reminded of the book, Alexander and the Terrible, Horrible, No Good, Very Bad Day, so I named my persona Alexander, or "Alex". Hopefully my final product will not add to Alex's very bad day. 

Initial Designs

Paper Wireframes - For Web

As the prompt states specifically a quiz “taking” flow, I decided for this project to design only the pages a student will use to take an online school quiz. At this stage, I believe only 4 pages are needed: the Home Page (needed to give the user a place to login), the Lessons Page (where a user will access the quiz), the Quiz pages/s (the middle of the quiz taking page will change depending on the type of answer required by the question), and the final Grade Page (the page that will appear once a user has submitted their quiz).

• There has to be a login, as there is a “front-end” and “back-end” to a quiz, so I decided to make the Login large and easy to find on the school’s main page.

• For the lessons page, I styled it similar to the Coursera Google UX Design course.

• For the quiz pages designs I was inspired by Who wants to be a Millionaire and Jeopardy. 

• Finally, I added a certificate image to the final page because people like earning things.

Paper Wireframes - For Tablet & Mobile

The design of my pages is fairly simple so I believe the tablet designs will be the same as the computer screen except a smaller scale. 

The phone designs will have some elements that move under each other rather than stay next to each other.

Sketched in and scanned from Rocket Book.

Affinity Diagram & Findings

Refining the Design

Revised Low-Fidelity Prototype

• “Login” was changed to “Login to Student Portal” and a Courses dashboard was added.

• The Logout button was moved to the bottom left and styled similarly to the current call-out buttons.

• The assignments list was given larger spacing and text was added for grades/due dates.

• Pages were added to give each quiz question functionality and show indication that an answer was selected.

Mockups

Main Page Wireframe & Mockup

Both my high school and college used the colors red and black, so I naturally gravitated towards red and black when creating my website for a school. 

I used Canva to create logos for my fictional school and its online learning program. I found a stock photo using Pexels for the header image. 

Student Portal Wireframe & Mockup

Adobe XD has some really great features! Being able to drag and drop a group of photos or a .txt document with a list into a repeat grid was very helpful in speeding up the work! I used this trick to populate the images and class titles on the Student Portal page.

Class Page Wireframe & Mockup

Although the mockup does not look that different from the wireframe of this page, I used Amazon’s & Apple's UI Kits to change the button and the checkmarks. I also standardized the font by creating an H1, H2, Body, and Link fonts. 

Quiz Pages (with answers) Mockups 

High-Fidelity Prototypes 

Going Forward

Takeaways

What I Learned:

• How to use Adobe UX.

• To think about how elements will move and scale in responsive designs.

• To annotate a web page design for Web Accessibility.

Next Steps

1. First, if I were to continue this project, the next step I would take is to conduct another round of usability testing to validate if user concerns found in the wireframes have been effectively addressed and if the High-Fidelity prototype needs another iteration before the design could be handed off to a developer. 

2. Second, if I were to continue this project, I would build the back-end in which a user creates a quiz.