UNO redesign - Home mortgage broker platform
UNO is an Australian online mortgage broker that combines unparalleled service with advanced technologies to simplify the entire process of obtaining and maintaining a home loan, saving time and money. UNO is a tool that makes life easier for mortgage brokers, and we've made this tool even more convenient and understandable!
A little more detail about UNO
UNO is a valuable tool for clients with:
limited free time;
the need to simplify the process and reduce effort;
a desire to have a positive experience, free from the usual stress associated with these processes;
and to ensure the best financial outcome.
In this video, UNO's founder, Vincent, briefly and in simple language, explains his platform and how it improves the lives of brokers by assisting in their daily work.
A vast number of brokers across Australia are already connected to UNO. They help Australians acquire their first home, next property, investment real estate, or refinance their home loan. Mortgage brokers work with the support of UNO's customer service team, which makes the process of applying for a home loan fast and simple. The technology loanScore is the only mortgage technology to receive the Good Design Award, but what sets UNO apart is its commitment to providing unparalleled service.
Who are the users of UNO?
UNO's target audience is brokers who work with mortgage approvals for homes. Usually, these are users aged 30-55 working on large monitors, as they need to see a large amount of data at once. They usually use one or more screens with a resolution of 1920-2880px. The UNO interface has a large amount of data and fields that need to be placed on one screen, and our task was to create a contrasting and maximally clear UI that will be convenient to work with all day long.
The main task
Vincent came to us with a very original request - we had to create the best case in our portfolio by updating his platform and we were hooked by this idea 😅. Since the client definitely knows UNO better than anyone, he practically joined our team and the cooperation was very close. Our responsibility was to update the UI, increase the information density (information architecture - IA), improve navigation, expand datasets, and generally improve the UX of the product. As usual, you're probably used to us talking about it in every case, we created a single design language UNO to unify the user experience. Check out what we did!
What was before?
And this is what the old UNO interface looked like that we had to change. The old UI was too colorful and sometimes difficult to work with, and the data was unclear. We reduced the overall color scheme to a blue accent color and a black and white main palette, and improved navigation, taking into account the user audience (30-55 years old) and screen sizes (1440-2880px) that brokers work with. The interface's font styles and the detail and variability of components have also undergone significant improvements.
Workflow, search for new style and navigation solutions
Since Vincent came to us looking for a new visual solution for the interface and to improve the UX, this task was entirely our responsibility. We started by diving into the business, familiarizing ourselves with the platform, finding references, and creating a lot of sketches. Below, we show our workflow for creating sketches and the style of the future interface.
Since the UNO interface is multi-level in its information branching, we had to focus on developing modal windows and popups for different levels of the IA. We started with understanding the concept of multi-level interface. As a result, we came to the conclusion that layering modal windows that would overlap each other is not a very correct and convenient solution, because the broker needs to see all the information about the deal opportunities at the same time. As a result of the analysis, we came to the conclusion that it is necessary to apply the already familiar but understandable side-accordion system. When the user uses the action to open the next modal window, the modal window will open next to the neighboring one. Three is the maximum number of open modal windows in UNO. This is due to the desire to ensure that the user does not get confused about what level of IA he is at.
Below you will see the version of the modal window architecture we came up with. It is a clear and simple solution without unnecessary layers, styles and functional elements.
As user testing has shown, this elegant solution has fully justified itself 👌
Having defined the structure and logic of the modal windows, we moved on to the main UI grid, which is used in most UI screens. Below is the workflow and the final result.
After a long search for the structure and principles of the main interface canvas, we still found the ideal variant. Simple and clear for brokers, without unnecessary elements, with a unified approach to the structure - perfectly adapted for large screens. Check it out below
Development of design system of the new UNO
Of course, we could not develop such a large-scale and complex interface as UNO without creating our own unique design system that would meet all the needs of the product's users. The UNO design system is completely custom. We took into account all the properties and states of the components, from multi-level complex combo boxes to simple buttons and their states. Thanks to this new design system, UNO will be quickly and efficiently updated, maintained and developed.
You can check out our work on the component library in the Figma preview below.
The broker's workspace
A broker works with a large number of trades and data at once. It is very important for them to have convenient and quick access to each application, a calendar with schedules at hand, and to set reminders and communication timelines. Having filters in Apps, a broker can quickly find and identify the deal he needs right now without wasting time searching. Using the calendar, the broker learns about plans for the near future. By creating message templates, a broker can automate communication with his clients via email and SMS.
App area
The broker's dashboard is a set of working tools for concluding deals, namely: Needs analysis, Applicant, Securities, Financial position, Documents, Assessment, Loan details, Events & Reminders, Product Search, Shortlist, Recommendations, Company, and others. Each of these tools gives the broker insight into the status of transactions, and the status of buyers for a particular home, and helps to calculate the mortgage. Below we show what we managed to create with the new navigation and design of the UNO system.
Feedback from users
The new UNO interface is still in development at the time of this case creation. Despite this, the first comments from the beta testers and the UNO team are very positive. They like the new UI, they note that it is more understandable and not tiresome to use. Real usefulness and increase in business efficiency, which is achieved thanks to our work - is the best praise. But don't hesitate to praise us when you become our client, because we appreciate it too 😊.
Your feedback and appreciation are always welcome ❤️
Have a project in mind?
Contact us at: hey@interactivedesign.io.
Website interactivedesign.io.
Stay with us:
Figma community // Twitter // LinkedIn // Facebook // Instagram // Behance