ECI Financial

Intro

ECI Financial Corporation is an independent, full-service real estate and mortgage brokerage company based out of Los Angeles that has been operating since 1992. It is a small local business that has continued to survive, primarily through referrals. While business is steady, the client believed there was an opportunity to improve his online presence and better brand himself to retain a higher percentage of clients referred to him, as their website was made in 2006. I was retained as the end-to-end UX/UI designer to elevate their brand and create an efficient responsive website that still embodied the original spirit and history of the company. I coordinated and led all facets of the design process including: research/analysis, information architecture, visual design & rebranding, wireframing and prototyping/testing.

The Challenge

The design brief for this project was to design a responsive website for a real estate and mortgage brokerage company with a 25+ year history. After conducting my research with individuals who all had home buying experience, my main goal throughout the project was to not only make this website visually distinguishable, but to also provide users with informational value that's typically inaccessible or difficult to understand on competitor's websites. It was difficult making sure my designs lived up to the goals I had set for myself because I knew what I wanted to accomplish, but didn't necessarily know if my design choices resulted in the most optimal solution. It was also strenuous creating over 50+ screens (for desktop, tablet and mobile) in only 2 weeks time!

PHASE 1: RESEARCH

This project required a high-level understanding about real estate and applying for a mortgage, so I first interviewed the client in order to get a better sense of the industry, along with his company's services. For my research methodologies, I focused on interviews (primary research) and competitive analyses (secondary research) because I wanted to see what the existing attitudes were around buying a house. I wanted to understand what made the home buying experience positive or negative and figure out how I could apply those learnings to a smaller scaled business.
‍

I gathered 5 participants ranging in age from 31 to 67 years old, all of whom had experience purchasing at least one home and 4 out of 5 who had experience refinancing a home. During the interviews, it became very apparent that there were a lot of paint points: the entire process is archaic, paperwork is always disorganized and unnecessarily complicated, there's a lot of human error and back & forth.
‍

My research findings showed that:

• People typically prefer large companies because they assume large companies have more efficient, streamlined and secure processes; however, large companies were often disorganized, made mistakes, missed deadlines and had poor customer service
• People trust referrals the most and will select a referred company without researching other places, as long as the referred website passes their gut check (clean, modern, easy to navigate)
• People are pretty open-minded to all companies because loans are such a confusing topic, so it’s less about the company’s size and more about quality
  ‍

‍
Lack of transparency was also one of the major recurring issues, since a lot of companies intrusively ask for personal information like credit scores or social security numbers when you're first applying, but are reticent themselves when it comes to giving the public their desired information (ie. interest rates, loan approval amounts). Hearing all of this, I wanted to find a way to make the entire process simple, convenient and enjoyable, and change the overall impression of getting a loan from a negative experience to a positive one.

I examined the existing site, as you can see above on the right, and evaluated it on the same criteria used for the competitive analysis. Doing so allowed me to develop a game plan for the new design and come up with personas, as well as pin down my feature roadmap.

In conducting my competitive analysis, I noticed some interesting trends based on the size of the company, namely that:

• Large companies focus less on customer service (contact, reviews, establishing credibility) and more on volume (preapprovals/prequalifications)
• Large companies have the resources ($$$, labor) to include desirable interactive features & automate the process, unlike smaller shops
• Smaller companies focus on referrals and showing the quality of service (through testimonials) and are easily accessible
  ‍

I developed two personas, one geared more towards residential loans and the other towards commercial loans/private equity deals. The one on the left represents the archetype of a Family Man, while the one on the right represents the Savvy Businessman. In my detailed conversations with the client, I realized these two types of users had fairly different goals and needs and therefore would probably interact with the website in different ways. I wanted to make sure I had my bases covered for the main types of users so I could take those needs into account, especially long-term if I had more time to expand upon my designs.

My feature roadmap was broken down by priority level:

The must-haves were mostly a combination of issues raised by my research participants, backed up by what I found during my competitive analysis.

Nice-to-haves were things that my research participants suggested but were not necessarily an industry standard.

