roboat.org — a place to share a 5 years research project on autonomous boats
Roboat is a 5 year research project developing the world's first fleet of autonomous floating vessels for the city of Amsterdam. It investigates the potential of self-driving technology to change our cities and their waterways.
More than 20 people from various fields (robotics, urban planning, design, etc.) living on two continents are producing groundbreaking research to develop the project. From technical innovations to urban studies the project needed a place to gather and share all the research and its results. Roboat.org is that place.
designing the website architecture
We designed the website with multiple users in mind. - the Roboat team: interested in sharing content and discovering the work of others. - General audience and press: curious about the project, looking for precise information and visual material. - Other researchers: interested in finding data and links to the published papers, or in joining the team. - Future roboat team: looking to easily update the website with new content.
Based on our users, we established the two main constraints of the website: able to aggregate very diverse information in a simple and coherent system, and based on a visual and technical system that can be updated frequently with basic code knowledge.
We started by listing and sorting every piece of information that should appear on the website. From the list we built several chapters and started exploring visual solutions for each of them. The first decision was to gather all the chapters and most of the content in one landing page.
In the first wireframe (video above) each chapter had its own architecture, creating a scrollable typology of interfaces. For example, we designed a simple text and image composition for the use cases chapter, an exploded view of the boat with text showing in parallax while scrolling for the technical details and a system of cards with horizontal scroll for the press section.
We were trying to optimize the interface for each chapter instead of thinking of the overall website. We lost the general coherence of the system and created a very long webpage to scroll.
This was a big issue as we wanted the website to be scannable quickly by everyone looking for a precise piece of information. Based on that new constraint we went back to our typologies of interfaces and one seemed better than the others: the card UI.
To avoid a very long webpage to scroll we also came up with the idea of a vertical menu on the left border of the screen, hovering the page to allow the user to easily jump to every chapter as well as showing his/her current location on the webpage.
developing the flipping card interface
The main design challenge was to display a lot of content in a clear succint measure. The card interface appeared to be our best option. We started to design and code several card proposals. One could be extended vertically on click to have freedom with the text lengh, another one was fixed with the upper half showing a picture and the bottom half containing the title, and the last one could flip like a physical card. The first one had some serious implication in the website layout (how should the webpage react to card folding and unfolding?). The second one wasn’t giving enough space to write anything interesting.
So we choose the third card design, with one side showing a bold image in the full height and width with a title and the other side showing text and a link if needed. We tested different proportions at the webpage scale. We designed a nice flipping animation and tested it with our real text and images. It was definitely our best option so we started designing all the website's chapters based on the card design.
refining the UI
Designing with real content means often deciding where to limit that content. Based on the ideal card width we decided to display 3 cards maximum at the time, leaving large vertical between each chapter. Most of the chapters needed more than 3 cards so we created a navigation system based on arrows that could help navigate between cards batches and small dots indicating location between card batches. As 9 cards by chapter seemed enough, we purposely limited the card batches to 3.
While working on the architecture of the website, we defined precisely the visual identity of the project. It already had a logo, a headline font and a general color. We tested and picked Roboto, a serious and technic text font to match and contrast with Dosis, the playful headline font used since the start of the project. We spent time testing different orange hues to finally settle on a bold dynamic one, contrasting strongly with a 100% black text and a 100% white background.
As we were replacing our fake content with real text and images on the cards we realized that adding a title over an image is easy when you get to choose the image and the title color. Automatizing it meant defining light and dark cards, with black and white font over the image.
We designed and tested several iterations of the vertical left side menu. We tried different font sizes, colors and opacity as well as different scroll animation. The final one really facilitates navigation and scroll in the page while giving it a very clean look.
Roboat design system
Once roboat.org was fully designed I started working on a couple of other subdomain webpages. To do so I worked on a graphic system that could adapt to various content, without using the card interface. I designed a simple page for an augmented reality app, displaying download links. I redefined the page header, with a smaller logo, and a subtitle next to the roboat logo.
The second subdomain was the data.roboat.org, a dashboard to access water quality data. The dashboard was built on a template and my mission was to adapt the UI to fit the roboat graphic system.
I started with the same 3 column grid as in roboat.org landing page. Instead of using cards, I split the page in two main blocks, a smaller one on the left side displaying everything related to deployments and a larger one on the right side containing the visualization. A standard horizontal top menu allows to navigate between each part of the dashboard.
The main challenge was to create a clear hierarchy of information while keeping some of the elements of the template (tables, charts, visualizations). I reorganized everything spatially using menus and nested submenus with a coherent visual language to display only the information needed. Roboat.org graphic system served to define the font families and sizes, using Roboto for all the texts and Dosis for some call to action buttons. We compared the result with the template based dashboard and shared it with the team for feedbacks.
WHAT I LEARNED
The most interesting part in the project design was definitely its modularity. It was the first time for me to design a webpage that several people needed to update easily. We choose to not use a CMS to allow more interface experimentations. But we designed everything with the code modularity in mind. I do update that website regularly and easily, and thank all the team for that each time.
It was also very rewarding to see all of 2 years' research in one place. I am happy to see the research project evolving and the website following it in a seamless way.