Retreet

UX & UI Design | Visual Design | Rapid Prototyping | Research

Tools: XD | InVision | Squarespace

2019-2020

The ever-growing fast-paced day to day activity of urban living contributes to higher rates of stress. Retreet is a platform dedicated to Toronto users that offers city like trails as a way to connect with nature and manage everyday stress. Designed using an itrerative approach, this platform offers multiple city trails that run from Southern Etobicoke to East York. The trails consist of amenities like restaurants and shops and are made up of parks, gardens, and waterfront locations. This concept is heavily inspired by Japanese Tree Therapy.

 

Defining the Problem

I wanted to develop something meaningful that is targeted towards Torontonians. I started by looking into the main causes of stress for individuals living in urban areas.

Common trends I found that contribute to stress are:

  • An unhealthy work-life balance

  • Being forced to play into hustle culture

  • Overstimulation from living in a busy and congested environment

Research

Through proven research, it is known that engaging in nature experiences can help people alleviate stress, but with little nature in urban areas, people experiencing the urban lifestyle are also less likely to engage with nature on a frequent basis. However, there are some habits that can be created to still obtain an individual connection with nature.

Japanese Tree Therapy

Japanese Tree Therapy (Shinrin-Yoku), also known as forest bathing, is a traditional Japanese practice of immersing oneself in nature in order to reap the healing benefits that come from being in nature and also as a means of preventative health care (Hanson et. al). The theoretical framework that drives my work is based on the impacts that hustle culture causes in relation to stress and how the practice and benefits of Japanese Tree therapy can be used as a way to treat stress. Focusing my research in these areas explores the problem of major catalysts for stress while Japanese Tree therapy is something that can benefit this user population and also act as a means of self-care.

 

Result

From this I focused the user interaction around connecting Toronto users to nature experiences. 

The experiences were broken down into:

  • city like trails made up of parks, gardens, waterfront locations and additional amenities like shops and restaurants

  • wooded parks for forest bathing

Mockups from first iteration.

Ideation

I began sketching my concept. I originally wanted to develop a Web app but as this is a solo project and I have limited coding skills I decided it would be best to develop the final project in a responsive web format. I designed the concept in mobile layout since this is something that I see users using on the go.

 

Trail Walk-though Testing

I created three city trails that run from Southern Etobicoke to East York. The trails are Cabbagetown Neighbourhood, The Humber Bay Park and Trinity Bellwoods, and Trillium Park. I researched each area, mapped the trail, then tested the trail along with a second person, in order to gain feedback. For each trail, I brought a new individual along in order to keep the feedback new and unbiased.

Cabbagetown Neighbourhood

The Humber Bay Park

Trinity Bellwoods & Trillium Park

Journey Mapping

Based on my findings and feedback from the first trail walkthrough, I made some adjustments to my wireframes along with the user journey/navigation for the UI design.

 

Wireframes

Using XD I created multiple iterations of wireframes. These ones below were the final ones that I used for prototyping and testing the user experience.

Brand Identity

I created a simple style guide/brand identity. This was helpful in preparation for developing my mockups.

 

First Iteration Mockups - November 2019

I continued to refine and finalize my mockups using XD. These mockups were then prototyped again using InVision.

Mockups from first iteration.

 
 

Prototype

 

 Defining the User

With a refined concept, I focused on narrowing down the user population. By creating user personas, I was able to define different user goals and barriers. By identifying these needs, I was able to better understand how various users would interact with Retreet. 

 

Storyboarding the User Journey

I created two storyboards on the user journey based on the two above personas. The storyboards give a better understanding of the individual user experience. The user is able to either follow the trail as a step-by-step guide or they are free to explore the areas on their own terms.

 Second Iteration - February 2020

Final Iteration - April 2020

Final Prototype Demo 

Try it for yourself: https://retreettoronto.squarespace.com/

Mobile Layout Walkthrough

Below is a video of a user testing the platform in mobile layout. I had the user go through the site as if they were exploring it on their own. I screen recorded the walkthrough and narrated how the website was structured and what the user was seeing. I thought it was best to show this final walkthrough in mobile layout because although this site it responsive, it is intended to be used more so on the go. 

 
 

Next Steps

This prototype is the concluding piece for my undergraduate studies, however design is never really finished and there is always room for improvement. Moving forward I would like to continue to refine the user experience of this work by editing the maps in the trails so that the user can select the locations that they would like to visit to generate their own custom map. I would also like to revisit the city trails myself to capture consistent images that would be used to refine the visual quality of the current city trail webpages. This was something that was originally intended but under the circumstances of Covid-19, certain limitations prevented this from happening for my final undergraduate submission.