Nomie
Classroom chat web app
What is Nomie?
Nomie is a web app that facilitates activities and exercises for CEGEP students that encourage inclusivity, confidence, trust, and collaboration between students forming new connections. CEGEP is the Canadian province of Quebec’s equivalent of community college.
In the past, Nomie has sought designers to bring their expertise and perspective to enhance the usability and look of the user portal. The onboarding process had been reviewed prior to my team joining Nomie, in addition to one of the main games. Nomie then asked my team to design an innovative group chat.
The designer’s role
Evaluate the existing preliminary chat concept.
Conduct benchmarking and competitive research to understand market standards and innovative practices.
Perform a comparative analysis to identify potential improvements.
Organize ideation sessions for generating creative ideas to enhance and enrich the initial concept.
Develop and present a detailed design proposal on Figma.
Our problem
Loneliness is a serious problem among college students, so much so that the difficulty in establishing social relationships can lead to failure in their studies. In 2018, over 30% of CEGEP students (equivalent to community college) dropped out of their classes. A solution was in order for this problem.
Our solution
To help solve this problem, we sought to develop a chat feature for Nomie. In collaboration with students, we refined this concept to create a distinctive, fun, and inclusive chat solution, focused on user-friendliness, efficiency, and innovation.
Competitor analysis
First, we analyzed some of Nomie’s competitors, which included several other popular chat apps commonly used by university students: GroupMe, WhatsApp, and Discord.
We were particularly focused on which of these app’s features would be useful to integrate into Nomie, and which would be irrelevant to an educational app.
Brainstorming
We used IDEO’s brainstorming technique for this step. First, we diverged – each member of our group wrote down individual feature ideas, inspired by our competitor analysis, on virtual “Post-it notes.” Next, we converged – we narrowed in on ideas that best solved our problem statement. We also determined whether each Post-it was worth keeping, and moved those that were into a pile called “Keepers.” We consolidated “Keepers” that were similar to each other. Our notes were color-coded based on who wrote them.
User stories
Our next step was to create user stories to make sure our product would meet the needs of Nomie and its users (students and teachers in CEGEP schools).
We identified and listed all user needs for the group chat in a spreadsheet.
Sitemaps
Next, we created sitemaps to map out what the chat feature would look like, for both student and teacher accounts. We made these with specific reference to the screens we would have to design for the project.
Wireframes
Our grayscale Figma wireframes were a preliminary depiction of what the chat window would look like. We decided to create two main tabs – one for the chat itself, and one for upcoming events.
High-fidelity mockups – a few sample screens
Our high-fidelity mockups were fleshed-out and colorful, and incorporated several different features:
Interactive attendance – Teacher initiates class with a fun or relevant message in group chat; students input designated code or word to mark attendance; Nomie automatically records submissions for efficient attendance tracking.
Student engagement detection – Utilize a "check-in" feature during class to assess student engagement or confusion; options include using images or prompted questions for quick evaluation.
Scheduling events – Events announced with time, date, and location; emojis indicate participation status; designated meeting point on campus before event encourages group arrivals and networking.
Feedback from user testing
We interviewed 5 participants – 3 students and 2 teachers – to assist us in improving our high-fidelity wireframes. The main issues identified were as followed, which were added to the final iterations of the screens:
Lack of clarity in the user interface
Participants recommended tooltips for icons.
Confusion regarding the purpose of the “plus” icon in the bottom right corner:
Suggestions were made to add explanatory copy or implement a tutorial for first-time users.
Ideas were discussed to make the button more noticeable, potentially by having it glow for first-time users.
Result
Our client was very satisfied with the deliverables at the end of the contract period.