Visual Look & Feel
I wanted my app to visually portray a narrative which reflected the experience of 'burnt out' users.
The use of a dark theme represents the absence of excitement and light in the user's life. When users 'light the candle,' colour fills the screen to represent the introduction of something new and refreshing. I also add a noise filter to the background of each screen to give it texture and sense of character.
Spacing is determined through an 8-pixel baseline grid system, and hierarchy is established through varied font weights and half-sizes. Many components utilize a diamond shape to create an elegant vibe, as well corners are 8pt rounded to give a professional feel to the app, while not being too serious.
The illustrations are being drawn on Procreate on an iPad and will be imported later as I'm still polishing them up, these illustrations are inspired by the streamlined, noisy texture illustrations done by Gal Shir.
About the Prototype
Still a work in progress as I am currently still implementing feedback from critique. I've found another way to introduce engagement within the app during an activity period.
Initially, the app didn't include user engagement during the time of the activity — the rationale for this was that I thought user's shouldn't be distracted by their phone while engaging in the activity itself. However, this also made it feel like the app was missing something. I felt like an event timer or progress bar would have been a cop out solution — an event timer felt like an alternative to native alarm apps and unwanted pressure on the user, while the progress bar meant some activities would be harder to track and visually indicate progression to users.
As an alternative solution, users are prompted during an activity to share 'community' photos of them participating. I felt like this could add to the social element, and be a way for users to 'check in.' What about users who are tired and feel like doing in-house activities? I felt that the timer component would be more appropriate here since these activities are less involved and require less effort.
Pages from the Design System can be accessed through the hamburger menu in Figma.