Product Design, Mobile UI, Brand Identity, Graphic Design, Web Design
HAVEN is an in-room, press-and-play guided meditation system to help busy, stressed workers recharge.
We created it within 13 weeks of agile prototyping at the Centre for Digital Media.
Agile Prototyping & Iterating
To design and test our product, we had one-week sprints. We followed a scrum methodology — every sprint, we would prototype and test our Minimum Viable Product, and constantly iterate on the design based on user test feedback.
Throughout this, we also additionally created user journey frameworks, prepared weekly presentation decks, presented to cohort members and industry, iterated on our brand identity, designed marketing materials, and developed the actual implementation and functionality of the app. To read about our process in more detail, check out our blog.
We decided that as a team, we wanted our meditation app to be accessible, inclusive, and international. At the time, we were targeting stressed, corporate workers, but we eventually transitioned into stressed students.
These were the brand values that we kept coming back to, when we were creating our designs.
We also created a website landing page, to help people find out more about HAVEN.
Here, I created a mock of our one-page landing page. This was a prototype, so it was a scrollable JPG image created for an iPad display for people to scroll, outside our meditation room. The purpose of the landing page was to educate and heighten awareness around HAVEN, so the content was mainly informative.
We wanted our landing page to incorporate the same brand identity as our mobile app, so I included the faded circles and bubbles to not only tie in the coloured lights of the HAVEN experience, and also emulate a soft, fun and accessible atmosphere to draw people in.
To engage our users before and after the meditation experience, we created a mobile app for users, primarily to act as a booking system to book the physical meditation room.
In collaboration with our primary UX designer, I created our mobile UI mockups. I took his bare-bone no-styling wireframes, spiced it up with styles and spacing, and incorporated our brand elements.
The end result is a friendly, intuitive booking system. The design elements do not distract, and instead, draw the eye to where the user is supposed to click, creating a seamless experience.
We used Sketch and Adobe XD to create this mobile prototype. Here are a few snapshots of some screens.
Throughout the thirteen weeks, I was constantly creating promotional materials for HAVEN, whether for banners, general marketing, or campaigning for a specific launch date.
As our brand values intentionality, inclusivity and simplicity, I incorporated sky and nature in our visuals: colour gradients of still skies, as well as muted colours and minimal copy for effective messaging.
One of our final releases was on November 28, so we created an awareness campaign around our launch. This included different posters for print, social media, TV banners.
We circulated these promotional materials digitally — on social media, emails, TV banners — as well as printed.