Objective

The IBM stakeholders needed a market ready website that incorporated several of the their products to use as a demonstration piece that they could move forward with.

My Tools

Adobe XD, Adobe Illustrator, IntelliJ, Figma, Miro, Chrome, MongoDB

The Team

Michael Olson, Danielle LaRosa, Leandro Garrido, Juhui Kang, Pashang Engineer, Matt Ljuljic, Trevor Primus, Nathan, Anisha, Marie

My Roles

User Experience Researcher, User Experience Designer, Visual Designer, Back End Developer, Back End Liaison, Cybersecurity Tester

Project Overview

QuizMaker is a web application that provides students an easy way to access study materials and professors a way to curate those study materials for the benefit of current and future classes.

Making a market ready website for IBM.

10 people, 3 months, 1 happy customer

Defining the problem

The lives of students and professors are complex and ever changing. Now as distance learning is becoming commonplace students find themselves without peers to study with. Professors' communication and interaction with students is limited to Zoom calls and forum posts. Quizmaker seeks to create a place where students can hone their knowledge through quizzes and improve those quizzes thorugh feedback.

Research

We performed research in the form of interviews and personas to better understand the user base and identify the expectations of both the stakeholders and the users. Through these methods we create a touchstone that we use to periodically center ourselves and the project around the user.

  • Interviewees: Stakeholders, Professors, Students
  • Questions: Project vision, mvp expectations, preferences and advice
  • Insight:
    Revealed the Constraints of the project and the stakeholder's vision

User Personas

We made five personas based on the interviews as well as our own personal experiences as students. The personas were made to reflect what we considered to be our five major users.

an image with several head shots overlaid on a scene of a man in profile working at a desk and a woman standing at the desk reviewing a paper

Synthesizing

A black arrow pointing to the right.A black arrow pointing to the right.

Research Insights

Both students and professors are key users, a distinction needs to be made between the two users in terms of needs and expectations.

Why I made this choice

To keep the user central to the design process we must know who they are, their needs, and their expectations.

Moving Forward

We focus on the distinction between students and professors by creating user flows to sketch out the differences that the two groups face.

The impact of my choices

It made sure that the user was the focus, and created a touchstone for whenever we hit a snag in the design process.

Ideation

User Flows

We created user flows to map out the differences between students and professors. These provided us with a visual representation of the needs for both groups. After creating the user flows, they are shown to the stakeholders and users for feedback.

The first round of ideation identified and prioritized that students and professors needed to be distinguished in some way. This problem effected more parts of the project than anything else which made it a more pressing issue.

  • Identify themes and problems
    - Cull any that do not align with user needs
  • Order themes and problems in terms of needs vs wants
    - Reference interview notes and stakeholder requirements
  • Prioritize the most pressing issues
    - What has the greatest effect or needs to be done first?
A lightbulb with lines indicating that it's glowing and the word idea is written inside in the filament

Prototyping

Sketches

These are the sketches I submitted for the log in, home, quiz making, and quiz taking pages.

Revision

The mid fidelity prototype was presented to the other teams and stakeholders. We received feedback on preferences and technical limitations. Based on this feedback we created a variety of layouts with different color schemes. The color scheme was eventually decided by the stakeholders to be green and gold to match the school colors.

Mid Fidelity

During this phase I worked on colors, layout and design. In particular I designed the menu, table, and much of the quiz making screen. I also advocated for the center aligned titles because the left aligned titles left a disproportionate amount of white space.

A blue gear
The prototyping process was done in three phases.
  1. Sketches
  2. Mid fidelity prototypes
  3. Revisions

The prototyping phase is where much of my effort went. I along with one other teammate did all of the prototyping and design work. Each member of the usability team had a say in what the design looked like. Beyond this members of other teams had a voice in the design as well. A notable example is the GUI team requesting a horizontal menu rather than the vertical one we originally planned to go with.

Testing

a rectangle with a check mark and an x

Common recommendations recorded by Observers during the think aloud process

  • 13 participants
    - 6 students
    - 7 professors
    - 3 unusable results
  • Each test was attended by a participant, investigator and an observer.
    - Investigators moderate the test through a script and guide the participant if they face technical issues.
    - Observers record task times and take notes.
  • Participants were asked to:
    - share their screen and think out loud during their process
    - complete four tasks
    - complete a questionnaire based on the Perceived Ease of Use Scale
    - share their user satisfaction of the experience as measured by the System Usability Scale (SUS)

Once the design was finalized the team got to work on testing. Recruitment emails were sent with Calendy (a free online appointment scheduling software) links to students and professors. Due to the COVID-19 pandemic the tests were conducted via Zoom.

Results

T-Test

An independent-samples t-test was performed comparing the SUS results for light mode and dark mode. The results showed there was no significant difference in satisfaction between light mode and dark mode.

SUS

The System Usability Scale was used to calculate results because it is a well known and reliable tool for usability testing. We did this by calculating the participants and instructors SUS scores and measuring Display satisfaction for light mode and dark mode.

Final Product

Using the test results and analysis form the study we finalized QuizMaker. At this point we submitted a Usability Assessment Report which was presented to our project manager and the development team to facilitate their final iterations.

Reflection

IBM was impressed with the product. They have continued iterating QuizMaker in order to launch it as a product in 2021.

I learned how to work in an Agile Scrum environment, to interview and communicate with stakeholders and project managers, to use Illustrator and XD, to develop logos, and how to conduct usability studies through Zoom.

One challenge was learning how to make logos. I undertook the logo making process by myself, investing weeks of YouTube tutorials, reading articles and talking to professionals. Beyond learning the process, I taught myself Illustrator to bring the logos to life.

If I could do anything differently I would have done more research into competing brands. Particularly what aspects they all have in common and where our users feel they're lacking.