Surprising and delightful were things that I found were lacking on existing sites and ideas I had for differentiating this business.

Can come later were longer-term goals that I knew I wouldn't be able to finish in this 2 week timespan, but would either be interesting or helpful to users.

‍

PHASE 2: REDESIGN

The next phase consisted of four components: Information Architecture, Design Ideation, Rebranding, and UI Design.‍‍‍

I. Information Architecture

In this stage, I restructured the existing content so it would flow more naturally and be easier to understand. I created a simplified sitemap to have a firm idea of how to proceed with the visual design and chose to show the preapproval flow because it was one of the more complex features on the roadmap.
‍

‍

II. Design Ideation

The beginning of the design ideation stage went smoothly and my initial sketch was fairly easily to put together. However, I quickly realized that I was just placing standard, disparate pieces together to create a messy collage of design patterns I had liked on other sites. In my second sketch, I tried to get rid of any visual discrepancies and tie all the pages together to have more of a consistent look and feel, which I think I achieved in the actual wireframes.
‍

Noninvasive interactivity/engagement (of features, like a mortgage calculator) and ease of use/understanding (of the site and the process) were my two goals for this website. One of the biggest issues that came up in my research was that people felt the standard mortgage website was full of dark patterns and traps for you to input your secure personal information and not receive the information you requested. Additionally, they reported that the process was unnecessarily confusing, overwhelming and poorly explained for the average viewer, so I wanted to provide a transparent solution to combat that frequent issue.

III. Rebranding

Redesigning the logo was one of the most difficult parts of this entire process. Because this business has been in tact for more than 25 years, I wanted the new logo to still capture the same essence as the old one did, which meant keeping that circular structure with the horizontal line running through the middle. The old logo was rooted in some great ideas (a globe to show their wide reach and capabilities, green & gold to represent money and the real estate fraternity the client was in, etc) so I didn't want to stray too far away from that.

I eventually landed on a simplistic but visually interesting idea, which you can see below. The "C" in "ECI" is in the shape of a house, making it clear what type of industry this business falls under. I kept a similar color palette, but chose a richer, darker green to make the site feel trustworthy and professional. I chose a lighter green for text because the same dark green looked black as outlines or strokes, and added in a bright yellow for the CTAs.

I chose a sans serif font called Sen, and purposefully stuck with one font throughout the entire site because I thought that keeping all the text consistent made sense with my earlier idea of making things as simple as possible for users. I didn't want to distract them too much with visuals, so I put enough to reflect the brand and assist with understanding the text, but not so much that people would only focus on that and skip over the content. I think that decision made a lot of sense for a company in the professional services industry.

IV. UI Design

I then created my high fidelity wireframes, which went through two rounds of usability testing. I incorporated colorful pastel illustrations to increase engagement and add a bit of visual flair to an otherwise abstruse topic.
‍

‍

PHASE 3: TEST & ITERATE

After connecting my Sketch files to Invision and developing a prototype, I conducted a usability test with 4 individuals. Feedback revolved mostly around the preapproval flow. Other issues included:

• Preapproval flow: text options don’t look clickable
• Add a bio and picture of the team on About page
• Too much text on Home page
• Logo looks like a G, EGI instead of ECI - edit to look more like a C
• Move the Upload Documents section to the portal instead of in preapproval flow
• Add CTAs in each subservice section
• Add Get Preapproved CTA in top menu
• Be more clear about the credit check, take out any mentioning of laws

I made most of the changes suggested and then conducted a second round of testing, with the feedback being:

• Add a bio and picture of the team on About page
• Edit the copy to make it even easier to understand
• Incorporate more substantial details (recent transactions, portal screenshots) into the design instead of just focusing on making it look pretty with illustrations

‍

KEY TAKEAWAYS & NEXT STEPS

I concluded this project after 2 weeks, with a total of 36 responsive screens, 12 screens each for desktop, tablet and mobile, as well as a comprehensive desktop prototype made up of 24 screens. Next steps would include creating all 24 for tablet and mobile and testing the usability of each device.
‍