Problem Overview

A Colorado attorney who specializes in estate planning had a methodical process for walking customers through the choices in setting up wills, trusts, and testamentary trusts. She knew with the proper instructions, any person could go through this process by filling out a form from home, which would mean more people could have their assets protected by a will or trust for much less cost than visiting an attorney’s office. Any person can write out a will on a scrap of paper, but with proper formatting and guidance, a will is less likely to be argued or misinterpreted. the iWillandTrust platform gives users the ability to create a will or trust with the instructions and guidance needed to make the right choices for their needs. The public website helps to introduce the tool and walk users through the process of signing up to use the tool.

The iWillandTrust.com landing page

Evoking Welcomeness

The iWillandTrust.com landing page had to quickly grab users and let them know that creating a will or trust didn’t have to be difficult. I organized the site into three areas, provided a clear call-to-action, and addressed their top concerns immediately.

Product Statement

There are many existing websites and tools that help to give legal guidance for creating a will or a trust, but iWillandTrust is the first platform to help customers create a customized will or trust to meet their needs that is also reviewed by an attorney. The website informs the user of the benefits of creating a will or trust, and gives an overview of how the platform works. Once the user signs up, they are guided through a step-by-step process of creating a will or trust with helpful videos along the way. Within a few hours, a user can submit their will or trust to a local attorney to review the document. This way, customers can create an attorney-reviewed will or trust from their home, and without all the expensive legal fees.

An infographic displaying the iWillandTrust.com price point compared to the average cost of a will or trust.

Custom Infographic

An infographic highlighted the iWillandTrust.com price point compared to the average cost of a will or trust.

My Role

Attorney Shelley Thompson sought out the software consultancy where I worked for consultation in User Experience. I worked with her and her two developers to skin the user interface of their backend system, as well as organize the content for the public website into a logical information architecture, and then honed the content for an optimal experience for the user. My roles included:

  • Content Strategy

  • Information Architecture

  • Writing & Editing Copy

  • Interaction Design (wireframing, producing high-fidelity mockups)

  • Visual Design (creating image assets, finding stock photography, typography)

  • Annotating Designs with Technical Specifications

  • Quality Assurance Testing

  • Heuristic UX Evaluation (for version 2)

  • Presenting to Stakeholders

Website pages explaining the benefits of a will or trust, and how iWillandTrust is different than competitors.

Simple Effective Web Design

Using a limited design system, I built out a site that clearly communicated the intent of the client, and directed users to the important information quickly. I wrote and revised content to clearly explain the benefits of a will or trust, and how iWillandTrust is different than competitors.

Process

My first task was to work closely with the primary client stakeholder to fully understand the process of creating a will or trust with the online portal. Then I created a revised information architecture for the public website. Next, I collected all of the brand assets and created new assets to fill the gaps. From there, I began to wireframe the pages for the public site.

The portrait iPad view of the portal interface

Step-by-Step Form Design

The inspiration for the form was tax software that uses progressive disclosure to break out complicated workflows into simple, achievable tasks.

The design also incorporated videos that explained the more onerous tasks in greater detail and with visual aids.

An iPhone 6 view of the portal interface

Responsive Design

I created designs that could be used in many device breakpoints, including iPad and mobile devices.

As I worked with the client stakeholders to revise the public website pages, I also began to create a user interface for the portal. The goal was to create a step-by-step guide that presented only one step at a time, and also displayed the progress through each section of the questionnaire. The result was similar to tax software, but included informational videos to explain some of the trickier options users needed to choose from. I included iPad and mobile mockups for both the public site and the platform in addition to the desktop views.

The portal interface and left panel navigation

Clear Navigation

The portal interface and left panel navigation visually explained all the steps required for creating a will or trust.

When my designs were approved, I annotated them with technical specifications before handing them off to the implementation team. I also packaged up visual assets including photography, infographics and iconography for use in the website. During and after implementation, I gave feedback through quality assurance testing, and at times used remote paired programming to assist the developers in honing the CSS.

The landing page annotated with callouts and CSS

CSS Annotations

The landing page annotated with callouts and CSS

Following the initial release, I was brought back to perform a Heuristic UX Evaluation of the website and provide an audit of design changes that would help with accessibility and make it easier to sign up. Where needed, I provided mockups to show how the design should look.

A page from the portal annotated with callouts and CSS

Fine-Tuning CSS

A page from the portal annotated with detailed callouts and CSS needed to achieve the desired result.

Challenges

  • Adhering to limited brand standards

  • Using easy-to-understand language that is still technically accurate to legal terminology

  • Providing CSS guidance to the developers, who were back end developers producing front end code

  • Leveraging existing assets produced by other content creators (promotional & instructional videos)

End Result

  • A fully functioning platform for users to create a will or trust online

  • A website which both markets the service and explains how the tool works

  • Consistent branding between the website and the portal

What I would have done differently

I would have brought a front end developer to the team to create the public facing website. The two developers were great, but it was hard for me to instruct them on honing the CSS and JavaScript because they had limited knowledge on its use. I think the resulting website suffered because they were unable to make all of the changes I requested in my quality assurance testing.