Preface: Meet the Sailors
My Role
I drove the design system and
visual design effort for a year.
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.