Layout Architecture Redesign
Overview
UtilizeCore is a SaaS platform dedicated to optimizing service operations management. It enables users to build robust service networks while automating processes such as work orders, trips, invoices, scheduled services, and asset management.
When I joined, the company was undertaking a major initiative to redesign the platform, aiming to enhance automation capabilities and transition to a modern coding environment. A key focus of this initiative was improving the network functionality, which included significant enhancements to the Sites product.
To achieve these improvements, it was essential to thoughtfully design the platform's layout, ensuring it provided clear direction and a strong foundation for future design iterations.
My Role
Partnered closely with Product Managers to define key business requirements and align on overarching project goals.
Conducted in-depth internal and external research to drive informed design decisions and enhance user outcomes.
Designed and tested user-centric mockups to validate usability and refine concepts based on feedback.
Developed detailed user flows to clearly illustrate page interactions and provide guidance for developer implementation.
Defined a Minimum Viable Product (MVP) strategy to effectively address critical user needs while ensuring scalability.
Collaborated daily with developers to ensure seamless handoffs and accurate implementation of design specifications.
Led User Acceptance Testing (UAT) and Quality Assurance (QA) processes to verify alignment with design goals and requirements.
Coordinated with cross-functional product teams to drive alignment and encourage adoption of unified design flows.
Established platform-wide design systems to maintain consistency and scalability across all product interfaces.
Mentored junior designers, offering guidance on workflows and fostering a collaborative, feedback-oriented environment.
Organized and facilitated weekly design and product meetings to align stakeholders on project vision and direction.
Discovery and Research
Before starting this project, it was essential to identify user needs and determine the approach for the new Sites Page design. Below are the key methods and insights that shaped our MVP strategy:
Audit of Current Experience: Collaborated with Product Managers and Customer Success teams to thoroughly review the existing experience, identifying key use cases and pinpointing areas for improvement. Determined the lack of consitency, confusing pages, and disjointed flows made adoption of the product difficult.
Company Direction: Collaborated with cross-functional teams to align on company goals and strategic priorities. The adoption of the new Vue.js platform enabled faster design iterations, necessitating an adaptable layout that could scale across different pages.
User Interviews: Engaged with key customers in the snow plowing industry to uncover their needs for the platform. Users desired a centralized hub for resource management, integrating features such as Work Orders, Trips, Upcoming Weather Events, and Invoices (Receivable and Payable).
Internal Data Collection: Partnered with the data team to analyze user behavior. Discovered that 70% of Work Orders during snowstorms were created in bulk from the Sites Page. This insight led to the incorporation of bulk actions and a plan to incorporate a map view.
External Research: Studied best practices from other project management tools to understand effective layout and functionality. Simplicity in connecting various platform areas emerged as a key takeaway.
Competitive Analysis: Drew inspiration from tools like Jira, Coda, and Monday.com, identifying the benefits of a multi-panel layout to display multiple pieces of information simultaneously.
User Personas: Developed user persona cards to highlight key user flows and pain points, providing actionable insights into design decisions. Found that most users were interacting with trips within a flow.
Site Map: Created a comprehensive site map of the existing layout to identify navigation challenges. Discovered that several critical pages were buried, impacting user access and workflow efficiency.
Priority Hierarchy Matrix: Collaborated with stakeholders to prioritize focus areas for the MVP, ensuring alignment on the most impactful elements to address first. Determined. that the addition of a trips page and combining resources onto a single page were required in the first MVP release.
Layout MVP
The Utilize Core layout faced significant challenges, including inconsistency across the user flow and critical flaws in UX design. Additionally, the platform lacked mobile-friendly designs, preventing it from being ported to mobile devices. To address these issues, I developed an MVP design that tackled the following areas:
Design System: Created an improved design system incorporating well-defined patterns, styles, and rules. These modular components were designed for consistency across the platform and could be easily reused by other teams.
Flowcharts: Created detailed flowcharts for each major user flow, clearly illustrating the system architecture to streamline developer handoff.
Consistency: Established uniform design approaches for different pages, ensuring data presentation and user flows felt cohesive. This enhanced user trust and aligned with their expectations.
Table Improvements:
Developed actionable tables that allowed users to perform key tasks essential to their workflows.
Designed an ideal future state for tables with enhanced sorting capabilities, horizontal scrolling, customizable data sets, and filtering options, enabling easier data scanning and interaction.
Single-Page Flows: Implemented single-page flows, allowing users to delve deeper into specific table data to analyze and take actions without losing their place. This increased user efficiency and streamlined workflows.
Trips Page Addition: Through user research, identified the need for a Trips Page to better structure the platform. This addition improved the platform's usability and overall understandability.
Actionable Items: Addressed a critical gap in workflow completion by introducing action buttons. These worked seamlessly with filters to direct users to high-priority items requiring immediate attention.
Profile Structure: Redesigned the user profile view to incorporate reusable table components from other pages. This approach ensured consistency across the platform and simplified resource management.
Updated Components: Designed new components, including modals, pop-overs, dropdowns, and selectors, to align with the updated design system. In addition, I worked on bulk workflow options which are represent the major business advantage we have in the market
Feedback
The layout redesign involved gathering feedback from customer success agents and users. While the designs addressed key pain points, adoption concerns arose due to significant changes.
To ease the transition, we created tutorials and articles to explain improvements and workflows. Testing in a pre-staging environment with customers revealed enthusiasm for the modern interface and streamlined workflows but highlighted the need for customizable table options.
We planned iterative updates, including table customization, and communicated this approach to build trust. The restructuring was a strong start, with clear communication critical for adoption.
Future iterations
With the core layout redesign in place, the next step was to plan for future enhancements based on insights from user feedback and business objectives. Below are additional designs and plans I contributed to, addressing user needs and strategic goals:
Map Integration: Map For major customers relying on the platform’s map view to plan work orders around storms, maintaining easy access to the map was critical. While the initial redesign didn’t move the map, the MVP layout reserved a dedicated and accessible space for it within relevant workflows, ensuring a seamless user experience.
Chat Functionality: As Utilize Core evolves from a data management platform to a transcommunication solution, I helped design and plan a cross-platform chat feature. This would simplify user communication and encourage mobile app adoption, particularly among subcontractors.
Menu Redesign: To streamline navigation, the menu redesign was deferred from the first release. The goal is to structure navigation around user personas, enabling quicker access to key areas. This update will also reduce cognitive load and incorporate a mobile-first approach to enhance usability across devices.
Design System Overhaul: The existing design system relied too heavily on primary colors, creating usability challenges and reducing clarity. Spacing issues and inconsistencies with developers further complicated alignment with the brand. I began redesigning the system with a lead developer to improve spacing, hierarchy, and handoff through Storybook integration. Although this project was temporarily deprioritized, it remains a critical long-term goal.
