Trance

UI/UX designs for a sleep management app built in Figma.

The Figma file can be found here!

Tools used: Figma, Adobe Illustrator, Procreate

Mobile Screens

For my app, I considered having a dark mode UI and background considering the sleep-oriented theme. I wanted most visual components to be minimal to maintain the aesthetic and convey a relaxing, peaceful mood. I decided to predominantly use purple hues and then supplementary colors to highlight certain information.

Here I made three mobile screens. The first serves the purpose of welcoming the user, the second is the main dashboard, and the third lists the user’s personal sleep goals. The welcome page introduces the app and provides the options to log in or sign up. The dashboard demonstrates user favorites and sleep patterns at a glance, containing hours slept and a diagram covering data from the past week. The goals screen is home to sleep goals that the user sets for themselves. When a goal is marked as completed, the user is greeted with a positive, motivational message.

I also worked on a promotional poster for the app using Adobe Illustrator. I drew all the visual components in Procreate.

Drafts

Initial mood board. I had the dark mode UI concept and I considered adding metrics and vector art.

Primary sketches and ideas. I was experimenting with different app icons, components, and UI designs.