FLIR / Raymarine
·
Nov 2018 - Dec 2019
FLIR / Raymarine
Designing clear states, controls and production assets for Raymarine’s multifunction displays, alongside mobile and web experiences for Fishidy.
Role
Product Designer
Timeline
Nov 2018 - Dec 2019
Team
Raymarine design, engineering and product teams
Platform
Multifunction display / iOS / Web
Overview
Three products, three different design problems
Raymarine makes the displays and systems people use to navigate and control a vessel. During my engagement, Raymarine was part of FLIR; it is now part of Teledyne FLIR. It was a significant engagement with three large bodies of work: I worked with Raymarine's in-house designers, engineers and management on DockSense assisted docking, Digital Switching for onboard controls, and Fishidy's fishing platform. I was responsible for the design deliverables in each strand. For DockSense, the vessel and system states had to read at a glance as conditions changed. Digital Switching needed a coherent family of controls that Raymarine's display software could assemble. Fishidy, a refresh of an existing app, needed connected mobile and web flows across maps, activity and social features. Each called for a different answer, but all three depended on making complex information clear and handing over design that could be built. Much of it was design system work: component libraries, UX flows and a large volume of production assets.
DockSense
Assisted-docking views, system states, alerts and display assets
Digital Switching
Controls and gauges across six states and three appearances
Fishidy
Connected mobile and web flows for a fishing platform
Challenge
Clarity had to hold beyond the mockup
A marine display is read in bright sun, at night and while someone is manoeuvring a boat. DockSense had to distinguish ordinary operation from a warning or a state in which the system could not hold position. Digital Switching moved familiar physical functions into touch controls, within an existing asset-based implementation process. Fishidy had a different challenge: many related journeys across mobile and web needed to feel like one product. Polished screens alone would not solve any of these problems.
What did each product most need to make clear, and how could the screens, controls and assets carry that clarity all the way into implementation?
Approach
Designing the states, then the system around them
DockSense: making changing conditions readable
DockSense helps whoever is at the helm understand what is happening around the vessel while manoeuvring near a dock. I worked on the multifunction display interface and the assets used to build it: vessel and proximity views, alert treatments, and screens for warming up, active operation, shutdown, high wind or tide, and situations where the system could not hold position. Each state had a different message to convey, often in a moment when the operator had little attention to spare.
DockSense on two Raymarine multifunction displays.
DockSense in use at the helm: the display read at a glance while manoeuvring.
I moved from annotated wireframes through visual alternatives to production assets, using contrast, colour and iconography to distinguish normal operation from warnings. The annotated state work matters as much as the final screen: it shows how the interface changes when the conditions around the boat change. DockSense was released, including my design work, and Raymarine’s launch video shows it in use.
Left Annotated wireframe: the thinking behind each element of the display. Right State wireframes, from warming up to shutdown.
Left Exploring vessel states in colour: normal operation against the warning states. Right Exploring the warning treatments: colour and pattern carry the alert when attention is short.
Digital Switching: from physical functions to a family of controls
Digital Switching brought vessel functions that had relied on physical switches onto Raymarine’s displays. I designed dashboard layouts, gauges, icons, navigation and controls for lights, wipers and other onboard systems. The question was broader than how a single control looked. Consistency was the point: someone navigating a boat needs every control to read and behave the same way, so its state had to be recognisable wherever it appeared, in different lighting and alongside many other controls.
Digital Switching on the displays: physical switches become on-screen controls.
I developed a component family covering on, off, pressed, unavailable, tripped and fault states, with light, dark and night appearances. The early gauge exploration borrowed from premium automotive instrumentation. After reviewing it with the team, we moved towards a more restrained direction suited to the product. Comparing them helped us choose a treatment that fitted the product rather than simply favouring the most elaborate gauge.
Left One control across its states, dark appearance. Right The same control in light, across every state.
The delivery format shaped the design. Raymarine’s display software assembled interface graphics from layered assets, so I built precisely aligned gauge artwork in Sketch, used plugins to place dense tick marks with the accuracy and consistency the gauges needed, and exported layers with cutouts for live indicators. That let engineering assemble the controls within the pipeline it had. Digital Switching was released, including my design work.
Left Colour guide across dark, light and night appearances. Right Gauge artwork built as layered assets with cutouts for live indicators.
An early exploration: the premium-automotive gauge direction.
Left The restrained direction the team moved to, by day. Right The same dial in night mode, red on black.
Fishidy: connecting a much broader set of journeys
Fishidy, a refresh of an existing app, was a different product problem. Its fishing experience spanned maps, activity, profiles, messaging and account controls across mobile and web. I worked through the flows from wireframes to detailed UI, looking at how someone moved between finding a place, seeing activity and using the social features rather than polishing those screens as separate destinations.
I developed shared navigation, icon and component treatments to give those journeys a consistent language. That shared language is what made a broad set of features feel like one product. The redesigned Fishidy app was released on iOS.
Left Fishidy across mobile and web. Right Wireframes to finished map and activity screens.
Design that could leave the design file
Underneath all three strands was a large body of design system work: component libraries, UX flows and a very large volume of production assets built for implementation. I worked with Raymarine’s design and engineering teams to make that handover usable: explicit system states for DockSense, repeatable control variants for Digital Switching, and connected flows and components for Fishidy. Those deliverables made the design legible beyond a single presentation screen and gave each team a practical basis for implementation.
Outcome
Released work across displays and mobile
All three strands reached released products. DockSense and Digital Switching appeared in Raymarine's multifunction display offering, and the Fishidy redesign reached its iOS app. The work ranged from state diagrams and detailed interface design to reusable controls, layered production assets and connected mobile flows. Throughout, the design had to communicate clearly in use and make sense within the implementation tools the team already had.
DockSense states
Vessel, proximity and warning views carried from annotated exploration into display assets.
Digital controls
A consistent family of controls and gauges covering six states in light, dark and night appearances.
Fishidy journeys
Mobile and web flows for onboarding, maps, activity, profiles and messaging, brought into a shared UI language.
Buildable handover
Precisely aligned, layered artwork designed for Raymarine's existing display pipeline.
Status
Released: DockSense, Digital Switching and Fishidy
Released: DockSense, Digital Switching and Fishidy
View DockSense →
Reflection
Agree the direction before refining the detail
The early Digital Switching gauges explored a premium automotive feel. Raymarine had asked for exploration, a new direction for its controls, and the team responded well to the craft; but having seen it, they chose a simpler update of what they already offered. The ambition hadn't been pinned down at the start, and at that stage in my career I could have questioned the scope harder. It's why I set up visual exploration the way I do now: agree the intended ambition, product fit and implementation criteria early, then use detailed design to test a direction against them. It makes the eventual decision clearer and the work that follows more useful.
