Claudia


Do you know that touch screen in your car? Well, that is an infotainment system. YachtEye is basically the same thing, but for superyachts! The system makes sure you don't get bored onboard or at your destination and keeps you informed.



↓ Discover how



Overview






CONTEXT

Working for SuperYacht Times

2022 - present




​


MAIN DELIVERABLES

High-fidelity prototype of the multi-device ecosystem and its design system.






MY ROLE

In-house solo UX/UI designer.

I collaborated very closely with the company developers and many experts in the yachting industry for brainstorming and feedback.



Background



When I joined the company, YachtEye was already an infotainment system installed on the TVs of the coolest superyachts in the world. I was asked to give it a fresher look, address some issues and add some features.



​



Before the redesign



Why a Radical Redesign?



OUTDATED STYLE AND LACK OF INTERACTIVITY

The old system looked outdated and is too repetitive, the modules were not well integrated.



POTENTIAL TO BE USED MORE

YachtEye was available just onboard on TV and tablet. Opportunity to increase touching points.



DISCOVERABLE FEATURES

A lot of users were not aware of all the possibilities of the system and requested some extras.



​



Discover



REVIEW OF CLIENT FEEDBACK

The amazing sales team of SuperYacht Times collected feedback from clients throughout the year in a Word doc.


Some of the needs that emerged are:

- Guest-specific activities suggested onboard

- More content on what is 'around you'

- Improved usability



​



PROTO-PERSONAS & PERSONAS

To have a better understanding of the sector I collected data from my colleagues who are more in touch with those who use current YachtEye and put together some proto personas for the main users:

1. Owner

2. Guest

3. Chief Stewardess

4. Charter Manager

5. Shipyard


Following this, the tech director and I added some more realistic details and made them into personas.



​



Define



USER JOURNEY

Using the main personas as a character we came up with a story of an owner going on holiday with his family and highlighted all possible touching points with YachtEye.

Spoiler: this story became then a comic we used to promote the product (I'd love to say the illustrations are mine but that'd be a lie, my part was to help make sure the storytelling was right and paginate the comic book).



​



Opportunities



YE PRESENCE

Take the owner back to the system more often (to check the weather, where the yacht is, superyacht popular destinations, etc.), and include more things that change (make it as engaging and entertaining as the stock market).



CONTEXTUAL CONTENT

Provide more “around you” information/inspiration onboard (restaurants, beaches...) to allow flexibility onboard and avoid giving the feeling of being on a cruise. Inform guests of the activities onboard and plans (from destinations to dinner time and menu).



FACILITATE THE CREW

Make the crew save as much time as possible on their tasks by providing content, improving communication between them and the owner and with a user-friendly interface to plan itineraries and so on.



​



Develop



FEATURES BRAINSTORMING AND PRIORITISATION

As a lot of new ideas emerged during the previous steps, I organised an activity for the team in order to prioritise old and new possible features. I chose the matrix in the picture below in order to agree on some quick wins.



​



MULTI-DEVICE ECOSYSTEM

After the features were clarified, it was crucial to define which activity would have been available for what user. I created this infographic to make it easier for the team to visualize the ecosystem and give me feedback on it.



​



WIREFRAMING AND STYLE DEFINITION

While wireframing the TV version and mobile app, I was also already taking some time to gather inspiration for the look of the TV home screen, YachtEye's signature. Brainstorming styles:



​



A STEP BACK

Something was off with this new interface, so I had a long meeting with the creative director at my company to figure out how to better pinpoint the pain point of "nothing is going on in YachtEye".



​



EVENTS AND TRANSITIONS / F SCANNING PATTERN

The outcome of that long meeting was a lo-fi wireframe of the TV home screen and some main app layouts.

When something new is happening "around you" a new event with basic information will appear and open automatically an app with more information, then go back to the home screen when it's not relevant anymore.

This also allowed more structure to the information following an F-shaped pattern.



​



Deliver



FIRST UI VERSION

The fonts were too small for the TV, too dense with information and contrast was lacking in some parts.



​



PROTOTYPE & GETTING THE UI RIGHT

With no possibility to conduct user testing for lack of time, I created a (Figma) prototype and started testing on iPad and TV, with a focus on fonts, button sizes, hierarchy and contrast.



​



UI OUTCOME

Finally here is the outcome of the two screens I used as examples. More screens and details in this article about the launch:

https://www.superyachttimes.com/yacht-news/unveiling-all-new-yachteye-ai


​



MOBILE APP

The app mirrors the TV version.



​



To be continued...



Next steps:

1. Complete design of the mobile app & tablet

2. Usability testing

3. Evolve



Next



Let's do something great together!






claudiasabb.design@gmail.com

BEHANCE
LINKEDIN