EverBank

UX Design and Front-end Development

As a UX designer, one of my responsibilities was to support the Retail Loan Origination division, specifically Retail Loan Officers (RLO). As part of their marketing materials, I created a specialized website for each loan officer. The strategic objective for the project was to make the loan process more efficient from start to finish.

 

How do you enhance the User Experience for the production team?

The project started by working with Business Analyst Jody Washick. She saw the issues I was experiencing creating the websites for the new loan officers. So she started by documenting the entire Loan Officer web site process. Then she looked at how to enhance the entire process. I supported Jody by providing information of how the process worked. She came up with a more efficient process and sold it to the higher ups and thus began the project.

Automation is the answer.

Before, there were gross inefficiencies with the process. The majority of the process was manual copy and pasting. Spreadsheets were the source of information. Worst of all there were knowledge and information gaps between the teams. That caused teams to throw problems over the fence when it was their responsibility. Jody proposed automating the process as much as possible. Moving to the HR database as the record of source instead of spreadsheets. Her new process made the teams roles and goals transparent.

 

Loan Officers are more than meets the eyes.

Part of the automation called for creating new templates in Sitecore. This became an opportunity to improve the Loan Officers websites. I worked with Copywriter Mellissa Miller to create a new content strategy. The old Loan Officer websites contained a single page with one template for all the Officers. After researching what the business supported and gathering feedback from Loan Officers. We realized that Loan Officers for EverBank supported a wide rang of products. Most Loan Officers specialize in specific Loans with unique goals.

We sat down a identified the different types of Loan Officers and what their needs were. From this list we proposed to build a template for each Loan Officer type. Once we identified the types. We started talking about the content needed to support the Loan Officers. Part of our strategy involved adding pages to the templates. We added an Our Solutions page to help the client learn about the products we offered. Another added page, About Me gave information on the Loan Officer. The purpose of the page is to help connect the client and their agent.

Loan Officer website types

Builder*

Realtor*

Consumer*

Recruiter

Team

* Site type can be a hybrid of the regular and recruiter template.
 

As our content strategy started to solidify. I understood the content needs of the pages. The last part of my research involved me looking at examples of previous EverBank work. I looked through other websites team members had created. To see what patterns I could leverage. Mellissa started on creating the copy and I started sketching out the web pages. During this time I used the sketches to test new and existing patterns. To see if there were any major gaps in the design. If I found any problems, I would let Mellissa know of the issue. We would solve the problem from a content strategy perspective.

Sketch of the desktop version of the homepage.

The Mobile sketch streamlined all the content and added hamburger menu to the nav bar.

 

Once Melissa handed me the copy. I started to mock-up the website in Adobe Illustrator. I placed the copy in the mock-up we tweaked the copy as needed. Next, I added the graphics to the mockup. Once the mock-up was complete I sent the flats out to stakeholders for their approval. After receiving minor feedback and the changes made. I sent the flats to the legal department for their review. There were no legal changes needed. Once we had all the needed approvals. It was time to move the pages into production.

Mocking up the desktop in Illustrator helped to identify possible issues with the content.

The mobile mockup broke everything into a single column.

 

At this point I started working with our front-end developer John Apostle and our back-end developer Matthew Sherwood. Using the flowchart Jody created. We mapped out what was needed from our developer. Set a timeline and created a plan. So all the parts would come together at the same time. We all worked together to ensure all of the pieces of the template were accounted for on the back-end. My deliverables included providing code to Matthew. I created the HTML assets for the page. Piece by piece then I handed the code over to Matthew so he could add the code into the template. John Apostle worked on the functionality of the page. He setup the email form and handed it over the Matthew for production. When Matthew completed his work. We launched a few pilot sites. This helped us to iron out the kinks with the code/design. Once this was complete we pushed the changes to all 400 plus Loan Officer websites.

Mocking up the desktop in Illustrator helped to identify possible issues with the content.

The mobile mockup broke everything into a single column.

 

We kept improving the site as we went along. One of the major enhancements to the site was the addition of comprehensive analytics. I worked with Jay Lewis our Web Analyst to gain insight in the user's behavior so we could improve the user experience.

 

Team

TJ Wolf

Creative Director

Lesley Foster

Web Supervisor

Melissa Miller

Copywriter

John Apostol

Front-end Developer

Jody Washick

Business Analyst

Jay Lewis

Web Analyst

Matthew Sherwood

Back-end Developer
 

View all projects →

Want to work together, say hi, or talk about tigers?

Linkedin
Dribbble
Github
Twitter