top of page
Dearly logo.png

Project Overview

This is a summarized case study for a responsive web design for Dearly, a self-guided will and probate-making website that allows British Columbians access legal services at a fraction of the cost that a lawyer would normally charge.

 

Our client was looking to make the first-ever online probate application tool. He came to our team asking us to help him design Dearly’s complete probate portal and create a brand new identity. Dearly’s name comes from “dearly departed,” since it deals with the estate-affairs and last wishes of those loved ones who have passed away. 


 

Outcome

The UX designers redesigned the complete flow of the probate application that shortened the current process from several meetings with a lawyer to under one hour.

 

As UI designers, we created Dearly's new identity that resonated with their mission, which was to bring ease to the uncomfortable nature of the legal process while educating the users to complete the process on their own at a significantly lower cost.  

 

We humanized the complete process that achieves the right balance of welcoming invitation and dependability. 

Client

Justin Levine | Dearly

Project Length

3 Weeks

My Role

UI Designer, Illustrator

Team Members

UI: Ronald Suh, Shruti Dwivdi, Paola Goldade

UX: Lia Fadeeva, Halina Garycka

Software

Photoshop, Illustrator, Sketch, Invision

Design Process

Research

Domain Research

Competitive Analysis

Inspiration Gathering

Gut Test

Development

Mood Board

Style Tile

Typography

Color Palette

Design

Hi-Fi Skinning

Illustration

Logo

Iconography

User Testing

My Contribution

I was the lead illustrator during the initial stage to the final design. As a team, we conducted the visual test with our client, created mood boards, style tiles, tested our designs, and skinned the mid-fi wireframes.


UI Process

After our first client meeting, we conducted a gut test to see what our client's design preferences were. A gut test is a series of 20 slides of existing brands, apps, and websites that we go through with our clients to know their likes and dislikes.

The left side shows our client's preferred design direction. The bright colors, monochromatic palette, and pleasant shapes, appeared friendly and approachable.

The right side shows the least liked samples. He mentioned the sites looked old, generic, and untrustworthy. The stock images and cluttered layout made it less inviting.

1_uEpQovBaW_wSTVu0VRqnaQ.png

Style Tile & Mood Boards

After having a better understanding of our client’s and users’ needs, we proceeded to define our Why:

“To provide guidance in order for people to feel supported and confident during difficult times.”

Some key words for our visual language included: Trustworthy, Comforting, Friendly, Inclusive, Accessible, Gradual, Balanced, and Inviting.

Illustrations: Dearly’s goal is to let everyone feel welcomed, regardless of their ethnicity, gender, and education. Photos of real people could inadvertently exclude someone. It would go against Dearly’s message, which is to support and simplify the executor’s legal journey. We combined the styles that had flat colors and simple line work. These styles expressed the message we wanted to convey, which is comfort, maturity, and simplicity. 

Icons: The icons draw the users’ interest and facilitate the site’s navigation. Since our users are adults and seniors, we decided on simple icons that contained solid color. The splashes of colors add warmth to the overall feeling of the site, while being strong visual cues.

Typeface: The Montserrat typeface paired with the Hind typeface were chosen for its clean style and legibility.

Colors: We chose colors that had meaning and were relevant to Dearly’s values. We toned down the brightness of Direction A’s color palette to maintain a friendly look without being overly saturated. 

1_p4j2AtNpd6TQfK3qDIKtRQ.png
1_-YiF3tTopZksxa3PwcwaUw.png
1_a_2WvLRJw4MIyIw873iHNQ.png
1_zyB15X8g7wt66ORiW5J6qA.png

Logo Design

Our client was open to change the previous logo:

Screen Shot 2020-03-30 at 11.45.57 AM.pn

A part of our job was coming up with a new logo for Dearly. During testing, Montserrat had been a favorite among our users and our client since it was simple and easy to read. Although Montserrat is often used for headlines and body copy, we decided to incorporate it for our logo design. We sketched a few logos and then moved onto designing them in Illustrator.

1_bkyCexTfmwCk81WPVZjz7g.png
1_XDrPzC-sTptF82IRJlbskA.png

Our top 9 logos ranged from very simple designs to more detailed ones. Based on client feedback and further testing, we narrowed down the options to two designs:

1_9SdOO7iQUrnD7fUf0KGIJw.png

The one on the left was called “the blob logo” and the one on the right was “the dandelion logo.” Our general findings indicated that people found the blob logo to be soothing, supportive, and had a welcoming color. The dandelion logo was perceived as inviting, comforting, intriguing, and felt as if it carried an important story behind it. People advised the dandelion logo could carry across all industries and they could easily perceive a “beautiful metaphor about letting someone go.” This logo was a clear favorite among users.

The final design was created based on the feedback we received:

1_UwSYsQ1nFz2ue1Uzex37Sg.png
Screen Shot 2020-03-30 at 11.47.14 AM.pn

Icons & Illustrations

The icons and illustrations below are the result of our previous findings.  The open lines, white spaces, and pastel colors set an approachable and friendly atmosphere while telling a story that is relatable to the clients. The outlined style without skin tone was well received as it was clean, mature, and inclusive of all ethnicities. Being ethnically ambiguous made them appealing during testing.

1_j0XCfCoSmsAFDddYWedW8g.png
1_dEaqWlsxMa-vUg7P1OuHLg.png

Design Outcome

Lastly, here are some key hi-fi wireframes for desktop and mobile versions! The colors are primarily white and pale green with accent colors for buttons and icons. It's designed to calm the users during a time of grief, with open spaces for simple navigation. 

Some key pages are the home screen, on-boarding, progress page, and the dashboard. The pages are designed to be accessed at any time for the user to resume their progress. 

Dearly outcome1.jpg
Dearly outcome2.jpg
Dearly outcome3.jpg
Dearly style guide1.png
Dearly style guide2.png

Conclusion

The process of humanizing government forms to make it user-friendly, approachable, and creating a new identity was a fulfilling and challenging process. 

I feel honored to have worked on an innovative idea that transforms the interaction of an important legal process. Our client was ecstatic about our designs as it resonated with his mission to bring simplicity and comfort during a time of grief. 

My team and I are glad to have created a believable prototype with the potential to alleviate the legal process and enhance mental well-being of future clients with the assistance of Dearly. We are confident that the new website is comforting, easy to use, and feels like a legitimate service. 

Dearly is currently in development with our new designs and I am excited to see it get further developed this year! 

Thank you for viewing my project. To view the full case study and Dearly's website, please click below:

bottom of page