Other creative credits
P. Cristobal (Designer)
Brian Freeman (Designer)
Design system advocate
The sprint was held in our Florida office over three days. After a few icebreakers and preliminary brainstorming exercises, everyone in the group sketched out their ideas -- starting with the low detail, broad ideas.
After voting, focus would narrow and include the ideas from the previous round that had the most energy.
By the end, we had a clear direction to go in, and the final flow was drawn onto the whiteboard for us to wireframe in the coming days.
The argument against using your own library or high-fidelity assets is that your audience will focus too much on how it looks, not the information they’re seeing. This is true, but I wanted to find a way to avoid doing the double work of using one library for wireframing, then replacing it with components we already have, and that are already set, anyway.
So, in the interest of efficiency and to make an argument for using our existing library during wireframing, I did exactly that. But, I threw a desaturation layer over all screens before uploading to provide that low-fidelity feel to help disconnect stakeholders from the feeling they’re looking at final versions.
The design phase
Since I did use our existing design system in the wireframe stage, some of the changes needed were pretty minor once the wireframe layer was removed. We spent that time saved tweaking the information that was there, and improving the layout where needed.
This is actually my favorite design file, since it was when I implemented symbols/components from the very beginning of the design process. I knew there would be many repeating elements across many similar screens and cards, and I wanted to be as efficient as possible.
This heavily influenced my workflow and file setup going forward on any future projects.
This project was uploaded into Invision and prototyped out for user testing and stakeholder review.
The responsive loan details card now includes fee information and lifetime loan cost, as well as the customer-favorite payment and lender reviews tabs. Mobile lacked any offer details modal before this, so creating a responsive design was necessary.
On desktop, the loan amount and lead form CTA sticky to the bottom of the modal while traveling between the tabs. On mobile, the CTA remains in view.
Easily compare different factors side by side on both desktop and mobile. On scroll, the logo, CTA, and table headers would stick to the top of the screen so you always knew what was being compared in that view.
© Heather Geary