Dystroia [UX /Ui]

DYSTROIA APP DESIGN

I designed an IOS / Android dream app to allow users to see what’s behind their nightmares. The entire process included (but was not limited to) two rounds of wireframing, user testing multiple subjects, digitally drawing, and character creating. In three and a half months, I delivered Dystroia, an app that will allow you to see your true fears behind your nightmares.


Timeline My Role Type of Project

3.5 Months UX/UI Designer, Digital Artist, Animator Independent/ In-Class

Apps Used: Figma, Adobe Suites, DaVinci Editor, Procreate

Problem

There are many health apps available to track dream cycles or to ensure a quality sleep. What about when it’s disrupted? Users who are dealing with recurring nightmares makes them question if they are holding on to something inside.


Solution

To see and visualize your nightmares, users will take two rounds of a quiz to analyze their hidden fears. They will be met with an in-depth explanation at the end of the quiz that will give them an understanding of what they need to work on. In the last stage of the app, the nightmare is embodied through a robot, who, through VR can be combated and defeated. This will make the user feel in control and will relinquish their subconscious fears.

 

Process



 

Sketches

Persona

To begin with the idea in the realm of nightmares and how to combat them, I  began by drawing out each frame and scanning them through Adobe Scan.

This robot became a rough sketch and was inspired by Neon Genesis Evangelion’s Unit 01. The start of the VR component was added on the initial sketches.

After the user logs in, they will be prompted to the quiz portion of the app. In the first round they will answer with more time, while the second round will give them quick-fire questions. This will activate their subconscious mind and will not let them overthink.

After in-class peer reviews, factors like button size and the inclusion of a “back to home” button was needed. To view the changes of each step in detail, click here for the full presentation.

After the user gets their results, they will be met with the second component of the game: VR. In the above image is what the user will first see. The robot will talk, saying, “I am your nightmare, (your name)” and will taunt the player throughout the gameplay. The objective will be to fight the robot until it kneels down in front of the user.

To customize outfits and accessories, the user will have a choice to select an avatar or have their account display their photo [Figure 2].

Product Successes

At the completion stage of the app, I was able to make a trailer for the app and to showcase it during Miami University's ETBD Gallery Showing. The trailer represents the different types of nightmares someone might experience through animation. It also dives into what the robot represents (in comparison to how small the human is) and creates a motivational factor for it to be defeated. 

The trailer for the app was liked and viewed by the creator of the soundtrack, Ivan Shopov. 

What I Learned

Throughout the process, I tested myself with how far I could take this. It was not simply a project for university, but a way for me to see what I can do with the time we were given and the beginner skills that I acquired through new apps like Procreate and FlipAClip (Animation tool). At the end, I was proud of what I could do and would want to keep going with this project.


From Low to High Fidelity

Gamification

Figure 1
Figure 2