Nomie serves as an educational icebreaker, strategically crafted to foster connections between students and instructors while boosting engagement. Featuring personalized profiles and diverse game options, Nomie.ca facilitates meaningful discoveries among students.
Role: UX Researcher, UX Designer, UI Designer, Team Lead, client communication
Project Context: Internship, in production
Product Type: Gaming
Duration: 2 months
Tools: Figma, Miro, Mural
Problem
Participants in the “Nomie” games encountered challenges comprehending the rules and expectations, leading to reported confusion in navigating the game flow. Teachers are currently facing difficulties in determining the most effective ways to support students during game play.
Solution
Ensuring a website is accessible to participants is crucial for optimal understanding. Clear rules and the option to review them empower students to learn at their own pace. A well-defined UI component hierarchy minimizes confusion about the next steps. Establishing a user-friendly platform enables teachers to effectively assist and engage with their students.
Research
Heuristic Evaluation
After giving the Nomie website a thorough Heuristic Evaluation, we identified some areas for improvement. The focus is on giving teachers more control within the system, encouraging a more active facilitator role instead of a passive observer. Also, offering prompt feedback to both teachers and students on the game's progress and their current stage emerged as a valuable enhancement for a more enriching experience.
View Heuristic Evaluation Here
Competitive Research
Flexibility : Fair
Host Lead
High Contrast for legibility
Uses sound and visual
Navigate by playing through
Visual hierarchy with clear signals
Responsive website
Flexibility : Exceptional
Game tasks are static on host screen due to all the possible devices that can be used
High Contrast for legibility
Uses sound and visual
Linear gameplay across all available games
Visual hierarchy with clear signals
Flexibility : Bad
Does not have a responsive layout
Low contrast with branding colors
Bad drop down menu navigation.
Mobile integration doesn’t work.
Ideate
Affinity Mapping
The interviews yielded valuable insights that informed my analysis. Employing an affinity map, we discerned patterns and key points, ultimately identifying 10 prevalent themes encapsulating the priorities, challenges, and expectations of student and teacher participants in their game experience. Notable observations included:
💡 When beginning a the game “Who Said What?” students prioritized clarity of rules and understanding.
💡 Students often reported a lack of feedback when completing tasks during the game which lead to confusion.
💡 Multiple students noted the want for a point system for a more gamified experience.
💡 Students and teachers were uncomfortable deciphering the concept of the game due to lack of control.
User Personas
With the information gathered, our team created two different personas to get a better idea of the users I we are designing for. This is what really allowed us to see what specific needs, goals, pain points, and motivations users have when it comes to the experience of class bonding and group gaming that fit their specific needs.
Site Map & User Flows
A site map provided a structured overview, highlighting essential components and their relationships. This visual guide was crucial in focusing on must-have elements, serving as a strategic foundation. User flows, outlining step-by-step journeys, refined the user experience, ensuring logical navigation. Concentrating on must-haves, these flows guided the creation of a purposeful journey, aligning with the identified needs of students and teachers for a user-friendly design.
Design
Sketches, Wireframes & Wire Flows
Leveraging the user flows and site map to steer my red routes, we began the process with foundational sketches. Our design approach prioritized user accessibility and clarity. Crafting a game flow that permitted students ample time to grasp the rules aimed at enhancing the overall experience. Simultaneously, for teachers, our goal was to empower them with greater control and information, transforming them into valuable resources for the students. The fish was designed by our team illustrator.
Student Flow
Student Flow
Design System
High Fidelity
Teacher Flow
Testing
Usability Testing
Integrating the various design elements, we developed a high-fidelity prototype for usability testing. We conducted two rounds of testing involving participant interactions.
During the initial round with 5 participants, challenges arose in the question flow segment—a pivotal aspect of the app's functionality. Addressing this feedback, we refined the flow to enhance clarity regarding player expectations and facilitated a more streamlined process.
Subsequently, the second round involved 4 new participants. With the optimized flow experience, users navigated the process seamlessly with small adjustments to wording location, resulting in a successful outcome without any apparent confusion.
Action buttons weren’t as visible for the teachers, enhanced the font.
Added card for consistency with rest of website.
Added the background consistent with the mobile version of the website.
Balanced the buttons appropriately.
Prototype
Moved “Find your group” and ready check indicator higher due to participants missing instructions.
Darkened the Nomie help “?” indicator due to difficulty noticing.
3 emojis was determined to be sufficient and balanced.
Students misunderstood percentage due to location, adjusted location.
Bolded questions for clearer hierarchy.
Added consistency in the header by moving the hamburger left to match the website dashboard location.
Removed the Nomie bubble from this page for a simpler viewing
Moved “answer out loud higher” and changed color to match other action indicators to limit examined confusion.
“Show Answer” proved to be clearer verbiage for users.
All group members are visible without scrolling to improve simplicity.
The original card was different than all other cards in the application, which lead to confusion. So we used the same card throughout.
Emojis proved unnecessary for open group question.
Removed emoji counter at the end of the game due to client’s wishes.
Reflection
What I Learned
What’s Next
