Preface: Meet the Sailors
My Role
I have driven the design system and visual design effort for the last 3 years.
Chapter 1: Rough Seas
The Problem
The boating world is fragmented and tedious for boaters. We were approached to design a digital product that eases the tensions of a frustrated boating community.
Brunswick, a world-class leader in the Marine industry, owns iconic brands such as Mercury Engines, Bay Liner, and Sea Ray. These brands house a variety of technology and onboard systems requiring multiple apps for planning, monitoring, and controlling your onboard systems.
User Needs:
• Boaters are frustrated, fumbling through various touch-points in their boat ownership journey. This is ultimately giving a poor reflection of the brands Brunswick owns, (e.g. Sea Ray).
Business Needs:
• Use Sea Ray as a the design foundation of a one-stop digital product for all boating needs: an app with everything a boater would need for a successful trip of any length.
• Bring the Sea Ray brand into the 21st century with this new digital companion app for both new and veteran boaters.
I worked from a key user persona.
In order to navigate the complexity of this very technical landscape, we needed to understand the deep world of boating culture, and empathize with boaters of all varieties. I was grateful to be able to reference a persona drawn by our UX director.
I wireframed some key screens.
There were a number of content and navigation requirements yet to be decided, so we had to start minimally. I worked through screen concepts with a rough story guide, (part of it as an example below).
With feedback and access to content, I began to work visually.
Later on, we got a crash course on how to read complex boat data, and needed to incorporate boat alerts, which would be key for users to troubleshoot issues in real time — a critical problem on the business end.
While the first pass leveraged a great start visually, the brand scalability was somewhat limited. I collaborated with the content team, applying design feedback from stakeholders to include more Sea Ray imagery. This enabled us to sell the concept to both users and the C level executives.
I envisioned the ability for boaters to get live help on their boat. This would be a fantastic resource for new boaters, something highly requested in Brunswick's user interviews.
I iterated at the highest fidelity to meet a tight deadline.
"Rapid" doesn't even begin to describe the pace we worked. With an extremely aggressive timeline, we were now limited to iterating ONLY at highest fidelity. These designs below were the foundation of the future Sea Ray app, presented in a slide deck format as part of a larger story.
My wrists were in pain, but we finally had our north star! Design sprints started immediately.
In all, we landed the client, got stakeholder buy in, and secured a large budget for what would become a 3 year roller coaster.
Our design vision opened the doors for Brunswick to acquire new brands, and granted us access to technologies we could now leverage in the real product.
Chapter 2: Plotting a Course
The Solution
We were working "fast," but not efficiently.
The solution was clear: a scalable, component-based, and brand-agnostic design system.
I presented the idea to our stakeholders and got buy in. I was asked in turn to design high fidelity components to sell the system to new brands Brunswick planned to acquire. I took on a junior designer to guide and get help with the workload, and we got to work.
We started with the foundations, of course. These feed our "Components," which in turn feed our "Patterns." We call it the "Core" design library. This brand-agnostic system could be changed at will for every new Brunswick brand.
In a design system without tokens, nesting elements becomes critical.
Every single element, down to the smallest icon is nested in a modular system — yes, everything.
Customizable "Glances" truly create a digital dashboard of your vessel. Tapping a glance takes you to a detailed view.
Check the local weather over in the dock your boat is in, gauge your battery and fuel levels, start the fridge up, and warm up your cabin heater before you even step on board.
While you're on board, get notified for prominent engine alerts, track the path of your adventure, add photos to remember it, and even add your own points of interest along the way for longer treks at sea.
Weather knowledge when boating is crucial, and time is of the essence. We needed it in the app.
When out in open water, there may not be anything more critical than the weather forecast and water conditions. We saw a glaring opportunity to fill this gap in the market.
I curated, edited, and designed our weather backgrounds, in a standardized, templated system for others to work with. I designed them to work in both a tiled and full screen format. Each weather condition, along with its night time counterpart, has a corresponding icon to be placed in glances.
Our weather forecasts needed to wrangle information as detailed as the Weather Channel.
I collaborated with both hardware and software engineers using tools like Miro to make an adaptable design.
We faced a number of technical challenges. I had to adapt by leaning into our modular design direction and expect things would need to be shifted around as features were worked out. When new technology became available, design was already prepared for it. Competitive analyses helped here.
Epilogue: Smooth Sailing
The Outcome
Our brand-agnostic "Core" design system is fully functioning and in use as we speak.
Sea Ray owners today are now taps away from their vessel systems and more. From monitoring battery levels to cataloguing a trip’s memorable moments, it's all there in the one-stop-shop we envisioned years ago. What a journey it's been.
Brunswick, housing brands of luxury yachts to fishing boats, now has a platform that can be easily adapted to reflect the aesthetic and marketing goals for each market — we've even began to expand into the RV and Mobile home space. Rest assured, our Core design system is well up to the task.
