Dreamer
📜 Technical summary
Time
(09.2020-09.2021)
Role
UX & UI designer
Developer
Methods
Wireframe
Design system
Prototype
Tools
Figma
Android Studio
Firebase
🖼️ Background
Dreaming is part of our everyday life. In this project I built a diary to collect them, as a project for my Bachelor thesis. Beginning from a market analysis and literature review. Moving on to the creation of the design, starting from low level wireframing prototypes, then moving on to full-fledged ones. Finally concluding with the actual implementation of the front-end and back-end of the application.
⚠️ Problem
Understanding our self’s is a hard and long process, dreams often are a mysterious part of our everyday life. Different interpretations have surged during the years, from Freud that claims that dreams are the representation of our most wanted desires. To more scientific clam that when we sleep, we memorize the information’s that we collected during the day, and dreams are just a collateral effect of this process. Either way they bring meaning with them, but they are very volatile, so we need a way to keep track of them.
✅ Solution
Dreamer gives the user the power to do exactly so, permitting the user to keep a detailed diary about their dreams. From when it happened, to what events that went on, to the feelings that it evoked. Saving this information in a text-based manner, or with a recording of an audio. Information that can be enhance the with image and drawings directly made in the application. All of it categorized with a tag-based system for easy access.
Timeline
Market analysis
01
02
Requirements definition
Design
03
04
Development
Conclusions
05
⚙️ Process
⚙️ Process
01
Market analysis
Before beginning with the design process a preliminary step of market analysis was conducted. Looking in detailed into already present applications, like “Lucid” or “Dream” where the main competitors taken in consideration. With this process I defined what characteristics these products had, which were completely missing, and which one were implemented not in a perfect way. Like this a list of requirements for Dreamer was defined, taking also in consideration technical components like platform, code languages, costs, and timing.
*Android vs IOS distribution
🖼️ Background
02
Requirements definition
What was found in the previous step are the following requirements in collaboration with my supervisor:
☑️ Store dreams as text or audio
☑️ Fast accessibility of dream logs
☑️ A simpler user experience in relation to the already present application
☑️ Less functionalities but in a more in-depth way
☑️ More modern look, based on Google’s material U design
☑️ Login option
☑️ Cloud saves
03
Design
3.1
Wireframe
After the definition of the requirements I moved on to the realization of the wireframe, trying to stay truth to what we defined in the requirements. This step of the process was very useful to quickly iterate trough out different configurations, and disposition of the UI elements. Defining in the best way possible a user experience, that include all the requirements and features defined in the previous step.
*Initial wireframe of the application
3.2
Design system
After the wireframing, I proceed by creating a design system. Starting from the color palette a dark purple was chosen trying to embrace a dreamy atmosphere. To contrasts this dark color, yellow and orange were used to highlight relevant information like titles. In general, rounded shapes were chosen to better fit the Material U design system, but the same time keeping a little bit of distance from it to create a unique styling. For the typography, I choose two main fonts. One with more of a handwritten feel, to better sell the concept of a diary, and the other instead was a clean sans serif font to improve readability, used for all the main texts.
*Summary of the design system
3.3
High-fidelity prototype with Figma
Defined the design system it was only a matter of arrange the created elements in the positions and layouts defined in the wireframing process. This process and the previous ones were all done using Figma.
04
Development
This project was my main thesis for my bachelor's degree in Computer Science, so I had to also implement by myself the whole application. The chosen platform where to build it was Android, so the application was coded in Kotlin, and the backend infrastructure for the implementation of functionalities like login and cloud saves was Firebase.
*Capture of the working application
Coming soon
🏁 Conclusion
🏁 Conclusion
Finally after all this process that lasted approximately a year, the application was finished. I had to do it by myself. It was a great experience for me to put in practice what I had learned previously about UX & UI design and coding. This project in particular was what made me truly discover my passion about design, and what made me pursue the master’s degree in HCI.
💪 Lesson learned
💪 Lesson learned
🥇 Develop an application starting from zero
🥈 Iterate trough out different designs
🥉 Benchmark the market for already present solutions
Do you want to work with me?
