Client: Carole Callaghan Law Firm
Agency: Standard Beagle Studio
Launch Date: Fall 2016
Main Website: https://cclawaustin.com
Website where forms and dashboard are located: https://csclawaustin.com/eligibility/ (note – must have a login to view dashboard)
Carole Callaghan came to Standard Beagle with a need for her clients to be able to fill out an online estate plan. Estate plans can be very complicated, but there were situations in which her clients would need very simple estate plans. This is the need she saw and wanted to capitalize on it; not only to save her clients money but to allow for a more convenient means of getting an estate plan while having access to a lawyer. Most online estate plans on the market were with companies that did not have actual lawyers that you could consult with for questions and expert advice. Carole saw this competitive advantage she had and wanted to develop a platform to capitalize on it.
Carole already had the paper version of the forms her client’s filled out, so we were able to use those to help design and build the online forms. Because we were building forms and a dashboard for the user to view, this project had a very heavy focus on UI and UX. We also had the task of building two types of user flows – one for a single person and one for a couple. So, needed to define those personas and who we were building the site for and how they would interact with it.
Design Part 1 – Style Guide
I began the process with the style guide. We wanted it to match the look and feel of the current site because that was best for the user flow. The user would be landing on a page on the current website and clicking through to the website with the estate planning eligibility form. From there they would fill out the form and would either be told they did not qualify for the plan or they would be allowed to move on to the dashboard. I designed this flow so it would feel like they didn’t even leave the current site they were on.
UX Research + User Stories
Next, we began to research and do an analysis of competition out there. We found other companies doing similar things, but there wasn’t much competition where a lawyer was doing this. Based on the high volume of users getting estate plans at these competitors we were able to confirm the need for something like this in Texas. From there, we were able to start coming up with user stories to determine what features we would need on the site. Estate planning can be scary for a person. It is an emotional process, and we had to keep the empathy of the user in mind when designing the site. We wanted to implement features that gave them enough relevant information and help to be able to complete the forms without having to contact Carole. But, we also give them the option to do so if needed, because having a lawyer to answer questions and give her expert advice is one of the selling points of the product.
Design Part 2 – Sketches
Sketching is a huge part of my design process because it is a great way to iterate over and over until you come up with a solid design for the UI. So I sketched multiple iterations and got feedback from my team and the client before moving onto the wireframing stage of my design process. I needed to sketch out what the dashboard would look like as well as what the admin would see on the backend via the WordPress dashboard.
Design Part 3 – Wireframes
After design approvals, I designed the wireframes on Balsamiq Mockups. We did low fidelity comps for this project due to budget constraints and a need for a large amount of development time. We originally designed the customer portal slightly different than the finished project. We incorporated circles into the dashboard with the interaction of a checkmark over the circle after completion. But after development, the client decide she wanted it just in a list format instead so we made some design tweaks. I have included original wireframes to view, as well as what the final product ended up looking like below.
We did a significant amount of testing on this site due to their being several forms the user would be filling out and two different user flows. We had to make sure all user flows were accounted for and all user scenarios. We did usability testing on our team, as well as had the client and a few other trusted individuals interact with it before release. We were able to uncover bugs as we went through the development process rather than waiting until the end of the project to find errors. We wanted to deliver the best possible deliverable to the client.
The Final Product
As you can see in the final product, we incorporated an icon next to the title of each form. That icon is clickable to bring up a modal with more information about each form. We also have help topics on the side to address other potential questions the user might have as they go through the different form flows. On the forms, we also incorporated a tooltip that has helpful information about each form so the user doesn’t have to go back to the dashboard to access the help topics and additional information they may need while completing the form. My team and I were able to deliver a great product for the client that has enabled her to make an additional income that requires less effort on her part for the less complicated clients. We delivered a simple and user-friendly interface with the interactions being simple but effective.
Note: Due to the privacy of the client I am not able to show all of the form flows within the dashboard, which is why I did not include that.