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
Zoom
Platform
IOS
Role
Sole Product Designer (End to end design, July-November 2020)
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.
Key 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.
How might we help students … do more than just general note taking in lecture halls?
How might we help students who are more introverted to interact with others?
How might we leave out seating as an issue for students to have when they sit down in big lecture halls?
How might we help students … feel less lost when learning in a lecture hall environment?
Brainstorming My Solution
After I had finished the HMW’s, I needed to have an ideation brainstorm to see what kind of digital app ideas can come from these four questions, ultimately, the main app idea that I created was:
A game based learning app that allows students to:
Feel comfortable engaging with the material no matter what type of student they are.
Have a higher attention span to the class material
Sit wherever they want in the lecture hall without feeling the stress that comes with participating in front of hundreds of other students.
Have fun in the lecture halls!
Show their professors what they know in the moment!
*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.
Here I have the final listing of user goals that are addressed with regards to importance to the user.
I have split them into three categories: must include, secondary, and least important.
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 screens along with subscreens.
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.
Insights
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 creating a question set or sharing it with students in a live quiz game setting!
The journey through the sign up flow is pretty self-explanatory.
User Journey through this flow
From home page, you go to the create tab and select question set.
Now at the set page, before you jump to creating questions, you can label the set with a title, a topic, a picture if necessary. You can see the go live button but the user can't do that until the set is created. You can change settings which contains language and visibility (make the set private or public).
The user can create questions by tapping the 'add question' button'.
Choose the question format: multiple choice, true or false, etc...
Once the user selected a question format, they can type the question, type the answer choices, change the timer, and add a picture if they want. Then they can either tap continue to add another question or tap finish to end the set.
The user has created their set, now they can go back to the home page.
User Journey through this flow
From the home page, assuming that the user has a question set ready, and finished, they can go live in two ways.
Go to their question set and tap the 'go live' button on the set page, or they can go to the play tab, and tap 'go live' there.
In either scenario, the user must choose a question set to go live with.
Once they have chosen the question set, the next screen is a waiting screen that shows a 6 digit code that other people can use to join the live quiz game. Once all the players have joined, you can start the quiz.
Once the host presses start, the quiz begins with the first question. Each question has a timer, so the players must answer it within the timeframe or else they immediately get it wrong. So the host waits for the players to read and answer the question then hit submit to finalize their answer.
After the timer runs out, the correct answer pops up and transitions to a results screen that shows how many people got the question right or wrong.
Then, the quiz continues to question 2 and the process repeats.
At the end of the quiz, the players arrive at a final results screen to see how they did while the host can see the total average of the players. The host can exit or redo the set. If the host selects 'redo' then it goes back to the first question while if the host were to select 'exit' then the screen goes back to the play tab.
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!
These wireframes were once again created to capture the main user goals which would be to diminish distractions and maintain focus on school activity in a real time classroom setting!
In order to accomplish these goals, the interface for the live Interak quiz games must be easy to go through and easy to set up so that the users can have a fun experience creating and answering questions!
User flow: creating question sets
User flow: Live quiz game - host & player
Brand Platform
Now I’ve painted a decent picture of what Interak feels and looks like, I can create a brand platform which is used to show Interak’s company image and reflect the design decisions that I made. The brand platform tells customers what Interak is really all about: why it was made, what it aims to do, who its for.
BRAND PLATFORM
Company/Product Name:
Interak
Rationale: I chose this company name because I wanted to emphasize the interactive qualities of the app to allow students to engage with their schoolwork more frequently. I didn’t want to simply name the app “Interact”, I wanted to change it in some way.
Mission/Vision:
Learning can be a boring process for many people with very little engagement and interaction going on between the students. I would like to provide the tools to increase interaction between students and their class material through a game-centered learning format, thus allowing classes to be more fun and engaging. Mission/vision (2-3 sentences)
Rationale: I chose this vision because a lot of times in larger classroom settings where there are hundreds of students around me, I felt that I wasn’t being involved in the learning process as much as I could have been, and so often I would drift away from the class and become distracted with something. Thus, if I was more interactive with the material and the students, I could become more focused and overall improve my learning experience.
Brand Personality:
Interak allows students to practice what they’ve learned in a more communal environment that enhances their learning experience.
I chose this brand personality to highlight the major pinpoints of the app: to improve the learning experience of students through seeking ways to challenge what they know from their classes.
Brand Attributes
Interactive, fun, simple, evaluative, Brand attributes (4-5 adjectives)
We tend to learn more when we are interacting with others helping each other move forward with our learning. These interactions can be fun while being completely simple. They can help us evaluate our understanding of our class material motivating us to want to learn more.
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.
Style Guide Insights
The icons are presented to be a clear representation of actions the user is accessible to. The app logo represents a community of students and teachers collaborating together to make a fun learning environment.
The result pages are to show graphically how many players got a question right and by the end of the quiz they will receive an overall score.
It was super important that the icons, fonts, and buttons matched a fun collaborative learning environment that was easy to understand and go through for everyone!
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.
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.
Insights
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!
Major Issues - Home Screen
Let’s take a more in depth look at what needs to be changed about the UI. First off, the colors I used in the mid-fidelity prototype were too dark. Dark colors don’t necessarily provide a visually grabbing experience for the user, especially if the app is for learning.
Another issue I discovered was that there wasn’t enough white space. Every section of the home screen (and other screens) seems too compact and close together. There’s not much room for the layout to breathe, thus with more white space the layout will be able to.
Major Issues - Multiple Choice Question Format Screen
For this example, right off the bat, the colors still don’t match up! The buttons aren’t modern looking. The size for the finish and add question buttons aren’t appealing nor is the heavy drop shadow underneath them.
Overall, it would be hard for users to want to use an app that seems out of touch with modern UI design. Therefore, I must retrace my steps!
Style Guide update #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 Progression...
These answer boxes look much more vibrant than the past UI! That dark blue is long gone!
With this new style guide, I was excited to create a whole new UI that looks modern and more enjoyable for the user!
A Closer Look: Home Screens
As you can see with the new home screen, all dark colors have been removed. There is plenty more white space for the elements to breathe in each section. 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. I removed the top bar to add more white space. The tab menu is more suited to modern tab menu design with its white background and use of icons.
A Closer Look: Play Screens
With the play screen, you can see the significant color changes. What’s most important about the new play screen is the ‘enter code’ and ‘host’ buttons where there are no drop shadows and are sized better for the screen. The ‘enter code’ button is above the ‘host’ button and opposite hue to the ‘host’ because the user needs to know that there are two different experiences.
As users go, there are more likely going to be more players than hosts, therefore it makes sense for the ‘enter code’ button to seem more important than the ‘host’ button.
A Closer Look: Multiple Choice Screens
The new multiple choice format screen is quite different. 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. They each have a stroke designated to the color 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!
A Closer Look: Results Screens
The result screen goes through the same transformation. 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.
These four screens that I just went over are the most important screens since they directly align with the user’s journey through their most important goal: 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.
Usability Testing
Putting Interak to the Test
I’ll preface the testing sessions by saying that the main goal of the usability testing was to see how the user was engaged with class material in a live quiz game (to keep their focus up). Therefore, the only task I had the testing participants accomplish was to complete a live quiz game from start to finish.
I gathered 5 participants through social media and held video conferences to perform the usability testing sessions.
The user flow that was tested was specifically the live quiz game:
The test included a flow that started from the home screen that navigates through a live quiz game and ending at the home screen. I asked questions pertaining to the participants' thoughts on each screen they went through. I started with asking questions about the home screen and then questions about each quiz question during the game, then about the overall quiz results and then about their overall impressions of the app and what they think could be improved.
Findings:
Overall, the participants felt that the task was very simple and the UI looked clean and modern. There were no critical issues that were raised, meaning that there was nothing that the UI was severely lacking, to the point of the task not being functional. However that doesn’t mean there weren’t any issues with the UI. These testing sessions helped me identify what I needed to fix for the next iteration.
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 acts as a waiting 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. The view all button on the side made them more confused.
Even though it's not entirely within the main task, it's a major issue because the home screen is the first screen the user sees, thus it has to make sense visually.
Solution: This feedback was helpful in realizing that 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. Bobby also mentioned smaller details that could help the user’s experience, such as being able to add a picture to the account icon. These changes would help clear up confusion that may be shown on the home page.
Issue #4 - Readability on the quiz questions
During the quiz, a participant 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. She recommended that the question can be put underneath the image so that the user can clearly see and read the question because on question 3 with the white image, it was much harder to read the question than it was on others.
Another participant added that the timer may need to be enlarged or put in a different spot so that the player can be aware of how much time they have left to answer the question.
Solution: Make a timer that is visually grabbing so that the players know how much time is left. Put the question below the image and adjust the answer choices accordingly.
Issue #5 - Inconsistent stat screens after each quiz question
During the quiz, 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.
When the user joins a live quiz game, they now know for certain what kind of game they are playing.
Wording on the player’s final results screen has been changed and there is now a transition screen that lets the players know that the quiz is over and their results are coming up.
The Home page now only has the user’s own question sets and folders for them to search through. There is a new discover tab where the user can search for usernames, question sets, and topics, and also look through the preset topics under Interak’s favorites.
The tab menu has expanded from three tabs to five adding a discover tab and an account tab.
The quiz questions have more readability now that the question doesn’t cover the image and there is a countdown timer above the answer choices that lets the players know how much time is left on the question.
The quiz questions are more consistent with the color palette switches on each stats screen.
Below are the high fidelity mockups :)
You can view the Interak Design System here!
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.