Summary
ROLE
UX Research; Prototyping;
Visual Design
DURATION
Jul - Sep 2019
COMPANY
TEAM
3 UX Researchers
1 Design Director
(Yeah, yeah, take me to the design you delivered! )
DELIVERABLE
Hi-fi wireframe
Responsive wireframe (mobile)
Interaction Prototype
Final design deck
OLD DESIGN
NEW DESIGN
Click to view full image
Let’s step back a little bit and look at the big picture of the borrower-self service process.
Take Janet the borrower as an example. You can see if Janet doesn’t submit their proof of insurance to the site, she will be charged of CPI (collateral protection insurance), which is really frustrated for her since she pays for her auto insurance as usual. She doesn't really understand why would this situation happens.
There are many reasons why would this happen:
For example, Janet turns from full coverage to a cheaper insurance plan to save money. But when she signs for the loan contract, she was asked to get full coverage for the car. It is not unusual for borrowers to forget about these requirements.
Not in a mood to read a complicated diagram?
Here's an alternative. Take a look at the storyboard I created. It helps me understand what does Janet feel (confused, angry and suspicious) before she starting to use the website.
SEO issue：
Normally, new users use Google to search the site. But the top result is people questioning whether the website is legit or not.
User comments:
People think the whole thing is a scam, the website looks generic. In one word, they don’t trust us.
The landing page fails to provide basic information to help new users onboard, such as the process of insurance verification. why they need to upload information here, etc.
Financial jargons are everywhere in the form, but none of them are explained in a clear way. Our users find it hard to refer back to their insurance documents and find the information they are asked for.
1
2
Borrowers had a bad first impression on us. They doubt whether if this whole thing is a scam or not. Therefore, when they land on our website, it’s highly possible that they will fail to finish the task with untrustworthy feeling.
The website is functional, but not user-friendly. Relevant and useful answers need to be easily accessed throughout the entire flow. The fewer questions could be answered, the more calls will we received from the users.
Show a strong, high-converting header and an easily accessible information session
Rationale:
Based on our research on websites that have a high-converting landing page, we summarize the commonality. We decide to adopt the following components in our header design:
(1) A compelling heading and subhead that state our value proposition
(2) A single and focused Call-to-action
(3) A contextual and supporting imagery that reflect the tone of the site
Brand the website as an Allied product
Rationale:
The most effective way to reduce users' doubt about the site is showing who we are. By introducing Allied Solution and explain its relationship with bank/credit unions, users will get a gist of what this company actually offered. If they still feeling doubtful, they can visit the corporate website in the footer to seek a sense of security.
Make FAQs easily accessible
Rationale:
Showcasing most frequently asked questions on the landing page has two value:
(1) Conveying the message to users to further build the trustful relationship-- "We care about your concerns."
(2) Reminding users they can search for answers in FAQ page before calling the customer service.
Make it easy for new users to find Reference ID
Rationale:
We understand that a lot of users won’t read the letter we sent to them carefully, so we provide the template of the letter on the right panel, as a visual cue to help them refer back to find the reference ID.
Even for users who don’t need this instruction, this section is valuable. It is a good start to cultivate their intentionality of finding instructions in the right panel throughout the process.
Simplify the definition of financial terms and provide simple examples
Rationale:
People call us because they don't understand certain insurance terms. These phone calls can be avoided if we provide instruction right at that moment when they feel lost.
By explaining the meaning of the financial terms and show an example of an insurance policy document on the right panel, we can effectively reduce the phone call and make the whole process easier to finish.
Make it convenient for different types of users.
Rationale:
We consider the needs of different user groups when designing this function. For example, the primary borrower wants to keep his/her co-borrower in the loop, or insurance agents need to forward the confirmation email to their client as proof of their work.
Increase their sense of security
Rationale:
Allowing users to save and/or print the confirmation page can help increase their sense of security and peace of mind. Also, this might be a low-cost solution in terms of effort and time invested.
All in One Page
We didn’t follow this design direction because it is overwhelming to ask users to input all the data on one page. Nobody likes to fill out forms, especially loooong forms.
However, we will keep this direction as an option for future development. This type of layout is good for power users to fill out everything at once, especially for insurance agents who might enter the data in the site many times. They are the next user group our team will focus on.
In Separate Pages
This idea is chosen because (1) it groups questions logically in several pages. Users can only focus on one step at a time. (2) It includes a visual cue to indicate how far the user is to complete the form.
Fill in Ref ID on Landing Page
This design has a drawback—it won’t show the helpful tips unless user hovers on the info icon. Based on the current design strategy, we want to convey the tone to novice users as being helpful so we didn’t adopt this design direction.
However, one thing we need to continue researching on is the number of people who actually couldn’t find the Reference ID. In the future development, we plan to gather data from customer service so that we can decide whether to take this path or not in the future.
Fill in Ref ID on a New Page
This idea is chosen because (1) it matches with our design goal—holding users hand from the very beginning; (2) The structure of using the right panel to show helpful tips is adopted in the following form pages. So this page will be a good start for users to fall into the habit of seeking help there throughout the process.
Show form lables only when it is focussed
This design will make the page looks clean, but it is hard for users to spot mistake when they need to review the input. Moreover, the form includes a lot of financial jargons, it is not a good idea to hide the labels since users need to refer back to them frequently.
Provide permanent lables
This idea is chosen because (1) a permanent and clear label allows users to skim and review their input; (2) this layout is used in our company’s design system. We want to follow the same design so that it matches with our branding.
Understanding the big picture of the project is crucial. Ask the right questions to the right person. Ask for "why" instead of "what" and "how".
At the initial stage, be open to different design direction. Always step back a little bit and think about the users and their problems. Embrace the problem, not the solution.
Involve dev team as early and frequently as possible. Show them some of your crazy ideas at the early stage. Respect their time and effort.
