User Persona
Kevin Hanst
UI/UX Designer
Interak: A game-
based learning app
Helping students learn more through gamification
Process
User Research
Ideation
Wireframes
High Fidelity Prototype
User Testing
Tools
Figma
Miro
Platform
IOS
Role
Sole Product Designer (End to end design, 4 months)
The Problem
Lack of engagement and interaction between students and teachers in a large lecture hall setting leads to a shorter attention span on the students which damages their ability to learn and digest the school material.
Secondary Research
From articles by Liberal Arts Colleges, EdSource, and Educause, I was able to identify three main issues with the lecture hall learning experience.
The lecture hall experience has a lot left to be desired and through primary research I hope to find out what other students think on this matter and what their approach is to optimally learning!
Research
Objective
My plan was to do user interviews to hear the attitudes of the lecture hall experience from actual students, and in order to obtain people to interview, I had to create a quick survey to screen the participants.
1. Google Survey
Interview participants were identified by current student status, experience with at least lecture hall experience, and feelings of boredom or engagement within lecture halls.
If they answered student, large and small classes, and boredom or unengaged, then they could be an interview participant.
2. User Interviews
I interviewed four participants to establish their concerns, issues, and needs as college students. The questions I asked were about their experiences in lecture halls: what they liked about it, disliked about it, the behaviors that they see occur from other students and the professor. Here are some quotes I've gathered from my interviews:
Insights from Affinity Mapping
My users collectively felt that the smaller classroom experience was better for interaction and engagement between students and the class material.
It is easier to ask questions and participate in a smaller class with 30 people rather than 300 people in a big lecture hall.
Lecture halls allow students to sit and digest material creating a less stressful learning environment than a smaller format.
In order for a lecture to go well or bad, it’s dependent on the professor to be a good lecturer and have good communication skills
Seating is a factor in lecture halls when it comes to interacting with the professor asking questions or answering them
Professors use quiz formatted technology to help engage the students with the material in real time.
Empathy Mapping
Who am I designing for?
This was used to identify unique types of users. For this project, my focus was on college students who were unengaged with the college lecture hall class format, thus there is only one user type. I used quotes and ideas from the interviews to create a map that establishes what the user type says, does, thinks, and feels
Research Conclusion
At the end of the research phase, I was able to understand my users goals and needs. The information I’ve gathered coincides with the secondary research that I did that involved other students' experiences in big classroom environments. Now that the user issues are known, I can proceed to brainstorming design solutions.
Ideate
How Might We...? (HMW's)
After I’ve identified who I’m designing for, I transition into brainstorming HMW’s (or How Might We’s), an exercise to determine the major areas of focus for the final designs, which will then allow me to make the user’s overall experience in the lecture halls better.
*For Illustrative purposes
User Stories
The HMW’s have helped me narrow down the major pain points I want to hit when I do the final designs, now I can create user stories to invoke student experiences revolved around these HMW’s and my ideation brainstorm!
These stories are used to determine specific user goals that they want to achieve, which then can be categorized into affinity maps once again.
18 user stories written on flashcards. The numbers on the bottom reflect the main points that they hit from my ideation.
Let’s organize these user stories with affinity mapping and priority sorting.
Setting Priorities
These priority rankings have helped me establish what my MVPs (Minimum Viable Products) and other user goals are. They serve to solve user needs according to the level of importance of those needs. The MVPs are the main pinpoints of the design.
The designs have to address these user goals first and foremost because they are the primary focus and the others below the MVPs will follow.
My MVP's
MVP #1: Higher engagement with class material and participation will improve focus and motivation for students that find the lecture hall experience to be boring or unengaging.
Subgoals:
Do more than just take notes
No stress to participate
Limit distractions
MVP #2: Being more sociable and less intimidated by the people around you. Overall, interacting more with other students during break-off moments will make the class not feel like a waste of time.
Subgoal:
Make a group learning environment more fun and less stressful
Subsidiary MVP: Through this higher engagement, the professor can understand how much the students know in the moment!
Information Architecture
To help visualize the various screens I’ll need for my app, I’ll first have to gather all my research and figure out the most important screens and what they would consist of. I created a sitemap to help navigate the top level pages to lower level pages.
Sitemap
Creating the sitemap helped me identify key features that would go into the app and incorporate user needs into those features. I realized that a lot of the user needs/goals ended in the ‘go live’ feature where the teacher and students can play an interactive game together, however most of the app’s information is within the create ‘question set’ page which allows a person to put together a quiz game and then share it to others.
User Flows
Creating a user flow was the next step in utilizing this sitemap because it allows me to envision the user’s journey through the app, whether that be signing up for an account, creating a question set or sharing it with students in a live quiz game setting!
Design
Early Sketches
After identifying key features of the app, it was time to begin sketching low fidelity wireframes! These sketches would act as my first imagining of the user’s experience with Interak. I didn’t really worry about crafting intricate icons or trying to make the interface too extraordinary. I focused on making the main layout of major screens and building the interface from there!
Brainstorming
Now that I kind of figured out how the main layout would look like, it's time to try to recapture them in figma! This is a mid-fidelity prototype since there is no color palette yet. I brought these wireframes to figma so that I can see what they look like on the actual screen size!
User flow: creating question sets
User flow: Live quiz game - host & player
Moodboard
The next step in developing the UI is finding a visual aesthetic to match the low fidelity designs with. Creating a mood board will help inspire the UI of Interak. It consists of a color palette, life images, typography and examples of other apps that could be helpful in addressing the app’s user needs.
Transition to Style Guide
To implement the moodboard into the UI prototype, I created a style guide to support the brand’s attributes. I had assembled a collection of fonts, buttons, and icons to be at the forefront of Interak.
Color Palette
The colors are dispersed into each section of the app from question set display to folder display to answer choice buttons on different question formats.
UI Design Iterations
Using the style guide and moodboard, I was finally able to bring the UI to life. These screens are focused on demonstrating the live quiz game experience, journeying from the home screen to the end of a quiz. Hopefully, the designs will enrich the players learning experience through the simplicity and color palette of the app.
Issues I Came Across
Overall, the designs I made hit user goals but this version of Interak looked like it was made 10 years ago. It wasn’t as visually appealing as I had hoped for. The color palette, button size, and overall trends didn’t match to what digital products look like today. After reviewing these designs, I decided to go back and research more modern designs!
Attempt #2
From the first moodboard, style guide and UI, I needed to look for more modern trends focused on button design and lighter color palettes that are more welcoming than the ones I had previously. This update is emphasized on better design examples and lighter colors.
Ideation
From these examples, I started brainstorming ideas about how my new UI would look like! I didn’t want to overthink it with more drop shadows, dark and heavy colors. I needed to implement more white space and make it a simple layout that doesn’t look more complicated than it needs to be!
-
Style Guide Update!
-
These answer boxes look much more vibrant than the past UI! I brought down the number of typefaces from 3 to 1! With this new style guide, I was excited to create a whole new UI that looks modern and more enjoyable for the user!
Design Iteration #2
With better color contrast, white space, reduction of typefaces and better visual hierarchy, this iteration looks much more visually appealing that the last one. Let's quickly get a side by side to compare the two iterations!
Before & After: Home Screens
Notable changes:
As you can see with the new home screen, all dark colors have been removed.
More white space for the elements to breathe in each section. I removed the top bar to add more white space. The colors are lighter with a solid white background, and overall they are more presentable to the eye of the user.
The size of the question set elements have more height and bigger corner radiuses to promote visual hierarchy.
Before & After: Multiple Choice Screens
Notable changes:
This format takes a lot of inspiration from one of the design examples above in the new moodboard, and so the answer choices are smaller and are connected to each other.
The answer choices have a stroke designated to the color of the answer choice. There is no submit button which allows players to change their answer choice before the timer runs out so that they’re not stuck with their first choice like in usual testing environments.
The image is much bigger than the previous UI with the question and the timer placed on the image. Also, the new UI lets the player know what question they are on. In usability testing, I’ll see how this works!
Before & After: Results Screens
The results of the quiz is the blue section which signifies its importance where the answers to the questions can be reviewed as the player scrolls down on their screen.
The ‘add set to library’ button has changed to match the new element style. From the previous UI, the user would have to click the answer section to see the answers whereas in the new UI, the user can just see them without tapping anything.
Usability Testing
Putting Interak to the Test
Issue #1 - Whose game am I playing?
Participants noticed that they didn’t exactly know what quiz game they were entering, whose it is, what topic it was on. There was no prior information into starting the quiz. Once they entered a code and hit join, they were waiting to be placed into the game but they just jumped right into the questions without knowing important information.
Solution: Create a screen that lets players know whose quiz game they’ve entered in! The screen should say the title, the creator, the topic, and how many people are playing in the game!
Issue #2 - Confusion on the results screen
Participants have shown confusion on knowing whether or not that the quiz is over and the final results are their own. In the task, after the last question, the prototype transitions into a loading screen then into a final results screen. Participants needed to have a clearer visual cue that showed them the quiz was over and their results were being shown next.
Solution: Fix the wording on the final results screen and add a transition screen before it letting the player know that the quiz is finished and their results are coming up.
Issue 3 - Confusion on discover section of home screen
During the testing sessions, I asked each participant what they thought about the home screen and 2 out of 5 participants asked questions about what the discover section was about. It wasn’t clear to the user that the discover section was for looking up other people’s question sets.
Solution: The discover section and the search bar should have its own tab on the tab menu on the bottom since it's a little misleading on what the user can use the search bar for, as well as the discover section.
Issue 4 - Unreadable headers
Participants noticed that the question and the timer were blocking the image, leaving the question to be not as legible as if it were underneath the image, and the timer should be placed in a different spot so that the player can be aware of how much time they have left to answer the question.
Solution: Align the question and timer below the image for better readabilility
Issue #5 - Inconsistent stat screens after each quiz question
The question stats screen after each question weren’t identical which I intended because there can be more than one answer to some questions (Checkbox or type answer) but not to others (T/F or multiple choice) however, once going through the task, participants have noticed that it doesn’t visually flow nicely.
Solution: Make each stat screen, no matter the format, consistent with the color palette!
Final UI Design
3rd Design Iteration
Now that Usability Testing has been done, I can implement these changes into the UI so that it can be improved. Overall, the testing sessions went very well and all participants enjoyed the experience and thought it was simple enough to understand and get through. There weren’t any critical issues with the task that needed to be immediately addressed, but there were important revelations made by having conversations with these participants.
Below are the high fidelity mockups after usability testing :)
You can view the Interak Design System here!
-
Splash
-
Home
-
Play Screen
-
Screen that shows you joined a quiz game
-
Multiple Choice Question
-
Answer choice 'painting' is active
-
Transition to Correct Answer
-
Results from Question
-
Your Quiz Game Results
UI Conclusion
The UI has come a long way from having buttons with huge drop shadows and dark colors to more white space and more accessible colors. The new UI had ended up being better than I had ever hoped for and I learned a lot from the usability testing about the insight that can come from having conversations with people with a fresh set of eyes. I believe that this current version of Interak is capable of bringing students a fun learning experience that goes beyond listening to teachers and taking notes!
Opportunities for future development
While this project addressed the struggles of large classroom environments and focuses on the live engagement between teachers and students, this app could potentially have integrations into other educational tools.
Integration into another study tool like quizlet!
Have capabilities of not just live quiz games but much more, with various other kinds of games that enable learning, flashcards, etc.