Fairy Dreamer

• 

  cover design

• 

  ui for dreams, fairy hatching, and shop

Inspiration

With our new stay-at-home lifestyle, it has become increasingly difficult to keep to a good sleep schedule. Good quality sleep is crucial for good physical health, so we wanted to create a product to fix this issue. Inspirations were pulled from the Forest app, Neko Atsume, Pop Mart, and Shugo Chara.

What it does

Fairy Dreamer is a mobile app that tracks sleep to build better sleep habits, while you collect fairies and decorate your realm in the process. Once you start a dream(sleep) session, leaving the app cancels it and you won't be able to hatch your fairy for the night. Thus, Fairy Dreamer creates incentive for dreamers to limit their use of phones before bed, thereby reducing exposure to blue light and improving sleep quality!

How we built it

All icons and illustrations were drawn by us. The interactive prototype was built using Figma. Since we wanted to focus on polishing the ideation and a good prototype, we didn't end up having enough time to code the app.

Challenges we ran into

Due to the amount of different layers we had for each frame, we ran into a few issues with components not showing up in the prototype. We didn't do the best job of planning out the frame layouts, and the disorganization caused us to spend more time fixing missing frames.

Accomplishments that we're proud of

Everything! We're super proud of how the finished product turned out and how all the small interactions tie in together. This is also Kathy's first time using Figma and she's really proud of how much she learned in such a short time.

What we learned

The most valuable thing we learned was the process of formulating a problem and coming up with ideas to solve it. No matter what project we create, this knowledge will come in handy. We also became a lot more familiar with Figma and how to create interactive prototypes. In addition, through creating this app, we also became more aware of our own sleeping habits and how we can improve them.

What's next for Fairy Dreamer

Next, we would like to code Fairy Dreamer and transform our prototype into an actual app!

Built With

• figma