William Man
- 5 min read

Luma - Structured Product & Annuity Comparison Tools

When I was initially brought onboard, the Luma team sought to identify usability concerns and to propose and prioritize areas of improvement for their software platform. But first off, I admittedly was jumping straight into the deep end having limited knowledge of Luma's business model or the industry itself.

Navian's Luma provides banks and broker/dealers with a fully-customizable platform and order entry system. Registered users login to access a wide-array of content designed and tailored specifically for your firm.

However daunting this might have been given the client's unique challenges, each step along the way was met with designated solutions to solve for each problem.

Discovery - Auditing to Platform Reimagining

In lieu of having a Business Analyst ― someone vital in not only gathering stakeholder requirements but also to wrangle together the vast glossary of business-specific terminology ― the discovery phase was of the most utmost importance before design.

The system "merges" no less than 4 separate portals with multiple legacy platforms stitched into one user experience, each with their own unique navigation systems which can be extremely confusing for general navigation.

Components such as tables, contact placement, modals, detail pages, sub navigations, and a myriad of granular elements needed to be made or redesigned to adhere to a consistent design system. Each tool within the portal ― Post Sales Support, Product Comparison Tool, Orders, Education and Marketing Material and Resources, and of course the Dashboard ― had to be reimagined without compromising the intended functionality or purpose.

We sat down the clients to work out a comprehensive site map, which was ever evolving

Lifecycle Manager & Scaffolding

Due to stakeholder unavailability and lack of conclusive decision or prioritization from the client, we started with what they were sure of at first: Post Sales Support.

Post Sales Support was as the name suggested: allowed users to view the performance and status of orders past their maturity date

After a few wireframe iterations shuffling components around the page and introducing valuable features (e.g. an expanded view allows users to view historical product performance, purchase similar products and view related documentation), we went into design for the eventually rebranded Lifecycle Manager, which:

Completed the overall look and feel of the Post-Sales Support tool
Introduced elements, colors, fonts and layout which would go into the design system
Began the ever-changing discussion on the left nav and header scaffolding

A few components were redesigned (e.g. Expanded views were converted to modals to prevent conflicts with scrolling and documents were brought into base level)

Product Marketplace

Essentially working backwards, we then went onto the previous step of the user journey to design the various subsections under what would eventually be known as the Product Marketplace.

Here also we introduce the varying users ― advisors, issuers, and managers/admins ― each with their own permissions, rights and unique features.

Products

The New Issues (later retitled Products) section was comprised of products to be sold by registered representatives, each with countless fields of data with sorting functionality, text search, hiding/unhiding fields, and the option to buy.

The New Issues table consisted of so many data columns that horizontal scrolling was necessary. As such, the affordance had to ensure that scrolling was obvious

Accounting for all these necessary functions as well as exclusive Admin/PM features (i.e. modifying a product's information via the Clearing Options), we pushed these into designs.

Based on stakeholder requirements, we also retrofitted an option to Bulk Order via uploading an Excel template or by manually inputting fields in later iterations

Orders

Once a product is purchased and before it matures (via the Lifecycle Manager), products could be seen in the Orders page, which depending on the user's permissions, can be modified. It shares some data structure as the Products page as well as an Aggregate view, a feature that the client and our team settled on to allow users to have an overall performance evaluation of a particular type of product.

Although iterations for this section was minimal, one thing that we couldn't account for in wireframes was how much horizontal real estate this would eventually use up in design.

The solution of horizontal scrolling we introduced in the Products page came in handy here. Hooray for consistency!

Comparison Tool

As the project continued, we got into the more complex sections of the platform. The initial designs for the Comparison Tool also followed a tabular data layout similar filtering options. This was not the direction that the Luma team had in mind.

Borrowing cues from direct competitors and inspiration from "chic" non-competitors like Netflix, our initial assumptions for this section were eschewed in favor of a card-like format.

The new requirements as seen in wireframes and eventually in design were to let users view products in card form with a bevy of detailed information, and most importantly stacked in a manner that was easy to compare off of one another.

It was hard for the client to see past predominant blues of the wireframes so we ensured the designs were not as monochromatic as they feared.

Dashboard

It's hard to believe that designs for the Dashboard came towards the end of this project plan but the requirements gathering for this section proved to be a quite a process as this entire page was generative and not based on any pre-existing pages.

Only four of the many modules mocked up for the dashboards, each one capable of changing or being removed entirely at any given time

Dashboards were designed differently for each user type, primarily reps and admins, with their own unique modules up for client debate. To move things along, our best approach was to design these modules first for however the client saw fit for later implementation.

An important option for users to have was the ability to sort, hide and reveal any module that is most relevant to them.

All modules were redesigned based on feedback from reps and their user needs, calibrated to what they would want to see upfront and have shortcuts to most used features. It was important that this page was also a gateway to get them to other pages in the portal.

Learning Hub & (Re)Finalizing Scaffolding

As a testament to how complex the remaining sections were, our client had to fly in from Chicago to meet us in person. After all, time was of the essence and we had to design the Education and Training and Sales Tools and Marketing sections. Luckily our workshop proved fruitful in providing us enough guidance on a registered rep's user journey.

Whether they were veterans or complete newbies, each platform user had to complete specific compliance testing in order to sell products of that type. We deduced that the remaining sections could be put into a single user flow which we later coined the Learning Hub (previously known as Learning Center) was the final piece to the puzzle of the site map gap.

Consolidation

The PDF and video material themselves had previously existed scattered throughout the Luma platforms but we were now considering bucketing these resources into relevant categories that users would need to see related to their training.

The Learning Hub had undergone innumerable design changes to address all possible concerns in an otherwise complicated new user flow being introduced here

As a stakeholder requirement, having non-essential but relevant links to resources was highly suggested so that was also included as well as our suggestion for a bookmarking and sorting function to allow users to find their material with ease. Once compliance testing was complete, users can finally sell the product of that type.

The Finish Line

All the components, fonts, colors and the like I created in the style guide shipped to their development team to lay the foundation for design principles to be used in the future. However, as the project neared the end, new challenges rose.

Losing a Battle...

It was bound to happen. The client gave us the final renamed section titles...as well as a last second color change.

All colors were appropriately chosen based on pre-existing Luma color palettes (former) but we ultimately switched out for an arbitrarily less-subdued neon bright color scheme (latter)

Getting this news with only hours away from final delivery, any push back regarding this change would have pushed us beyond deadline. And as much as I lament this color decision, we had to choose our battle realistically and given enough time, this visual change would definitely have been worth discussing.

...But Winning the War

Within the scope of this project, responsiveness was never pitched in the SOW or mentioned by any stakeholder or project manager. Although I kept that in mind, every step of the way I ensured that all elements could scale to different page layouts. It is part of my personal design ethics not to neglect responsiveness which is such a vital part of this user experience.

Registered reps will carry their tablets with them to complete sales and having a responsive page was obviously of everyone's best interest.

Ultimately, the project was a resounding success and although there were indeed hiccups coordinating the clients' time and feedback, we managed to not only design the entire infrastructure for their upcoming platform (currently in development), but we laid the foundation for their future endeavors.

The Final Prototype

You can see the entire design deck made for this project here.

WILL MAN DESIGN