Sonhar.io

The growing awareness of sleep's impact on well-being has left many people searching for ways to optimize it. However, most individuals struggle to connect their specific daily habits—such as caffeine intake or evening screen time—to the quality of their rest and their productivity the following day. While many apps can track sleep, they often lack predictive insights or personalized, actionable advice. The challenge was to design and build an intelligent mobile application that not only logs sleep but uses AI to analyze lifestyle inputs, predict next-day productivity, and offer personalized suggestions to help users proactively improve their sleep hygiene. This project was undertaken to fulfill the academic challenge of integrating a functional AI model into a user-centric mobile app.

My Role

In this team project, I took on the dual responsibilities of UI/UX Designer and Frontend Developer. I was in charge of conceptualizing and designing the entire user journey, from initial wireframes to the final polished visual interface. Following the design phase, I translated these designs into a functional, interactive frontend. My role also involved collaborating closely with the team to assist with the integration of the user interface with the backend services and the core AI model.

The Process & Solution

Design

The design philosophy was centered on creating a calm, minimal, and intuitive experience. Adopting a dark theme inspired by Google's Material Design system, the goal was to make the app feel serene and comfortable for nighttime use.

• Information Architecture:
  The main screen was structured as a simple dashboard. A personalized greeting is followed by a card-based layout, presenting the most critical information at a glance for immediate access.
• Visual Design:
  The color palette was deliberately chosen to evoke the comfort of a night sky. Deep bluish-purples and blacks were paired with high-contrast white text to ensure readability while creating a visually relaxing environment conducive to thoughts of sleep.
• UI Framework:
  Leveraging principles from Google's Material Design provided a robust foundation for creating consistent, predictable, and user-friendly components throughout the application.

Development

The frontend was brought to life using React Native and Expo, which allowed for rapid development for both iOS and Android. A key technical strategy was the adoption of a component-based architecture. By building a library of reusable components (such as cards, modals, and inputs), we ensured visual and functional consistency across the entire application. This approach not only streamlined development but also made the app easier to maintain and scale. The primary focus was on translating the calm aesthetic of the Figma designs into a smooth, fluid, and responsive user experience.

Technologies Used

Responsibilities

• Translating high-fidelity Figma designs into pixel-perfect UI screens and components.
• Developing the application's core interactive elements, including input modals for sleep data and the dream journal.
• Collaborating with the team to ensure the frontend was correctly integrated with the AI model's data outputs.

The Outcome

The application was successfully developed and delivered, fulfilling all the requirements of the university discipline and earning the maximum possible grade. The project served as a successful proof-of-concept, effectively demonstrating the integration of an AI model into a polished, user-centric mobile application. It directly addressed the initial challenge by providing users with a functional tool to receive predictive, data-driven feedback on their sleep habits, validating the concept of an intelligent sleep and productivity advisor.