MentaMorph

✶  Ease of use rating: 9.5/10

The MentaMorph Money app features a dynamic game that simulates real-world financial decisions, incorporating various scenarios and increasing complexity to create an engaging learning experience.

The MentaMorph Money app uses a powerful game integrating the many aspects of financial decisions to simulate the real-world experience, with numerous scenarios and increasing levels of complexity.

Client MentaMorph

Timeline 5 Weeks

Tools Figma, Figjam, Maze, Trello

Role Interaction Designer of a 6-person team

Team Jude, Mikaela, Zahra, Margot, Shannon, Louis

Client MentaMorph

Team 3 UX Researchers 2 UX Designers 1 Product Designer

Timeline 5 Weeks

Role UX Designer

Tools Figma Figjam Maze Trello

The Final Product

Onboarding

This first flow showcases the onboarding process I created for Mentamorph. I kept it as simple as possible, while still effective, and implemented features such as being able to add multiple students at once to prevent a long and tedious experience.

Teacher Dashboard

The second flow is the dashboard designed specifically for teachers. We built this with educators in mind, incorporating features such as:

  • checking which students haven’t signed up

  • seeing which students need help with certain concepts

  • individual student metrics pages

Our Tasks

For this project, MentaMorph tasked us with creating a dashboard for educators that would provide interactive feedback on student performance and outline lesson objectives. Along with this challenge, I was also appointed to create the onboarding process.

For this project, MentaMorph tasked us with creating a dashboard for educators that would provide interactive feedback on student performance and outline lesson objectives. Along with this challenge, we were also appointed to create the onboarding process.

Research

To kick off our research, we dove deep into the world of teacher dashboards, focusing on three key platforms: Kahoot!, Duolingo, and Nearpod. We analyzed their best features, taking note of potential elements to incorporate into our own system.

Interviewing Teachers

We then turned to the people who taught us everything we know: teachers. To better understand their experiences, we conducted five scripted user interviews to pinpoint pain points in the onboarding process and the teacher dashboard. From these conversations, we identified three major challenges:

  • Onboarding is excruciatingly lengthy and difficult for both teachers and students

  • Teachers struggle to learn how to use the dashboard, making the entire process feel tedious

  • There is no way to track student progress

Persona

In order to move forward, we needed someone who we could turn to for every decision. We needed someone whose experience could lead us into the right direction. With that, we took every bit of research we had and headed straight for the lab. We compiled every single need, every single frustration, and every single behavior we could find and poured it into a gigantic bowl. After a hefty amount of stirring, it started to take shaped and moments later our persona, Anne Structor, emerged into this world.

Sketching

With our design principles and Anne's needs in mind, we aimed to create designs that felt both intuitive and intentional while carefully considering what to showcase on the main dashboard and module frames.

Wireframes

With our framework in place, it was time to bring our vision to life. We put on our safety vests and hard hats, fired up Figma, and began transforming our ideas into a functional prototype.

The dashboard opens to a summary of the current module progression, providing an at-a-glance view of student performance. We also added a dedicated metrics page for each student, giving Anne quick and easy access to individual performance.

Usability Testing

Finally, our first draft was completed and we were eager to see how well it worked. Before handing it off to Anne, we conducted four moderated usability tests with teachers from K-12 schools. 

In testing, we had four main objectives:

  • that our information hierarchy was user friendly and intuitive

  • that users were able to access relevant information on the dashboard

  • that they were able to easily track student progress and provide them with feedback

  • identify any pain points users may have when navigating the dashboard

Analyzing Data

It was now post-testing and everyone was able to complete our tasks with little to no difficulty. Although we had already created a sufficient product, we wanted to work out the few bugs that came to light to make an even better dashboard for Anne.

As I analyzed the data, I noticed there were four key takaways:

  • More control from dashboards homepage

  • Difficulty navigating to modules

  • “okay” button during onboarding is confusing

  • More descriptions or subheadings for modules

Style Issues

Now came the fun part of designing. Our client, Susan, initially gave us a style guide, but told us we had free rein on the appearance. With splashes of our chosen colors, our product came to life. We were ecstatic about how it turned out and couldn’t wait to show it to our her.

The zoom call started and we were moments away from unveiling our prototype. And finally, our dashboard popped up on everyone’s screen. She hated it. She said blue made her feel sad and wanted to incorporate purple as it is her favorite color. This was a bit of a setback, but we were determined to create something she’d love.

Style Guide 2.0

For our style guide, we started with a color scheme provided by Susan but softened the tones for a more approachable look, making it easier on Anne’s fresh set of eyes.

For typography, we wanted something contemporary yet highly legible, so we chose Satoshi for its clean, modern feel. We incorporated Array for the updated MentaMorph logo I designed and used Bevellier on the homepage to add a touch of personality and visual interest.

Testing 2.0

Once again, we conducted moderated tests and this time with 3 users. Like before, users were overall able to complete tasks with ease. However, we still received valuable feedback on how to improve our design and create a smoother process for Anne. 

We asked users to give ratings from 1-10 on ease of use and confidence using the product without assistance.

Ratings for Ease of use: 9.5/10

Confidence using the product without assistance: 9/10

We finally created a product Anne would love to use and we couldn’t wait to show Susan our redesign.

The Big Reveal

Our hearts were beating in anticipation as we waited contemplating what Susan might say. Nerves slowly rose as I guided my mouse to the button that would join us altogether. Friendly salutations were exchanged and at last, the moment of hearing Susan’s words ring through our ears had arrived.

She absolutely loved it. From the color palette to the simple redesign of the logo, she was elated with everything we had built from nothing but our own ideas.

The Next Steps

Even though we had created something Anne could use ease, there’s always a way to improve upon an idea.

Here are a few ideas I'd like to develop if I were to continue working on this project:

  • Build out the student dashboard to work smoothly with the teacher dashboard

  • Develop a mobile version that can be integrated into the downloadable game itself

  • Add an optional and non invasive tutorial or add more labels and descriptions for less intuitive features