Game of Loans
P4 Case Study — Lendified
Let’s Begin
The first week started off with the UX team conducting user interviews, going over the information architecture on Lendified’s website along with testing it on Google‘s site speed test. During this process I wanted to get a head start by prepping a mood board and gathering reference for UI direction. It was important to keep myself in the loop with my UX designers so I can have a full understanding as to the decisions we make that could affect the UI of the site.
Mood Board
From the start I knew I wanted to keep the overall mood of the new website clean and tranquil. With some not being to familiar with the world of finance I wanted to create a calm and reassuring place to be. I’ll admit that in the early stages of the project I had a strong idea as far as UI direction goes, regardless of that I always enjoy kicking things off with a mood board to help get the juices flowing.
Style Tile
Although the folks over at Lendified gave us creative freedom for the project, one element they asked us to work with were colours. Specifically their signature green featured in the style tile above. Instead of asking ourselves what new colour palette can we come up with we asked ourselves what can we do to compliment some colours we were given. Pairing their green with dozens of different colours I finally discovered the perfect shades of blue that truly brought Lendified’s signature green to life. Icons designed by Gregor Cresnar from flaticon.com.
Style Guide
High-fidelity & Beyond
Working with a different UX team meant a different approach to the project. Although I was expecting to receive low-fidelity prototypes within the first two weeks, instead I was paired with a couple team members to gather reference, create an outline and start our mid-fidelity prototypes from there. Using the lean methodology we had everyone tackling different tasks to maintain efficient workflow. It was important for us to be ahead of schedule, especially because we had more than one meeting in our final week with our client. Below are a few examples of Lendified’s original website compared to our high-fidelity prototypes. (Please excuse my chicken scratch..)
In comparison to the original homepage, a few things we did differently in the high-fidelity prototype include:
- Less clutter of colour, images & icons
- Used smaller compressed files, giving it faster loading time
- Restructured sitemap
In comparison to the original referral page, a few things we did differently in the high-fidelity prototype include:
- Trimmed the fat on copy
- Added iconography, giving the page more life
- Added a bright CTA to sign up, standing out on top of the dark blue background
Our client requested that we adjust the loan calculator featured on the homepage screen. After a couple group members did their research and sketched out a handful of ideas, we came up with a new appealing and fun-to-use calculator. A few things we did differently in the high-fidelity calculator include:
- Added a graph comparing Lendified’s rates to their competitors
- Spaced out the entire calculator, avoiding clutter and confusion
- Added copy giving the user more information on payment schedule and fee rates
Prototype
Every design choice had a purpose. Throughout the process I had to remind myself to keep everything consistent. Picking out images and icons for the landing page was a slow and tedious process because it had to match with other elements throughout the site. An important thing I learned from this digital experience is the impact of images used on websites. Prior to this project I selected any image that I felt fit the theme. My UX teammates suggested using images of people facing the call to action buttons to help guide the user’s attention, and using images with a lot of negative space in order to keep the type/copy more clear and easy to read. Thanks for the heads up guys, first round is on me.
Check out our Lendified Web & Mobile Prototypes here.
Problems/Solutions
It was easy to communicate with my UX team, even though there were times of stress it was easy to pull someone aside, go over the issue and immediately get feedback or assistance. There was a lot of chemistry throughout the group. Being able to bounce ideas off one another and being open to different suggestions really lead this to become a final product that I’m very proud of. Reworking some of the website and mobile experience so close to our deadline lead to a bit of stress, but that’s simply because I always prefer to be ahead of schedule. What I learned from this is to always share my thoughts and ideas to my colleagues and instructors throughout the process, as opposed to sharing all my work near the end, making late adjustments that much more stressful.
Despite being the UI designer, the team made sure I was involved with the UX process. i was helping out with tasks such as user testing, studying the site’s analytics and developing wire frames.
Our work was later presented at the Lendified office to the CEO & CFO of the company. Myself talking about the UI and the UX designers covering their research and functionality of the website. Thanks to all the work we’d put in, we could defend every pixel on the page, and comfortably answer all of our clients’ questions. It’s safe to say the folks over at Lendified were very pleased.
