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.
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.
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.
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
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.
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.
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.
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.
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.
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'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.
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.
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.
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.
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.
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.
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.