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.
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.
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.
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.
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.
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.
To further explore our brand direction, I also created three distinct logo ideas which began by creating sketches using pencil and paper.
With the sketches, I digitized the top 3 concepts and came up with these final versions:
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.
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.
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.
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.
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.
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.
A first click test was also conducted to see where participants would click next after being given instructions. Results were satisfactory.
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.