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

HAVEN — Brand, Mobile UI, Graphic and Web Design

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

HAVEN —

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

HAVEN is the result of a 13-week R&D product design graduate project at the Centre for Digital Media. It’s an in-room, press-and-play guided meditation system to help busy, stressed workers recharge.

In a seven-person team, I was 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 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.

Brand

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.

Web Design

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.

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