MentaMorph

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.

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 Jude, Mikaela, Zahra, Margot, Shannon, Louis

Timeline 5 Weeks

Tools Figma, Figjam, Maze, Trello

Role Interaction Designer of a 6-person team

The Final Product

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.

This second flow is the dashboard intended for teachers. With features such as checking which students haven’t signed up, seeing which students need help with certain concepts, and individual student metrics pages, we designed this with teachers completely in mind.

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.

Dashboard Deepdive

To start off our research, we jumped headfirst into the ocean depths of teacher dashboards. For this, we focused on three main companies: Kahoot!, Duolingo, and Nearpod. We then compiled a list of their best features to see how we could potentially use them in our own system.

Teacher Conference

We then turned to learn, once again, from a group of people who taught us everything we know: teachers. We conducted 5 scripted user interviews to pinpoint the pain points of the onboarding process and the using a teacher dashboard. I discovered that onboarding can be excruciatingly lengthy and difficult not only for the teachers, but also the students. Not only that, but teachers had issues trying to learn how to use a teacher dashboard, causing the entire process to be tedious.

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

Keeping our design principles and Anne in mind, we thought about how to create a quick and easy onboarding process and what we’d like to showcase on the main dashboard/module frames.

We then incorporated all our ideas into a master sketch that gave us a basis to refer to when designing our greyscale wireframes.

Wireframes

Now that we had the framework, it was time to construct the rest of our building. We put on our safety vests and hard hats, turned on our laptops, and opened Figma to turn our ideas into a usable prototype.

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 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 went off a color scheme Susan had given us, but slightly changed the colors for a softer look, making it less stressful on Anne’s brand new eyes.

For our fonts, we wanted something that felt contemporary, but still comprehensive, and decided to use Satoshi. We also used Array for an updated version I made of the Mentamorph logo and Bevellier for the homepage to add a bit of pop.

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