ROYA is an AI-powered dream analyzer for dream journals, psychological analysis of dreams and mapping out mind patterns. It's easy to use with an AI advanced enough to also be inclusive towards people whose first language might not be English, are dyslexic (or just bad with grammar).
My role in this project was to be the product designer, responsible for the overall look of the components and user experience. I was not, however, part of the ideation (or testing) phase, therefore most of the focus below is on visual design.
Overall look
Thankfully I was handed over the already done user research on the target group this app was being developed for, so I didn't start completely in the dark.
Even though it might have seemed from the project brief that the focus lied heavily on psychoanalysis, the reality is thankfully more colorful. A lot of people use dream interpretation apps. Among those, yes, clients for psychologists trying to map out their unconscious patterns, but also people interested in the secrets of their minds, folks wanting to document their dreams for creative purposes, and many more.
If there's one thing these groups could agree on is that dreams, for whatever purpose they serve, are mysterious, often clouded in folklore, deeper meaning, even when talking about the field of psychology.
When creating the overall look for ROYA that was something I always wanted to keep in mind. Respect the mysterious, cosmic side of dreams, but not forget a pinch of playfulness. Speaking even from just personal experience - talking/writing about dreams is exciting!
User flows
Even though the app setup is pretty straightforward, I always start my work with actually understanding the user flows of the product/feature being designed. This allows me to have a better dialogue with other stakeholders in the project, map out the interactions and have a true overview of what actually needs to be handed over.
They are also great ways of documenting decisions and making sure that what was decided is also what is worked on.
This is an example of the user inserting a new dream for analysis.
Setting up wireframes
The feel of the UI
- Cosmic, dreamy, mysterious
- Moon cycles, astrology
- But also playful, roundish features, softness
- Moon and stars in the dark sky
Personally, I was given a lot of freedom when creating the visual look of the app. I took the previously given (potential) user descriptions and, after talking with the other stakeholders, had a pretty solid idea of how I imagined the app to look like. It was also the first project in a while at the time where I could operate outside of the corporate realm with an already existing brand identity.
Got to get those rounded corners and strong color contrasts to the table
The Old & The New
For the purpose of user testing very basic design had been created for the app before any kind of visual identity was made. That allowed me to a.) observe the UX of the program setup and make improvements to the user flow and b.) see what sort of UI elements had to be created for the library.
I thought it would be interesting to see how the old testing environment could be compared to the new designs.
In order to render the best analysis, the AI needs to know more about the user - their age, relationship status and number of kids.
Updated view of the same questions. Elements are bigger for better accessibility, the visuals mimic the overall vibe of the app - astrological signs to represent the category of user info. The Next button is currently disabled since the user hasn't inserted an answer before.
Even though I am not a huge fan of disabled buttons and generally prefer to rather display an error message in case of a missing insert, I felt that in this case the possibility of an error was so low that using disabled buttons was justified.
Views from the app: loading screen, welcome message, main view, adding a new dream & the archive.
