Solace

(a) Overview

Outcome:
Solace offers a user-friendly platform where individuals can reflect, track, and enhance their well-being in a simple, enjoyable way, making the practice of gratitude an effortless part of daily life.

Problem:
A majority of young people are overwhelmed by stress, in life and relationships, with no anchor or guide to help them manage it.

Project:
Role: UI/UX Designer
Timeline: 16 weeks
Scope: Research, Testing, Prototyping
Advised by Chrissy Welsh‍

(2)

(1)

(1)
These are examples of types of gratitude entries Solace looks to cultivate in visitors.

(2)
This is the "happiness jar" the indulgent portion of the site where people can appreciate their former entries.

(3)
A picture of the personal hub, a place to review your entries and connect it to growth.

(2)

(3)

Solace is a prototype of a website designed to create more fulfilling lives by fostering gratitude and reducing stress. It achieves this by seamlessly integrating the transformative benefits of gratitude with an intuitive, self-guided journaling experience and personalized reading recommendations.

(b) Research

(c) Choosing Gratitude

(d) Product development

(e) User flows and Wireframes

(f) Branding

(1)

The now defined gratitude application deserved to be positioned as bright, hopeful, and optimistic as the core functions are.

(1)
The final brand values and associated adjectives used to form the visual base.

(2)
A graph depicting the brainstormed list of values being sorted into on-brand and off-brand, unique and common.

(3)
A value rating diagram depicting the which aspects of the final brand values will be expressed in the final product.

(2)

(3)

So much comes from, and culminates into a name. Our first three options give a completely different personality for the same tool.

(4)

(4)
The final contenders for the name of the application. Solace won in a diverse focus group for my description of it as evoking a place, a state that can be conjured by anyone at any time.

(5)
With the most somber sounding name chosen, the logo had to help provoke a new association with the word Solace. Using child-like script with no variation in the line weight makes it feel optimistic and reliable.

(6)
The final logo for Solace.
I left the "S" unconnected from script to represent a starting place and because it felt very IOS.

(5)

(6)

With a playful logo, philosophical name, the rest of the branding needs to support our remaining goals: feeling better and being there when you need it.

(7)

(8)

(7)
With the focus on optimism and reflection, I wanted the color scheme and over all feel to be reminiscent of light, specifically a sunrise.

(8)
The typography was chosen to be a respectable voice, a teaching voice, with softness and support.
‍
The combination of a sans-serif with a tall x-height and palpable counters feels knowable and respectable, while the serif font is a comparative moment of pause, reminiscent of books, in this case used to express the "review" brand value.

(9)
Gradients are used as the main signifying element to evoke a feeling of change and optimism.

(10)
The final key element was a graphical system of arrows and unique diagrams, familiar to all who saw the 2020 era of instagram infographics, to help directly bring the message home.

(9, 10)

With a brand fleshed out, it is time to combine it with wireframes for a high-fidelity version.

(g) The Prototype

(1)

(1)
A speedy run through of the main flow, logging a gratitude entry.

This section will go through the development of each feature, including feedback from usability testing. Without futher ado:

(2)

Reflecting on gratitude.

The first mid-fi screen uses dummy data and has an option to view the entries as a list in a written button at the bottom of the screen.

The second screen utilizes variables to allow test participants to actually type answers in figma (not so easy to prototype- you don't want to see how many connections were used to make the keyboard).

The list icon was unsuccessful in testing, and the add an entry plus icon looks like add a tag.

The final version reveals the entries by scrolling up, the entries are the small blue bar at the bottom. The tags are fixed in their position to be used to filter on either screen.

(3)

Writing about gratitude.

(3)
The initial wireframe is based on studies that suggest writing at least three things you are grateful for is an effective way to feel the benefits of it. This is not necessarily what users wanted.

This was improved upon by creating a flow of one entry, that was easily done multiple times.

By the final version, the tags are correctly grouped using gestalt principals and are more frequently understood.

There is an option for short form or long form writing on the same screen.

(2)

Mood tracking.

First of all, mood tracking is included in this decisively gratitude tracking app because it may help develop individual proof gratitude helps.
The first sliders were too distracting and the field labels were intimidatingly ambiguous.
‍

The second screen improves upon the flow based on feedback from users that they may not want to do three entries. This screen allows for

By the final version, the tags are correctly grouped using gestalt principals and are more frequently understood.

There is an option for short form or long form writing on the same screen.

(h) Impact

I was thrilled to hear participants reach back to me months after using it telling me of unique ways they would like to use the app.
This suggests that it is not only memorable, but an attractive and powerful tool able to help grow gratitude and fit into people's lives.

Problem:
62% of young women in the US reporting feeling completely overwhelmed by stress most days ¹. This is an expression of

Role: UI/UX Designer
Timeline: 16 weeks
Scope: Research, Testing, Prototyping
Advised by Chrissy Welsh‍

(2)

(1)

People I tested the app with have since reached out and said they wished they had it to document their sobriety journey, memories of a passed loved one, and to improve their writing skills.

(1)
This is the main flow of the application, to improve it I would include

(2)
The gif shows the main flow of the application; logging mood and gratitude.

(3)
This is a depiction of how complete the prototype is

(2)

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

(3)

(7)

Solace as a prototype brought joy and expressed interest in returning to it. It combines insights from fundamental issues regarding enjoying life and relationships with utility in the practice of reflection.

Get in Touch

Services
Website Design
Research
Testing
Information Architecture
User Flows
Visual Identity
Development
Environmental Graphics
Website Maintenance
Hosting

Colophon

This website is self-designed and frequently redeveloped. Using simple HTML, CSS, JS, with a touch of React, with animations prototyped in Webflow, the sentimental vestigial structures outnumber the functional parts of the code.
‍
The fonts are Riccione Serial by and Switzer by the ITF. The website changes frequently based on my mood.
‍
Before the domain was mine it was a family tree website .

Solace

A gratitude journaling app for reflection.

(a) Overview

(b) Research

(c) Choosing Gratitude

(d) Product development

(e) User flows and Wireframes

(f) Branding

(g) The Prototype

(h) Impact

Get in Touch

Contact

Services

Case Study

Archive

Colophon

Solace

A gratitude journaling app for reflection.

(a) Overview

(b) Research

(c) Choosing Gratitude

(d) Product development

(e) User flows and Wireframes

(f) Branding

(g) The Prototype

(h) Impact

Antonia's Cleaning Service

Get in Touch

Contact

Services

Case Study

Archive

Colophon