Game Design - Neumorphic Memory Training App

•

What We Did

The Scope of Our Work

The idea originated from an article introducing the emerging neumorphic design trend in 2019/2020. I was quite a fanatic of new UI trending in those days, especially as someone who often works on projects with a more restricted or UX focused role. While speaking to the other designers, researching, and brainstorming ideas, I

found out one of our mobile developers was also interested in an experimental side-project and we teamed up.

Developing the Concept
Wireframing the Main User Flow

I liked how neumorphic design was a new interpretation of an older concept, and I wanted our game to reflect this. I started prototyping a memory game based on the rotary phone, which many in my generation didn’t grow up with. Remembering someone’s phone number was also a thing of the past that I wanted to incorporate.

The game would work by briefly showing the user a number, then asking them to dial it correctly from memory. Each level passed, the number shown would increase by one digit, with the first level starting at 3 digits and the last level ending at 10 digits.

Visuals and Content
Defining a UI Style

In general, I chose the light mode in order to bring a bright feeling. When designing the interface, I strictly followed the neumorphic rules of using shadows. The toughest part was the visualization of the dial plate with holes, for both design and implementation. Experiments needed to be done over and over again in order to express the transparency correctly while keeping the shadows working in the proper way.

To add a bit of playfulness and mystery, I turned the 10 levels into different shops to build a feeling of adventure after the user successfully "connects" to the right number. Some light-hearted messages and cute icons were added for each completion.

Development, Tests, and Polish

Refinements In the Way of Iterations

During the whole development process, I worked quite closely with the developer Hao Lu. Thus we could refine and adjust the design in real time if any issues were uncovered along the way.

After finishing the main interface, some refinements were added such as putting a vibration effect when the user dialed a number correctly, and sound effects to reflect errors or successes. We originally considered them “bonus” on top of the visual design and interaction, but were delighted to find out that they enhanced the play experience quite significantly by incorporating the additional senses of touch and sound into the game.

What We Learnt

Project Reflection Matters

1. Every Small Idea Counts

For a while, I felt doubtful about how meaningful or interesting this project was. In the end, I realized the point of “stupid” experimentation is that they can snowball, bring up new discoveries, or fresh perspectives. The key is to give it trust and get started. The exploring process (probably with some unexpected results) is the most fun part. Isn't it?

Memo-Ring as an example, I never expected those random ideas that came from an initial brainstorm could turn out to be a real app game at the end, even till the end when I am really playing it on my phone. Never underestimate any small initiatives, embrace the changes along the way and enjoy the uncertain destinations.

2. Features Usually Built on Joint Decisions in Real Projects

As a designer, I find problems and design solutions to solve them in my daily work. But the designer’s suggestion or idea won’t be the ONLY solution in a corporate project. Beyond the design level, there are far more other ways to achieve the same goal from a developer or management perspective.

Most of the design decisions in real projects are actually a more comprehensive group decision considering resources, deadline, budgets on hand. To achieve the agreement in the team and make sure the project moves forward as scheduled, compromises are inevitable. It is not an absolute bad thing, compromises doesn’t equal to “being defeated” - it is to find a relatively perfect way to reach a common goal under the circumstances.

3. Iterating Within A “Big Blueprint”

It is not a linear process when doing this project, many ideas come in/out and iterations happen all the time. So it is important to set and follow a predefined big picture or structure to make sure those episodes do not break up the main theme, adding or removing features should be considered under the major premise.

After building up the MVP, some bonuses could always be added later - you don’t need to make everything perfect at once. Like for Memo-Ring, we added the vibration and sound effects after completing main features. This is also a way to manage the time properly in a project, to allocate your efforts or resources where it counts the most.

4. Forethoughts Come From The Past Experience

There are some regrets after the project, mainly came from the delayed tests and poor documentation. Some forethoughts could help improve the overall experience a lot if considered at the beginning. Such as, if we thought about the adaption for different screens or devices initially, the code will be structured in another way to support responsive interfaces and in different devices. And I’ll make the tap area of the digits bigger if tested on the mobile during the testing stage.

Where To Download

Try Out MmRing

If you are interested in the game and would like to give it a shot,

here you can download it on your phone for free!