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 design, prototype and test a Minimum Viable Product, then 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.
When creating our brand, we kept coming back to our target user: stressed students needing a quick break.
With stressed students, we wanted our interfaces to be soothing, friendly, and accessible.
We kept coming back to these brand values when creating our designs. After several rounds of iteration, we found that muted pastel colours, roundness (bubbles, round type, round corners), and nature themes suited our interfaces best.
To help people find out more about HAVEN, we decided to have an informative landing webpage.
Here, I created a mock of our one-page landing page. The prototype was a scrollable JPG image, created for a specific iPad display outside our meditation room.
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.