Creating a more enjoyable and simple way of dealing with stress and anxiety.
Relax Header Image

A New Way To Relax

Team: 1 UX Designer / 1 UI Designer
Role: UI Designer

Relax is a responsive website designed to efficiently suggest ways to relieve stress and anxiety through simple gamification using a deck of activity cards.

But There's Already Enough Relaxation Platforms?

With exploratory research, we discovered that there was already a large selection of relaxation based apps and websites, but there was still room for a more simple and gamified destination for stress management, relaxation, and wellness techniques. Most of these existing platforms were goal-based and required a paid subscription for the best features.

So Let's Compare and Contrast

I proceeded by conducting a visual competitive analysis to figure out how our competitors were able to reach and retain users.

With these findings I concluded that even though our team was proceeding with a gamified approach, I needed to keep the design of our platform organized.

Because the direct competitors were majorly using photographs, our destination can be more unique by using illustrations.

A responsive site would be the best option for our platform so that we would reach a wider audience; the competitors mainly have gone app-first.

Visual Competitive Analysis
Competitors and Takeaways

Problem Statement

Around this time the UX team developed a problem statement based off their research:

Cynthia [user persona] needs a platform to help relax in various stressful situations so that she is more productive throughout the day.

The problem statement was able to guide me with my design decisions, serving as my north star. It helped put into perspective who I was designing for and why I was making those specific choices.

User Persona

Setting Up Who We Are

We started to identify our brand and identity. Relax was recently established and we needed to set the visual presentation of what the brand stood for. Moodboards are an excellent visual tool to convey several design inspirations. I created 3 unique moodboards with specific concepts in mind. The designs included imagery, color palettes, typography, and layouts.

The first moodboard concept represents nature; showcasing blue, green, and yellow colors, card layouts, handwritten fonts, and gradients.

The second moodboard represents negative space and breathability; showcasing simple iconography, vibrant colors, and high contrast text between its headers and body text.

The last moodboard represents the idea of being at home and being comfortable; using warmer colors, picture frames for content holders, and “things that you would find in one’s home” imagery.

Moodboard Designs
Moodboard Designs

Logo Concepts
Helping Define The Brand

To further explore our brand direction, I also created three distinct logo ideas which began by creating  sketches using pencil and paper.

Logo Concept Sketches
Logo Concept Sketches

With the sketches, I digitized the top 3 concepts and came up with these final versions:

  • The first logo represents mental progression using simple shapes and a sans serif font. It uses blue for its calming characteristic. There is a secondary and contrasting color which appears to phase into the calming state/color.
  • The second logo embodies a “peeling” away of a previous mental state using a hand-written like font. This logo uses similar colors to Logo 1.
  • The third showcases something more “airy” and resembling breathability, space, and movement. The word "relax" is also written out underneath the drawn "R" further emphasizing space and breathability.

Through careful consideration, we went with the first logo representing mental progression (Logo 1) for our final choice.

Its legibility was effortless and it had a story that was easily captured from its elements.

The blue color represents a cool and calm state while there is this frantic and contrasting circle that is catching up to the rest of the blue circles.

Final Logo Designs
Final Logo Designs

Style Tiles
Let’s Refine The Options

Before creating mock-ups, I had to establish a common visual language between designers and stakeholders that further investigates each design direction. Drawing from the previous moodboards, I created three style tiles which contained fonts, colors, and UI elements unique to each design.

Style tiles include even more detail for each design concept illustrated with the moodboards, thus reaching a more consistent design direction for the final product.

Style Tile 1 is derived from the nature moodboard. It uses calming blue-green colors. The font chosen is Europa for its sleek and modern appearance. It uses crisp imagery and outlined iconography.

Style Tile 2 explores spatiality and vibrant colors. Helvetica is used for the primary header for its timeless appearance as a sans serif font. Roboto is used for the subheader and body text for its universally clean presentation. Rather than photographs, this design direction makes use of illustrations.

Style Tile 3 showcases the warmth and comfort of one's own home. The color range leans more towards peach, rustic orange, and golden bronze. The header font is Pacifico for a more casual and playful option. This is balanced by the standard San Francisco font for the subheader and body text.

Style Tiles
Style Tile Designs

Using a More Defined Design Direction

The UX team had conducted usability tests on their Mid-Fidelity Wireframes and updates were made before handing them to me so that I can create Mockups.

It was important to review these designs with the UX team so that we had an equal understanding of the expectations and delivery of the final designs.

The site is heavily reliant on card elements and layout for organizational purposes.

The main page also involves a deck of cards that the user can easily get to, so that they can browse and then select an activity to assist them with relaxing.

Cards Pages Mockups
Mobile Cards Page


Onboarding is very important for the Relax platform because it is through this process that the system caters specifically to the users needs. This results in the direct customization process for the user by having them select their preferences out of given options.

Onboarding Page
Mobile Onboarding Page

Library and Journal

There is a page for being able to browse the site’s activity library, and another page for being able to record different journaling options.

Library and Journal Pages
Mobile Library and Journal Pages

Desktop Pages

Desktop Cards Page
Desktop Cards Page
Other Desktop Pages
Other Desktop Pages

Visual Design Tests
How Will Users React?

It was important to perform visual design tests to assure that we were on the right track with our content and hierarchy.

Were users reacting to call-to-action buttons appropriately? What type of information did users retain after viewing a page for a certain period of time?

A 5-second test was conducted using the Usability Hub platform to see what users maintained after viewing the main library page of the mock-up for 5 seconds. Results were satisfactory.

5 Second Test Results
Usability Hub 5-Second Test Results

A first click test was also conducted to see where participants would click next after being given instructions. Results were satisfactory.

First Click Test Results
Usability Hub First Click Test Results

Mobile Prototype

Prototype can be viewed in full screen.

Time to Wind Down

Accessibility is very important in user experience. Through this project I made sure to improve on my initial designs so that I had enough contrast for legibility and accessibility.

I’ve learned how vital visual testing is with this project in order to produce user-based results. If possible try to conduct more and do them earlier in the process.

Special thanks to Riddhi Khadke for working with me on this product.