Projects           ‪           About









Role

Timeline

Tools


Designer, Developer
Sept 2023 - Dec 2023
Figma, SwiftUI


Project Overview:

For my sleep app project, I designed and built a SwiftUI app that includes sleep and dream logging, calming music, and useful tips for better sleep. Using Figma for prototyping and SwiftUI for development, I worked through each stage to create a functional and user-friendly experience. Continuous testing and feedback helped me refine the app, resulting in a polished final product.


Dream Well


I created Dream Well as my final project to address my own challenges with developing healthy sleep patterns. My schedule was inconsistent and I wanted to build something interactive to help manage that. I’ve also always had random, vivid dreams that I try to write them in my notes app whenever I can remember them, so I liked the idea of including a dedicated space in the app for logging dreams so users can keep them organized. The inspiration came from the classic idea of counting sheep to fall asleep, and even the old nursery rhyme about cows jumping over the moon. I thought combining an interactive counter with other features could offer a fun yet effective way to improve sleep habits.





Ideation



During the ideation phase of my sleep app, I began by creating a user flow diagram and a mind map to organize my ideas and determine the core features. These tools helped me visualize the user’s journey and identify key pages I wanted to include, such as relaxing sounds, a counting sheep feature, a dream log for tracking dreams, and personalized sleep tips. This structured approach allowed me to focus on designing an app that not only promotes better sleep habits but also offers an engaging, calming experience. 



Mind Map    &User Flow Diagram







Prototyping



Style Guide

Before diving into coding, I wanted to establish a clear visual direction for the app. To do this, I created a style guide that would guide the design and layout. This helped me organize key elements like fonts, font sizing, and the color palette. I chose varying shades of blue and yellow to evoke a sense of calmness and mimic the transition from night to day. With the style guide in place, I moved on to prototyping in Figma, ensuring that the design aligned with the relaxing, user-friendly experience I envisioned for the app.


Figma Designs



After finalizing the style guide, I began designing the app in Figma to visually map out each screen and ensure a cohesive layout. I focused on creating a clean, calming interface that aligned with the app’s goal of improving sleep. Once the designs were in place, I developed a flow to illustrate how the pages would navigate based on user interactions. The flowchart on Figma helped me visualize user movement through the app and laid the groundwork for the development phase within SwiftUI.






Results



Development on SwiftUI

Since this was my first time using SwiftUI, I encountered some challenges in coding the app to match my Figma designs precisely. For instance, I had issues with the background colors on several pages, which didn’t render as expected. Additionally, the sleep log page has multiple back buttons appearing, leading to confusion in navigation. Despite these hurdles, I’m grateful for the opportunity to learn SwiftUI, as it has expanded my programming skills. I recognize that the app could benefit from further debugging and refinements. Overall, I enjoyed experimenting with the various functions and constraints within SwiftUI, and I look forward to improving my understanding of the framework as I continue to work on the app.






Next Steps


Debugging Floating Elements:
  • I want to address the issue with the "Count Sheep" page, which has a tendency to float around. While I appreciate the playful effect, it needs to be more stable for a better user experience.

Refining Formatting and Color:
  • I aim to get the app’s formatting and color scheme closer to my original Figma design. I’m pleased with how the first iteration turned out, especially for my first time using Swift, and I want to build on that foundation to improve the overall aesthetic and user experience.
Fixing Multiples:
  • I plan to resolve the problem of multiple back buttons appearing, which can confuse users. Streamlining the navigation will improve usability and clarity.

Add Personalization Options:
  • I want to add more personalization features, such as tailored sleep tips based on users' specific sleep issues, dream pattern recognition, and the ability to connect with other users. This could include sharing funny dreams, fostering a sense of community and engagement within the app.