MentaMorph
An immersive mobile game on how to spend and invest for the greatest return
MentaMorph
An immersive mobile game on how to spend and invest for the greatest return
Left to right: lesson start page, car information page, quiz page
The problem
The problem
How do we provide users new educational information about car purchasing without overwhelming them?
Me, along with two other UX/UI designers, were tasked with creating a car purchase user flow for an existing game that was about making financial decisions.
While creating that new user flow, we also ran into the problem of how users would be able to make informed decisions about the car options offered to them.
How do we provide users new educational information about car purchasing without overwhelming them?
Me, along with two other UX/UI designers, were tasked with creating a new car purchase user flow for an existing EdTech game aimed toward teaching teenage students fiscal responsibility.
While creating that new user flow, we ran into the problem of how users would be able to make informed decisions about the car options offered to them.
The solution
The solution
Integrate education modules and quizzes that users can reference at any time
The client wanted us to just create a car purchase user flow for the game.
However, they mentioned that the game is currently played in conjunction with separate instructor-provided materials, and that they wanted users to be able to play the game without needing separate materials.
So we thought, we can do both. We incorporated the material into the game itself to have the game be entirely self-sufficient and to also users easy reference points so they don't get overwhelmed with all the information in the new car purchase user flow.
Integrate education modules and quizzes that users can reference at any time
The client wanted us to just create a car purchase user flow for the game.
However, they mentioned that the game is currently played in conjunction with separate instructor-provided materials, and that they wanted users to be able to play the game without needing separate materials.
So we thought, we can do both. We incorporated the material into the game itself to have the game be entirely self-sufficient and to also users easy reference points so they don't get overwhelmed with all the information in the new car purchase user flow.
The final prototype walkthrough
The final prototype walkthrough
Over the course of 4 weeks, my colleagues and I designed and integrated three new features: an education module, a quiz, and car information screens.
What did current user pathways look like? How did our new one fit in?
What did current user pathways look like? How did our new one fit in?
Top: original user flow we mapped out on first playthrough
Bottom: our integrated user flow into the existing user flow above
Left: original user flow we mapped out on first playthrough
Right: our integrated user flow into the existing user flow above
Before we started designing anything, our team played through the game to get a feel of how it was currently built out, see where potential problems could crop up, and how we could seamlessly add our new flow.
The game was fairly easy to navigate upon creating the first playthrough user flow, so after we brainstormed a new car user flow, we were able to easily insert it into the existing user flow.
This would lessen the cognitive load on users who were already used to playing the game and not force them to learn entirely new pathways.
Before we started designing anything, our team played through the game to get a feel of how it was currently built out, see where potential problems could crop up, and how we could seamlessly add our new flow.
The game was fairly easy to navigate upon creating the first playthrough user flow, so after we brainstormed a new car user flow, we were able to easily insert it into the existing user flow.
This would lessen the cognitive load on users who were already used to playing the game and not force them to learn entirely new pathways.
Testing New User Flows
Testing New User Flows
We asked 5 users over Zoom to do a walk-through of our user flow and focused on discovering:
how users were playing through the current version of the game
which areas were confusing and needed more clarity
what information they expected to see in a car purchase scenario
Our key insights are summarized below.
We asked 5 users over Zoom to do a walk-through of our user flow and focused on discovering:
how users were playing through the current version of the game
which areas were confusing and needed more clarity
what information they expected to see in a car purchase scenario
Our key insights are summarized below.
Reiterating on our design
Reiterating on our design
Left to right: car information page, auto loans pop-up, education module screen
Left: car information page
Right: education module screen
After testing our initial lo-fi user flow prototype, we incorporated the user feedback into our new wireframes and reiterated user flow then went straight into creating a hi-fi prototype of the car purchase scenario.
Because we were creating a new branch of something that already existed, we had an existing framework to base our screens off and had more time to work on the education module screens since we were more focused on the car purchase user flow at first
Things were all starting to come together…
After testing our initial lo-fi user flow prototype, we incorporated the user feedback into our new wireframes and reiterated user flow then went straight into creating a hi-fi prototype of the car purchase scenario.
Because we were creating a new branch of something that already existed, we had an existing framework to base our screens off and had more time to work on the education module screens since we were more focused on the car purchase user flow at first
Things were all starting to come together…
Was the new design better?
Was the new design better?
We asked 5 more users to do a play-through over Zoom and gathered the insights below.
We asked 5 more users to do a play-through over Zoom and gathered the insights below.
If we had had more time…
If we had had more time…
Left to right: our recommendations for the home page, landing page, and start page
Left to right: our recommendations for the home page, landing page, and start page
We would’ve redesigned and iterated on other screens to match the UI of the education modules and car selection screens that we designed for the client.
Redoing the UI would've been the next steps for us had we continued with the project.
We would’ve redesigned and iterated on other screens to match the UI of the education modules and car selection screens that we designed for the client.
Redoing the UI would've been the next steps for us had we continued with the project.
Conclusion + Lessons Learned
You serve the users but you are also serving your client.
We suggested the education modules because we thought they would be good UX, and our client gracefully agreed. But ultimately, sometimes the client has the final say in what they want to see or have.
Things that may seem obvious are not always obvious.
When we were usability testing, actions that I expected the user to take often ended up not being the actual action they took. I can’t always assume. I need to be considerate of every possible way a user can approach something.
Keep your mind open to new ideas, especially from teammates.
My teammates pointed out and suggested many great changes that I would not have seen or thought up myself, and I am so grateful for such respectful teammates that also took my thoughts and opinions into account. Wonderful things really do happen when you have great synergy with your team!
Conclusion + Lessons Learned
You serve your users but you are also serving your client. We suggested the education modules because we thought they would be good UX, and our client gracefully agreed. But ultimately, sometimes the client has the final say in what they want to see or have.
Things that may seem obvious are not always obvious. When we were usability testing, actions that I expected the user to take often ended up not being the actual action they took. I can’t always assume. I need to be considerate of every possible way a user can approach something.
Keep your mind open to new ideas, especially from teammates. My teammates pointed out and suggested many great changes that I would not have seen or thought up myself, and I am so grateful for such respectful teammates that also took my thoughts and opinions into account. Wonderful things really do happen when you have great synergy with your team!
Thank you for reading!
Thank you for reading!
If you'd like to reach out or connect, please email me at: julienguyen.ux@gmail.com
If you'd like to reach out or connect, please email me at: julienguyen.ux@gmail.com
Slide deck link: coming soon
Slide deck link: coming soon
Back to top