The Project

Link Logistics

Redesigning the future of real estate investment analytics using geographical data visualizations , intuitive user interfaces, and seamless KPI dashboard integrations.
MacBook mockup

The Company

Link Logistics is a leading owner of last-mile logistics real estate designed to meet the needs of the modern supply chain.

My Role

As one of 2 UX designers on the team my role was to take ownership of the new mapping interface and create first designs for the data visualization and charting branch of the software.

The Problem

Analysts have a wide variety of data points to consider when choosing an investment property. The previous software was unequipped to handle the multiple variable visualizations needed to make informed decisions and suffered from an inconsistent design system.

The Solution

With a background in mathematics I utilized my experience with data visualizations to create user interfaces that matched the complex needs of analysts including multi-layered visualizations, interactive charts, and a new and improved enterprise design system.
My Process

Empathy Driven Design

With every project, I take a position of a learner and listener. I first seek to understand the needs of the business, then begin ideating solutions.

1. Understand the Problem/SoW

Connect with the client and team, understanding where they are coming from, where they are going, and what success looks like.

2. Project Planning

Itemize outcomes and break down initiatives into large segments in order to assess needs and allot proper timing to each priority.

3. Wireframe and Showcase

Ideate basic features and solutions in a low fidelity grey-scale in order to showcase user flows and features.

4. Feedback and Iteration

Receive feedback and dialogue with stakeholders and team members. Integrate feedback and outcomes into design iterations.

5. High Fidelity Prototype and Exhibition

Update approved wireframes to high fidelity mockups and Figma prototypes to showcase software to executive team members and key stakeholders.

6. Design System Integration and Handoff

Upon final approval, use components and design documentation aligned with design system to polish development ready design files.
Step 1

Understand the Problem

Business pain points

iPhone mockup
iPhone mockup
iPhone mockup
Step 2

Project Planning

MoSCoW Analysis

MUST HAVE

- Seamless navigation between mapping and spreadsheet lists
- Multi-variable graphing data visualizations that are clean and easily understood
- Filtering which does not cover screen space

SHOULD HAVE

- Components that are easily developed and integrated into family suite of software applications
- Mapping component for homepage
- KPI integration to help beginner analysts make better informed decisions

COULD HAVE

- Saved filtering
- Collapsable filter menu
- Ai suggested investments
- Graphing software

WON'T HAVE

- Data cleaning capabilities
- Project management capabilites
Step 3

Wireframes and Showcase

Designing in Figma made it easy to create wireframes of new features and layouts and then share with the team for feedback
Figma - Wireframe creation
Figma - Comments and collaboration
Mockup

Partitioned views

In order to solve the problem of changing screen during analysis, we designed a multi-view component interface with the option to switch between Combo, List, or Map view. This not only reduced the number of clicks required to compare geographical location with property data, but drastically reduced the potential for human error while comparing data points since all of the information was now on one screen.
Mockup

Multi-layered visualizations

With my background in mathematics and data visualization I utilized a simple layering strategy to showcase different data sets. We used a combination of shaded regions with colored pins to partition 2 different variables. This doubled the number of unique visualizations an analyst could use during research.
Mockup

UX-based filtering

Instead of having the filters cover most of the map we designed the filtering and main visualization selection interface to live on the side of the content dashboard. This also allowed for user to see live updates while filtering, as well as the additional benefit of keeping the filters open to view data points against current filters.
Mockup

Homepage mapping component (should have)

I designed small, component mapping visualizations that could be added to the homepage when an analyst logs in so they can quickly get a sense of the market.  
Step 4

Feedback and Iteration

There were 2 main ways we collaborated and gave feedback on designs
Figma comments
Bi-weekly team meetings to collaborate and review designs
Dashboard mockup
Feedback

Here's some changes we made based on feedback

Throughout the design process I received a lot of great feedback. I've showcased some of the design changes based on that feedback.
Add the ability to view KPI's in the combo view
Switch between legends for small map component
Notifications for new properties/ updates to properties

KPI integration

With the need for managers help train entry-level analysts the initiatve of KPI integration was born. The goal was to seamlessly integrate KPI's based on business objectives which would auto-populate on insights dashbaord so that entry-level analysts could have a solid idea of the metrics to be paying attention to. Since the list in Combo view was still important, this list would not collapse, but rather be pushed down and available by scrolling.

Legend swap

Desiring to provide additional functionality to the mini-map component the business tasked us with creating an intuitive interface for changing between mapping legends. Below is a high-fidelity example of the business approved designs showcasing different legends where square legend items represent area descriptions, and circles represent pin descriptions.

Listing nofitication

Alerts were then prioritized in order to keep analysts aware of changes within markets they were watching. When logging in, if there were any status or data changes to an existing property, they would be alerted and directed to the appropriate map and list to view changes. If there were any properties relevant to their market, they would also receive an alert and directed to the corresponding list.
Step 5

Prototype and Exhibition

Step 6

Design System integration and handoff

Multiple companies were associated with my client's parent company, so design system integration and clean handoff files were a priority. Using Figma's powerful component system I was able to make large-scale changes using atomic design principles which aligned with the parent companies UI.

Following the Atomic Structure

Following atomic design principles we began by analyzing the current pages, understanding the needs of the systems and then creating high level mockups while creating design tokens and Figma updates to launch large changes throughout the paltform.

Multiple Systems - One Truth

The Challenge
One of the first considerations was how to integrate multiple design systems into one cohesive source of truth. The parent company had, up to this point, allowed for each branch to operate on an individual basis. With the large-scale redesign of our branch, we knew this was the time to create alignment and consistency across the brand.
The Solution
We began by scheduling weekly meetings with the head of design to showcase the system solutions we were creating and receive feedback for steps moving forward. Certain changes were accepted, while others we had to pivot in order to combine the multiple systems. In the end we created a cleaner, more consistent system.
Component Libraries

Small Actions. Large Changes

By utilizing Figma's powerful component feature we were able to make design systems that scaled to allow for system wide updates with 1-2 clicks.
Dev. Handoff

Keeping Files Organized and Handoff Smooth

Knowing that this was going to a clean handoff it was important to have clear labeling of component set, feature documentation, and use cases.

Outcomes

With this being a highly complex project with multiple teams included there was a lot to reflect on and grow from.

Wins

Executive stakeholders were ecstatic over visualizations, especially when it came to multi-layered mapping visualizations
Component based dashboards removed the need for analysts to have multiple tabs open at one time, resolving one of the key pain points given by the business
Unobtrusive filtering provided live, viewable updates to investment oppoortunities.

Growth Opportunites

Structured review approach grounded in a project management system

Next Steps

Accessibility standard were considered duLring the entire design process, but there wasnot a formal accessbility audit. This would be a good next step in maintaing a good and equitable piece of software
User testing was accomplished by team leads, but not pushed out to entry level analysts, so our designs were approved by leadership but we would loved to have had testing sessions to receive feedback from multiple unbiased participants.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to TopResumeAbout MeEmail Me