Mayflower
Autonomous Ship
Project: Designing the Online Experience; Web
Role: UX Designer
Timeline: July ‘20 - September ‘20
My contribution:
From 2019, IBM partnered with Promare, a marine research and exploration company, to debut the Mayflower Autonomous ship.
A first of its kind self-navigating, solar powered unmanned vessel, the Mayflower employs IBM AI technology to navigate and gather fundamental ocean data. And like every groundbreaking technological marvel, the Mayflower needed a digital presence.
Understanding our planet,
through exploring its oceans
The World Oceans cover over 70 percent of the Earth’s surface, contain more than half of all its life and 97 percent of its water. Despite that, we’ve explored less than one tenth of it, less than the surface of the moon.
If we want to protect it, we have to understand it. If we want to understand it, we need more data about it. That’s where the Mayflower comes in.
The role
With 6 weeks until the Mayflower’s maiden voyage, and some initial user research and high-level technical concepts created for the web portal, I was brought on as a UX designer to:
Validate the user segments and research.
Ideate to define the key features of the web portal.
Outline the work roadmap for the 3 sprints until launch day.
Envision and create the detailed design for the online experience.
Curate and/or create content and copy for the site.
Manage the design process and workflow to dev.
Work with stakeholders and third parties to play back progress.
Team onboarding
A small design and dev team was brought onto the project to quickly spin up this 3-sprint MVP.
The first thing I did was arrange a Social Contract and onboarding session to allow us to connect and define roles and ways of working according to our strengths, passions and availability (many of us were brought on part time).
Example of a “Personal User Manual” used to help us understand each other and set out ways of working. Find out more about Khadija here.
Defining success
In addition to setting out our social contract and ways of working, we also defined what success looked like for us:
A digital presence that gave over 90% of visiting users a better understanding of the Mayflower Autonomous Ship and its mission.
A way to allow the public to connect with the Mayflower team for more information.
An overall experience that was enjoyable for over 80% of our audience.
A tool that successfully allowed the public access to key sensor data on board the ship.
Continued ideation
Next we took the following steps:
Set up our design > dev workflow in the form of a lightweight Zeplin + JIRA tooling.
Split the design team two-fold into research and detailed design teams.
The research team validated our user segments and research and connected with the detailed design team to:
Conduct feature ideation sessions to define a final feature set for MVP. These sessions consisted of:
Current design breakdown
We looked at the existing concepts that had been created so far: one single long Home Page.
We broke down what needed to be added, what could be removed, how existing content could improve, and how to break out this single screen into multiple sections.
Big ideas
Based on our research and competitor analysis, what features would have the most impact on our users? What can we achieve in the short and medium term with regards to a digital experience?
Site mapping
Finally, we aggregated our new and reimagined features and broke them out into a site map, arranging them as componentised sections that we could place into a backlog and prioritise.
I then split out the work into our epics, which we assigned across the team in order to make the most efficient use of our limited time and resources.
Working with our scrum master, I set up a backlog in JIRA and systematised our work, to be able to better play back our progress to our stakeholders.
Epic 1 - Reimagined Home page
Our first task saw us breaking out the home page from one continuous scroll into a landing hub with the following sections:
Landing segment
An animated (video-based) landing section from where the user can scroll or navigate through the rest of the site.
Mission portal
An overview of the ship’s current or next mission, which changes dynamically depending on current status, and allows the user to navigate to the sign up section.
Ocean & planet teaser
An introduction to the Mayflower’s oceanographic and environmental significance, prompting the user to navigate to the dedicated The Ocean page.
Technology teaser
An overview of the technology on board the Mayflower, providing a CTA for the user to navigate to the dedicated The Technology page.
News bulletin
A news carousel with the latest updates and news on the Mayflower from across the web, with a link to IBM’s dedicated news room.
Sign up & follow segment
A section allowing our users to stay updated with news on the Mayflower via our newsletter, or follow us on social media.
We also decided on a scroll-snap style navigation, for which I designed each section as ~600px high content, centred vertically in each viewport.
Epic 2 - Social media
Though the initial stakeholder vision was of a “web portal”, taking a step back and looking at our measures of success, we understood that a meaningful solution could be far broader.
In our research and planning I identified 4 primary benefits of social:
Highly updatable and far easier to manage a consistent content stream.
Closer to the average user’s daily technology habits, leading to greater exposure.
Alleviated some of our resource bottlenecks, requiring little to no dev effort.
Made use of our incredible and extensive repository of media assets.
We created a content blueprint along side each of the following 3 social accounts:
MAS on LinkedIn
Updates on news, latest milestones and upcoming events for the Mayflower Autonomous Ship (MAS).
Artie on Twitter
The home of our AI mascot, Artie the octopus. Fun facts, impromptu updates and auto-tweets about the ship’s current status.
The Mayflower Instagram
Media updates in the form of pictures and videos for the ship, plus more about the team.
Epic 3 - Behind the Mayflower
Every great vision has a story behind it, and the Mayflower’s was a fascinating and uplifting one that we couldn’t neglect to tell.
Partly in pursuit of our aim of providing users with a better understanding of MAS, and in part to tell the story of the incredible people behind the ship, we set up additional pages, with the aim of:
Bringing the narrative of why and how the Mayflower came about, to life.
Showcasing the talented individuals who’s drive and vision gave birth to the ship itself.
Providing a platform to present the media content that had been created for MAS.
“Our Story” page intro
Another animated page introduction, from where the user can scroll through the rest of the page.
Video intro to the Mayflower story
An autoplaying video intro to the vision behind the Mayflower and its purpose for existing.
Ocean & planet teaser
A descriptive intro to the original vision of the Mayflower founder, Brett Phaneuf, and the story behind the ship’s conception.
The legacy section
A brief narrative on the Mayflower’s legacy, with a link to relevant blog posts.
Podcast intro
The Mayflower’s first podcast episode, in the form of an in-page audio plug-in.
People behind the Mayflower
Our team section, showing the individuals who worked to being the ship to life, their stories and more info about their role.
Epic 4 - Artie the AI octopus
Meet Artie. Artie is a seven-legged cephalopodial stowaway on board the otherwise unmanned Mayflower Autonomous Ship. He also operates full time as the brains behind our ingenious chatbot.
Powered by IBM Watson and backed by IBM’s data repository and conversational AI, Artie can answer questions about the history of the ship, its mission findings and the technology that makes it all possible. Our team even built in some fun games you can play with him.
I can’t take credit for Artie’s creation or upbringing. His parents were a masterful team of IBMers, including 3D animator and videographer Chris Greco, who put time and love into making him. But I did help to refine his design and better integrate him into the pages of the web portal itself.
The launch
The Mayflower web portal, Artie the chatbot and our social media sites went live alongside the ship’s physical launch on September 18th, 2020, all to a resounding success.
And the results spoke for themselves! We had:
50,000+ visitors to the site on launch day.
Almost 1000 Instagram followers and 700 Twitter followers in under 2 months.
100% of site users reporting a better understanding of the Mayflower ship after visiting.
Over 90% of users reporting finding the site an enjoyable experience.
Wide praise and overwhelmingly positive feedback from the scientific community and the public.
Epilogue - The Uncharted
The Mayflower’s online presence made such an impact that the media and production teams from IBM and Promare produced a full docuseries and podcast series respectively.
As part of this, myself and our two lead devs were commissioned to produce The Uncharted feature page, a place to host both of these series and introduce them to our audience.
I designed a new page with the following features:
Responsive banner + intro section that would adjust to the viewport size of the user’s device.
Embedded trailer for the docuseries, allowing the user to watch the series hosted on Youtube.
Podcast section with embedded links to the series in native Spotify, Google and Apple Podcast apps.
Embedded episodes of the podcast, allowing the user to listen in-site using Spotify’s web API.
You can see more of the Uncharted page here.
Retrospective
What went well
Incredible amount of work covered in a short space of time.
Rapid mobilisation and backlog setup.
Strong user feedback.
Strong feature set in live data feed and chatbot.
Great publicity.
Areas for improvement
Do more original user research, and more user testing. Ultimately I pushed for this but we decided as a team that we would work with what we had in our limited time frame.
Prioritise mobile first. Initially we developed the website with a default responsive html element but this still produced certain bugs or design flaws when viewing in mobile.
Make better use of our huge asset repository. Media assets are incredibly impactful on users and easy to embed!
Set up a more robust content pipeline for our social media platforms, to empower the Mayflower team to publish more content.
Carbon UI (our chosen design system) is more suitable for enterprise software and did not fully cover all of our needs.
Next steps
Outline a full user research and testing phase in order to prioritise a) improvements to the site and b) most wanted new features.
Do a partial site rebuild using Material UI, interchanging Carbon components for Material and reconstructing the container (which caused most of our issues).
Begin design on the weather & IOT segment of the site, which we’ve been commissioned to build!
Bring in full episodes of The Uncharted docuseries, which IBM will allow us to make public in 2021.
Feedback
Jonathan Batty
Head of Content & Storytelling IBM Europe
“Andrew, you have been one of the leading figures in the creation of the MAS400.com portal and I extremely grateful for your involvement.
From the outset you displayed many leadership qualities in the way you engaged with me and our team of volunteers. First and foremost, you brought to the table passion, positive energy and a curiosity to learn about the client and what we are doing. That was infectious for the others.
You showed ownership and took charge of the new UX workstreams by showing initiative and earning the trust of the rest of the team…Ultimately it was your ideas that resulted in such an excellent end product.
You are fast, nimble and proactive in your approach and have a great command of agile tools and methodologies.
You are also honest and diplomatic and helped instil a positive culture amongst our team members. I can definitely see you in a senior leadership role in the future.”