Front End Stack
Vue - Modern frameworks are modular, reactive, and fast. I knew we would select one of the top three reactive frameworks (React, Vue, Angular) for these projects and chose Vue as I felt it provided the best combination of performance, community support, and developer experience despite being a relatively new technology at the time.
Typescript - One major downfall of JavaScript is it's loose type definitions. While this isn't normally problematic on small projects, at scale it can lead to a lot of unnecessary confusion and poor documentation. Typescript adds a layer of maturity to the language.
Node.js - For our server side processing, we leaned heavily on our backend teams API, but leveraged some JS server side processing at times as well as some Express proxy servers for translating some data shapes for specific integration use cases.
SONAR / SCI
SONAR and SCI are industry leading SaaS platforms for the logistics industry. These are business intelligence and analytics services helping business managers and owners get a pulse on the industry and benchmark themselves against their peers.
Intel is only actionable with context. Part of the user experience was to provide prescriptive actions that aligned with data we presented. I wanted not only to present users with insightful analytics, but to help them understand what actions should be taken to make these insights immediately impactful to their business.
Prescriptive actions and insights
Business Goals
Create tools tailored to the users role
This software caters to a broad spectrum of user profiles. No two roles use these tools the same way. I sought to create a toolkit that adapted to the demands of these user roles and present information dynamically to provide context from the correct perspective, that of the business role the active user filled.
Provide a pulse for the industry and competitive analysis within peer groups
My goal was to provide real time analytics and present users with a high level overview of the transportation industry. I wanted to show global, national, regional, and local trends in markets and then allow users to benchmark their KPI's against peers competing in those same markets.
I needed to support quite complex functionality for this platform. Helping our users navigate around and find the best tool for a given job was a challenge. I wanted users to be able to access any tool, any information, from any data set in 3 actions or less.
To accomplish this, I drew inspiration from modern mobile operating systems. For each task a user would be working on, there was an "app for that". I chose to group similar apps together within the navigation as you would with app folders on your phone. These app groups represented roles a user might have within the company.
Brokers, shippers, and carriers could access the apps that helped them perform the functions of their jobs in a central location. They could swap between tasks and data with ease and move rapidly to identify actionable information and maintain a competitive edge amongst their peers.
User Flow
I had a lot of usability to pack in to this platform. Displaying content in a way that was digestible for users was a challenge. I leveraged key color placement and composition principles to guide the users eye around the page and follow data presentations by order of significance.
Streamlining Complexity
Unique Challenges
Dynamic user context
Creating an interface that adapted to the role of users was fun to tackle. I leaned on the methodology of progressive enhancement in a unique way. Rather than acting as a simple placeholder for content, it allowed us to slot components based on user entitlements and develop fully adaptive interfaces.
Performance at scale
This platform processes and delivers massive data sets. I needed to handle volume at speed. I spent much of our time planning out caching and content delivery strategies to ensure peak performance under even the most straining circumstances.
My role as Director of Design, UX, and Software Engineering was widespread. I was a founding engineer at FreightWaves and helped build out both our internal Engineering, Design, and Product teams. I was fortunate to have had the chance to help shape and manage those teams along the way.
While building out our teams I created the initial design system for the product, designed and wrote the front end architecture and UI for the application, coordinated with the backend engineers to plan our data integrations and schemas, and worked closely with our Data Science team to product custom D3 data visualizations throughout our product suite.
I defined our processes and procedures for further developing our style guide, component library, and design language to ensure a clear and consistent user interface and user experience.
I helped organize and then implemented our project management workflow, product strategy, and analytics strategy.
Finally, I planned and orchestrated our efforts in re-architecting and optimized legacy systems and prototyped R&D projects within the company.
My role
One problem I encountered came from the silo's we created in our team structures. Breaking groups in to specialized teams works to some extent but in some ways it can hinder collaboration. Less specialized teams and more diversity within teams seemed to work better for our situation.
More teamwork, less teams
What I learned
Ideas come from everywhere
I found a lot of unexpected inspiration and fresh perspectives came from talking with people who had little exposure to specific processes or features. Echo chambers are easily produced by teams that work closely together day after day. Breaking out of that mold by opening up our meetings to other teams was very beneficial to us.
Let experts be experts
I began to see too many cooks in the kitchen at times. This created situations in which we accidentally overlooked the advice and guidance of more experienced team members. Being aware of this and identifying moments where real expert opinions were presented helped us better navigate periods where we were making challenging or highly debated decisions.