Pinpoint Works
A superyacht platform for managing live worklists that helps yacht staff, accountants, and shipyards work effectively together.
Update: Pinpoint Works was successfully acquired by Voly Group, a testament to the platform's success and the value delivered through this comprehensive redesign and feature development project.
The Problem
1. Lacking Consistency
The existing platform suffered from inconsistent components and design patterns, creating a confusing user experience and making development and maintenance difficult.
2. Missing Powerful Features
The platform lacked advanced functionality needed by yacht staff, accountants, and shipyards to effectively manage complex worklists and collaborate efficiently.
Opportunity
How might we unify the app whilst delivering major features?
Goals
FragmentedUnified
Create a single source of truth in Figma that matched the codebase. This unified design system ensures consistency across all components, eliminates design debt, and provides a scalable foundation for future development whilst maintaining visual harmony throughout the platform.
MinimalisticFull-featured
Implement features to enhance the software to enable powerful results for the user. Transform the platform from basic functionality to a comprehensive toolset that empowers yacht staff, accountants, and shipyards with advanced capabilities for data analysis, security, and workflow optimisation.
Design System
A comprehensive design system was created to unify the fragmented visual elements and establish consistency across the entire platform. Developed alongside feature delivery over the span of 6 months, this approach ensured the design system would not impact the feature roadmap whilst adding significant value to the dev ops team as a whole.
Colour Palette Unification
The platform suffered from a chaotic colour system with 50 shades of grey (pun intended) scattered throughout the interface. This was unified into a systematic naming convention with primary-600, primary-500, etc., creating visual harmony and reducing cognitive load for users.
Typography System
Font sizes were inconsistent with 10 different sizes being used randomly across the platform. This was streamlined into a sleek typography system spanning from H1 headings to paragraph text, ensuring readability and visual hierarchy.
8px Grid System
Spacing was completely inconsistent throughout the application. The design system introduced an 8px grid system that unified all spacing, padding, and margins, creating a clean and organised layout structure.
Component Documentation
All components were thoroughly documented in Figma, creating a single source of truth that matched the codebase. This ensured consistency between design and development, reducing design debt and enabling faster iteration cycles.
Results
The implementation of the unified design system delivered measurable improvements across development efficiency and quality assurance.
2x Faster Dev Time
The unified design system and component library enabled our team to deliver twice the amount of story points per sprint. Consistent patterns and pre-built components reduced development overhead, allowing us to ship more features and improvements in less time.
Halved QA Responsibility
Visual bugs became rare with the standardised design system, reducing QA workload by 50% and allowing the team to focus on functional testing rather than visual inconsistencies.
The Feature Design Process
Our feature development process followed a structured approach to ensure every feature was carefully considered and executed with precision, whilst maintaining the unified design system.
In the Discovery stage, Pinpoint Works' Concierge Service, overseen by our Account Management team, directly engages with users. This direct interaction enables us to swiftly capture user needs, adding them to a backlog for development. As part of the development team, we use this backlog to efficiently filter and prioritise user requirements, ensuring our focus on the most impactful features for our users.
We discovered allowing custom solutions was essential to each individual shipyards extremely different workflows.
Feature requests and engagement in our feedback pipeline.
During the refinement process we focused on understanding key user needs, crafting a seamless workflow. Close collaboration with Account Managers, revisiting wireframes iteratively, ensured precision. This iterative approach aligned proposed solutions with user needs, resulting in a product that exceeded expectations.
As a team we achieved a
in project scope changes
As lead designer, I embedded myself in the development team, attending every stand-up and retrospective. I created comprehensive documentation, produced Loom videos where I talked through user flows while recording my screen, and built sophisticated Figma prototypes with micro-interactions and animations. This hands-on approach ensured precise translation from design vision to working software.
The deliver phase focused on final implementation and quality assurance. Features were thoroughly tested and refined before release, ensuring they met both functional requirements and design system standards.
Features Delivered
Key features that were successfully delivered to streamline yacht management and improve stakeholder collaboration.
User Management
Comprehensive user management system with role-based access control, user permissions, and team collaboration features. Administrators can easily manage user accounts, assign roles, and monitor platform usage across yacht staff, accountants, and shipyards.
Two-Factor Authentication (2FA)
Enhance the security of your Pinpoint Works account with Two-Factor Authentication (2FA). By adding an extra layer of protection, 2FA ensures that only authorised users can access critical data, providing peace of mind and safeguarding against potential security threats.
Multi-Grouping
Elevate your data analysis with Multi-Grouping. Organise and view data across multiple dimensions, unlocking deeper insights and improving decision-making. With the ability to group and categorise information flexibly, you gain a comprehensive understanding of your assets, enhancing overall data visualisation.
Saved Views
Tailor your Pinpoint Works experience with Saved Views. Create personalised views that align with your specific needs, streamlining your workflow and ensuring quick access to the information that matters most. Say goodbye to repetitive setup tasks and welcome a more efficient and customised user interface.
Advanced Filtering
Dive into powerful data analysis with Advanced Filtering. Pinpoint Works' robust filtering options allow you to precisely control and manipulate data, making it easier to extract meaningful insights. Navigate and explore your data with ease, unleashing the full potential of your asset management capabilities through comprehensive filtering tools.
Formulas
Empower your data analysis with Pinpoint Works' Formulas feature. Perform calculations directly within the platform, eliminating the need for external tools. Whether it's financial metrics, performance indicators, or custom calculations, this feature adds a layer of analytical depth, providing a comprehensive toolset for data-driven decision-making.
Impact
- Unsolicited client feedback: Clients reached out directly to express how the new design exceeded their expectations and improved their daily workflows.
- 25% Decrease in Support Tickets: Streamlined workflows and clearer interfaces led to a noticeable reduction in user support requests.
- Improved Team Collaboration: The new design system fostered better collaboration between designers and developers, increasing development speed and boosting team morale and enjoyment.
- Unified Design Language: Established a consistent and cohesive design language across multiple platforms, ensuring a seamless user experience and strong brand identity at every touchpoint.