DayDream

Final project master

UX/UI

Description

DayDream would be a mobile app that would be used to save users' dreams, create content from them using AI, book sessions with specialists to interpret them or consult statistics about them and those of the rest of the world, among other things.

Process

In order to approach the ideation, design, and creation of a DayDream prototype, we chose to follow the Design Thinking methodology.

For this project, I have used the Double Diamond method. This is an extensive process that has helped me to better orient myself based on my initial concept and to finish defining the main idea throughout its different phases.

Problem

Most people have difficulty fully remembering their dreams or don't achieve it at all and many of them would like to achieve it.

Similarly, they may be going through difficult times or have problems they would like to solve, and all of this is being reflected in their dreams.

Challenge

The proposed objective is to design an application that helps the user to remember their dreams more clearly and frequently in a simple and intuitive way, and also to be able to solve some of their life conflicts supported by their dreams and accompanied by specialized psychologists in the field.

1. Observe

Desk research
and netnography

In this first phase, I started by conducting a desk research and a netnography. These were the conclusions extracted from each of them:

2. Synthesize

User persona

I began this stage of Design Thinking by creating a user persona and an empathy map.

Research questions

Afterwards, based on the previously obtained information, I thought of different research questions that could be useful to advance in the research phase.

I divided them into three different categories: features, users, and monetization.

Survey

Next, I conducted a survey in order to gather more information that could help me have a clearer idea of how to direct the app. The following are some of the questions I asked:

And these were the conclusions drawn after analyzing the survey results:

Interview

Next, an interview was conducted. These were the responses I gathered:

Benchmarking

The benchmarking helped me to identify the key features and aspects of the app compared to what the competition offers, and thus be able to see which functions would be the most remarkable of the product and the ones that the rest of the similar apps already on the market lack.

The conclusions after carrying out the benchmarking:

SWOT

Thanks to the SWOT, the product's strengths and weaknesses can be identified in a clearer way and oriented so that it can differentiate and improve over the competition.

2. Synthesize

User persona

I began this stage of Design Thinking by creating a user persona and an empathy map.

Empathy Map

Customer journey

Then I developed a customer journey and a needs matrix.

Needs Matrix

3. Idea

Findings and insights

In this phase, I collected the different ideas and concepts that I considered most interesting and that emerged as we progressed through the previous steps of Design Thinking. I took note of them and then organized them into different clusters.

Matrix of viability and usefulness

After organizing the different ideas into categories, I created a chart to evaluate the concepts that could be more feasible and provide greater utility to the users in the development of the app.

In and Out and MoSCoW

Afterwards, I discarded some of the ideas and kept the ones that seemed best to me (In and Out).

And after this, I proceeded to classify them into different groups according to their importance or accuracy, in order to be able to implement them or not based on the concept of the app (MoSCoW).

Value Proposition

Next, what I did was create the canvas for value proposition. It is a useful tool for any project that helps to relate products or services with their users and consumers, helping us to avoid focusing on our own vision, and to focus on delivering value for our users or clients.

Business Model Canvas

Next, I completed the Business Model Canvas, a strategic management tool that outlines key factors of a business between customers and the company.

4. Design

Sitemap

This is the final stage, in which the product design is addressed based on all the ideas, concepts, data, and other conclusions extracted from all the previous steps of Design Thinking.

I started with the sitemap, a graphic that shows the different sections of the app or website and how they are connected to each other.

3. Idea

Findings and insights

In this phase, I compiled the different ideas and concepts that I considered most interesting and that came up as we progressed through the previous steps of Design Thinking. I wrote them down and then organized them into different clusters.

Flowchart

A flowchart is a diagram that is used to clearly see the steps to be taken to perform a specific action within the app, website or other product being developed.

Needs Matrix

Empathy Map

Matrix of viability and usefulness

After organizing the different ideas into categories, I created a chart to evaluate the concepts that could be more feasible and provide greater utility to the users in the development of the app.

Customer journey

Then I developed a customer journey and a needs matrix.

Moodboard

To help inspire in terms of aesthetics, a moodboard is created. A board in which captures of various products that are interesting due to details related to their design, color schemes, parts of the user interface, etc. are grouped together.

For DayDream, these were some of the designs that caught my attention the most:

4. Design

Sitemap

This is the final stage, where the product design is addressed from all the ideas, concepts, data, and other conclusions drawn in all the previous steps of Design Thinking.

I started with the sitemap, a graphic that shows the different sections of the app or website and how they are connected to each other.

Wireframes

With all the ideas and concepts that I had collected throughout the process, I started to create sketches of different sections that would be part of the app, such as the home screen, the user's dream journal screen, statistics of these, etc. This type of sketches are called wireframes.

In and Out and MoSCoW

High prototype

High prototype

After having finished the wireframes, I proceeded to design the high-fidelity prototype using Figma.

Value Proposition

Business Model Canvas

Next, I completed the Business Model Canvas, a strategic management tool that outlines key factors of a business between customers and the company.

Colors, typography, and iconography

Samples of color palettes, fonts, and icons used for the design of the app.

Flowchart

Next, I completed the Business Model Canvas, a strategic management tool that outlines key factors of a business between customers and the company.

Onboarding

With information, but simple.

The onboarding serves to show the user in a simple way what the main functions of the application are when accessing it for the first time.

In this case, it has an initial welcome screen after the splash screen and four other screens in which a large icon appears and below it a text commenting in a simple way the main things that can be done with the app.

A "skip" button is included in the lower right corner of the screen to go directly to the login/registration screen.

Wireframes

Moodboard

For DayDream, these were some of the designs that caught my attention the most:

High prototype

After having finished the wireframes, I proceeded to design the high-fidelity prototype using Figma.

My dreams

Your dreams, safe and sound.

The app starts by showing the My dreams section, where the user can save their dreams.

Here, information related to sleep hygiene is also found.

Dreams would be private, unless the person decided to share them. There would always be the possibility to protect app access with a password, Face ID, Touch ID, etc.

Colors, typography, and iconography

Samples of color palettes, fonts, and icons used for the design of the app.

Dream Analysis

There are dreams that say too much.

Mental health is something fundamental. That's why, in the Dream Analysis section, the user has the option to book video call sessions to interpret their dreams and/or address certain concerns in their life with the help of specialized psychologists in this field.

This would be a paid feature within the app, but there would be promotions displayed within the section from time to time.

The user could also consult information about each of the specialists available who are part of the team.

Onboarding

Global statistics

In the cloud of dreams.

Within the Global Statistics section, users can access different information about dreams that have been registered by the rest of the community (the content of the dreams would never be shared unless the person decided to).

In this section there would be different categories: "By Dream Type", "By Country" and "By User".

This data could be shared with the user's contacts and also through social media.

My dreams

Your dreams, safe and secure.

The app starts by displaying the My Dreams section, where the user can store their dreams.

Here, information related to the user's sleep hygiene can also be found.

The dreams would be private, unless the person decided to share them. There would always be the possibility to protect access to the app with a password, Face ID, Touch ID, etc.

Dream Analysis

Web version (landing page)

Global statistics

Web version (landing page)

In the Cloud of Dreams.

Within the section Global Statistics, the user can consult different information about the dreams that have been registered by the rest of the community (the content of the dreams would never be shared, unless the person decided to do so).

In this section, there would be different categories: "By type of dream", "By countries" and "By user".

These data could be shared with user contacts and also through social media.

▶︎ Watch video

⧉ View prototype

If you wish, you can consult the document with all the information about the project here.