illustration | art | design
1-landing@2x_iphone8silver_portrait.png

HAVEN — Brand, Mobile UI, Web & Graphic Design

Product Design, Mobile UI, Graphic Design, Web Design, Brand Identity

HAVEN —

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.

In a cross-functional team of seven, I was both the designer and developer: in charge of coding its connection to the Philips Hue API with Javascript, as well as creating its brand identity, graphic and web design, and mobile UI mockups.

 

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.

Brand

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.

Web Design

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.

Scroll through of HAVEN landing page mockup on the iPad.

Mobile UI

A clickable prototype of the HAVEN booking app on the iPhone.

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.

Our landing page for our mobile app.

Our landing page for our mobile app.

The menu bar popup.

The menu bar popup.

Users are prompted to pick a time for their reservation.

Users are prompted to pick a time for their reservation.

Users can then choose the meditation mode they want.

Users can then choose the meditation mode they want.

Confirmation page; users also see the reservation code to use the meditation room.

Confirmation page; users also see the reservation code to use the meditation room.

A congratulatory page.

A congratulatory page.

Promotional Materials

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.

 
Our initial banner.

Our initial banner.

 
The copy was constantly changing, so I had to design posters flexible for these changes.

The copy was constantly changing, so I had to design posters flexible for these changes.

This was our final copy.

This was our final copy.

recharge-mockup.jpg

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.

I created different posters for our 11/28 launch date — I used nature elements and went with a minimal feel. Here, I used bold text and blended the textures of the text with the background image of water. We ended up not using this poster, as the turbulent waves did not reflect the calming nature of HAVEN.

I created different posters for our 11/28 launch date — I used nature elements and went with a minimal feel. Here, I used bold text and blended the textures of the text with the background image of water. We ended up not using this poster, as the turbulent waves did not reflect the calming nature of HAVEN.

Again, this poster was deemed to be too ominous. We wanted something calmer, emulating stillness.

Again, this poster was deemed to be too ominous. We wanted something calmer, emulating stillness.

This was a little better; but the cloudiness did not match the copy of a still mind.

This was a little better; but the cloudiness did not match the copy of a still mind.

We ended up going as minimal as we could — choosing a gradient that emulated a sunset sky, with just the anticipation of a specific date. Since our target audience consisted of students who already knew our product and had a good knowledge of what was happening, this poster was efficient and effective.

We ended up going as minimal as we could — choosing a gradient that emulated a sunset sky, with just the anticipation of a specific date. Since our target audience consisted of students who already knew our product and had a good knowledge of what was happening, this poster was efficient and effective.

We also created posters that matched the style of our landing page mockup and phone booking app prototype.

We also created posters that matched the style of our landing page mockup and phone booking app prototype.

haven-event-mockup.jpg
haven-nov28-purple.jpg

We circulated these promotional materials digitally — on social media, emails, TV banners — as well as printed.

Screen Ad2.JPG
Poster Hallway.JPG
FB event.png