Broker Insights UX Study
Back

Broker Insights UX Study

In this document I will go through a few considerations regarding the interface of the Broker Insights platform. This will include both a quick study of how the platform is used and possible changes that would make the user journey more simple and effective.

Colors and Typeface

In an attempt to make the platform look a bit friendlier for the end user I decided to go with the professional-yet-friendly “Proxima Nova” font, characterised by slightly rounded letters that look great at any size.

The colors needed a minimal amount of change as the original white and orange used by Broker Insights look quite good together. On top of these two primary colors I decided to use a few other shades of low opacity black with a slightly darker white for various containers.

The Layout

The layout was already very functional so, in the interest of not completely changing the look of the platform in order to avoid confusion, only very few quality of life changes were done to some of the already present elements.

This is what my layout mockup for the main search page looks like:

While my design is fairly close to the original platform, I am sure the small changes to each element that make up the platform will bring a big quality of life improvement to the users and also make the website more viable on mobile devices.

Searching

From my own personal research and being able to briefly talk about Broker Insights with the team, it is pretty clear that the main function of the platform is to deliver information as fast and as easily as possible.

At the moment, searching is done through seven search bars/dropdowns, each one allowing the user to select one or several filters from the available categories.

This is functional, however it requires the user to go through at least fourteen clicks and a lot of scrolling to receive the information they are looking for.

Moreover, older or less expert users might be confused by this or even get frustrated looking for the option they want if it is not under the category they were expecting.

A more UX and mobile friendly solution to this would be replacing these dropdowns with a single search bar. This could greatly speed up use of the platform.

In this situation, typing inside the search bar will filter through the available tags showing only the ones the user is interested in. The user will then toggle the tags depending on their choice, which, thanks to a listener on the tags’ state change, will trigger the results to update.

However the advantages of this system over the current one aren’t just speed and ease of use. This search bar also allows the user to quickly browse through every available tag in case they are not quite sure what to search for.

Results

I found the way results were displayed in the original interface quite confusing, specifically their separation into Brokers that would offer multiple Opportunities.

The way the dummy data I was able to access was set up showed hundreds of different opportunities for each broker, but only about seven or eight brokers.

Since I am fairly unfamiliar with how Brokers work I worked on this part of the interface under the assumption that there would not be hundreds of opportunities for each broker and designed around that.

My biggest problems with the current interface were how much space the results for each broker occupied and how much of it was empty:

Yet another issue I found was how the information about Opportunities was presented after clicking on the “View Opportunities” button. With a large number of opportunities for each broker, browsing through them with the “Previous” and “Next” button became very cumbersome.

I think a simple and elegant solution to displaying the information on both of these pages is to use self contained and responsive Cards, removing entirely the interaction of selecting a specific broker to visualize their Opportunities.

With minimal changes such as adding a button and greying out another we can also quickly show the user that a specific opportunity in their search has already been added to their workflow.

While this is a minimal use of Cards, it would be, thanks to their responsive and adaptable nature, extremely easy to add more information (such as text or pictures) or to expand them.

Cards are exceptional for showing small snippets of information. However, relying too much on them might become a problem as Broker Insights starts collecting data from a more vast number of brokers. Considering this, I feel a secondary filter system to include or exclude specific Brokers would be very helpful.

Situated on top of the search results are toggles to filter between the brokers currently appearing in the search. Toggling one or more of these will cause Opportunities to be filtered.

Finally, to show the remaining information (Number of Opportunities, total premium, number of brokers, etc.) we can just use the remaining bar at the top of the page.

My Workflow Page

The workflow page is perhaps the part of the platform that benefits the most from a unified design and the changes applied to the Results Page.

Just like the Results page, Workflow already has troubles displaying all the info available in a coherent manner and I suppose this will only get worse as more Brokers and Opportunities are added to the platform. At the moment, Opportunities are divided between the Brokers they are connected to, which is good. However, the way they are displayed and the lack of a search function makes navigation a bit difficult and the amount of information displayed might confuse some users.

Since the information shown on this page is essentially the same as the one on the Results page, there is really no reason not to use the same layout to display it.

By adding a search sidebar (the same one described on pages two and three) and showing our opportunities as Cards, the user will be able to filter though all the information relevant to them (thus making navigation easier) and they will not have to learn a completely different interface to do so.

The Differences

The central difference between the Results and the Workflow page seems to be the ability for users to add notes to each opportunity that has been added to their profile.

It is not clear to me whether other users can leave comments on your workflow elements, but since some comments on my workflow were left by other users I designed the interface with this functionality in mind.

I really liked the implementation of the comment system in the demo I was sent and wanted to expand on and improve it. In my concept the notes left (by you or other users) mimic a very simple messaging interface and are enclosed in a hidden drawer under the line of Opportunity Cards.

Mobile

My main objective with this redesign is to create a simple, effective and cross-platform interface. This is as its most noticeable in its mobile interface.

The Opportunity cards can easily fit on a mobile screen thanks to their responsiveness, while the search bar is tucked away at the top of the screen, waiting for user input.

All the filters from the desktop search bar are brought up when the user taps on the search bar and their functionality is unchanged.

Conclusion

As the functions of the platform have been significantly streamlined, users will be able to navigate it faster, and the friendlier font will provide a more inviting aesthetic. Thus, without drastically altering the color scheme and feel of the platform we can successfully update it to the latest design trends as well as improve user satisfaction and usability.  

Back