30% immediate reduction in help requests
Increased sales demo effectiveness
Created framework for product expansion
NIC MAP Vision is the senior housing industry’s dominant data platform, relied upon by operators, investors, developers, and lenders for critical business decisions. Despite its unmatched data quality, the user interface was difficult to navigate, burying valuable insights and leaving users frustrated.
Many of the 5,000+ active users found it easier to skip the platform altogether, relying on customer support to execute basic tasks and overwhelming the team with requests that provided no real value. Three full-time staff were dedicated to fielding these queries.
The clunky UI also hurt sales efforts, as associates struggled to demonstrate workflows during demos, and prospective customers often referenced the polished look of newer competitors.Finally, the UI was not designed to scale. Planned features would be impossible to implement cleanly due to the limitations of the existing design, restricting future growth and functionality.
The product had clear UX/UI shortcomings, the stakeholders were engaged, and nothing in the existing UI was sacred. No need to overcomplicate it:
We aligned with the client on three principles:
We began with a full-day, in-person kickoff with c-suite stakeholders to:
• Build rapport
• Fully understand the product and market
• Define goals and requirements
Then followed with shorter calls with Customer Success and Sales teams to fill in tactical knowledge gaps and identify additional pain points & opportunities; And finally a call with Engineering to understand the tech stack and set parameters for collaboration.
We avoided traditional "design thinking" workshop activities, as the goals in this initial phase were broad and clear enough to be accomplished with focused conversation, the application of design best practices, and rapid feedback and iteration.
By the end of discovery, we had clear requirements for our three major workflows: Analysis, Reports, and Explorer (map view).
Full transparency, open communication, and deep collaboration would be critical to achieving our goals efficiently.
We used the following tools:
We set twice-weekly client-reviews, with the understanding that we could ask questions, request feedback, and discuss progress at any time via Slack. Similarly, we would cancel a meeting if it wasn't needed. The point was to block off time for real-time collaboration, not to have meetings for the sake of meetings.
Concurrent with Discovery, we established a clean, professional, familiar look & feel. The intent wasn't to innovate or "have fun with it"; Rather, to eliminate as much UI friction as possible and create a flexible core around which as-yet-undefined future features & products would be built.
We used a simple horizontal blade stack:
The layout was familiar to users while providing a solid template for sequential workflows and the aforementioned flexibility.
In addition to a thorough application of best practices, we worked toward the following principles:
We were able to start making progress immediately. We quickly outlined each key workflow, bulletting out user goals, necessary steps, and data requirements.
We skipped wireframes. Figma allows you to iterate so rapidly that formal wireframes have - in my opinion - become obsolete for design-led teams. I'm sure there's copious thought leadership on both sides of the issue, but that's the approach that's worked best for my teams.
We designed broadly and relied on the stakeholders' willingness to provide near real-time feedback to dial in the final screens. Essentially, an MVP model conducted internally. When each workflow was "good enough", we shared it with CS and a select group of customers, using Figma's built-in prototyping tools; Sometimes for feedback, sometimes just to let them know what was coming.
As views and controls were defined, we added them to the nascent design system. We kept the components flexible and extensible, conscious of the fact that future needs may require moderate or complete reworking of established direction. We also built them to be easily ported to responsive front-end code - e.g., auto layouts, minimal nesting, etc.
With a streamlined process, effective use of collaboration tools, and a laser focus on the client's goals, a team of 2-3 designers was able to drive the redesign and release of a complex, industry-critical data platform in 3 months.
Front-end development wasn't our direct responsibility, but we were able to shape the outcome through heavy collaboration and opinionated design artifacts.
We built a relationship with the Engineering team, frequently consulting them on ongoing design. It was important that they had the opportunity to identify not only potential pitfalls but opportunities for enhancement. We also wanted the process to be as seamless as possible. Instead of the typical design→dev handoff, with its missed details and misunderstandings, we wanted everyone to be plugged in from the start.
To ensure fidelity to the designs, we provided extensive prototypes of specific views and controls. We used Protopie, Animate, and Codepen; Whatever worked to communicate our intent.
Despite our best efforts, some things weren't possible to implement within the Angular framework or our timeline. In those cases, we shared screens and worked until we'd landed on a solution. In those work sessions, there was no strict definition of roles; The goal was to find the best solution, whether that meant adjusting the design or tweaking some code.
The redesigned platform was launched feature complete, on time, and on budget. We had accomplished our stated goals:
With the success of this initial phase, work would continue with a dual focus:
The following released features are also presented in this portfolio:
