Shiplog has shipped ⚓️🚢

Introducing Shiplog: a menu bar app to keep track of running deploys on Vercel and Netlify. Check it out & download it from shiplog.app.

A few weeks ago my friend-and-housemate Nils came up with a tiny app to scratch an itch: checking when his remote deployments had finished building. He built the app in record time, and I was excited to design an interface for it. Below I've detailed some of my considerations during the design process.

Screenshot of the Shiplog window on a macOS desktop. The "All Projects" list is showing a number of recent builds.

Interface

Shiplog's defining adjectives are speed and clarity – the one thing it should allow you to do is quickly glance the status of your deploy, and take action if necessary. The deployment's commit message and status are the most specific and important pieces of information, so those are displayed most prominently. Following that is a set of context-dependent buttons, and metadata such as the branch, commit author (useful for teams), and date.

A single deploy with a commit message, branch, and author on the left. On the right, an orange "Building" status is shown, together with a "Details" button.

A single deploy displaying metadata. On the right, a green "Ready" status is shown, together with a "Visit" button and a smaller "Details" button.

For the sidebar, we wanted to give you the option of viewing all deployments ("All Projects") or selecting a specific project to monitor – especially useful for large organisations where stuff gets committed in projects you're not working on.

A screenshot of Shiplog, zoomed in on its sidebar. The "All Projects" item is selected, followed by the projects "portfolio", "todo-app-tryout", and "tech-blog".

The design of the interface was strongly inspired by GitHub and Vercel's minimalist visual style (Shiplog started out with Vercel support only). Additionally, the limited palette made it easy to design light and dark variants simultaneously. The app's sidebar is always displayed in its dark variant.

Shiplog's colour palette, displaying light and dark variants. The backgrounds are white and black respectively, with various shades of grey making up the text and border colours.

Iconography

First of all, the app's interface icons (the branch icon, settings cog, and upwards arrow) are taken from the excellent Feather icon pack. The dock and menu bar icon are a custom design.

Shiplog's working title was Vercelfservice – rather clever, a bit convoluted, and definitely too specific since we wanted to support other services too. After several weeks of thinking Nils came up with Shiplog.

As a first try, I took inspiration from the commit dot-and-line icon and tried anthropomorsizing it by giving it eyes. Pretty cute, and it could easily be modified into a versatile menu bar icon. But the connection to the Shiplog name was too weak and the Tapbots family resemblance a little too strong.

Shiplog's first icon, displaying a circle with a line through it, and two eyes in the middle of the circle. In other variants of the icon, the eyes are replaced with an ellipsis ("Pending"), a checkmark ("Ready"), or an exclamation mark ("Error"). The icons are displayed in black and white variants.

To get closer to the Shiplog name I started thinking of nautical themes and happened upon the anchor. Merging (ha) the hole at the top of the anchor shape with the commit icon's circle turned out pretty great, and after many iterations I landed on the current icon.

A number of iterations on the Shiplog anchor icon.

A proper app is supposed to have a Dock icon too. This was my first attempt ever at a shaded icon displayed at large sizes, and it was quite a journey.

Shading the anchor shape itself took numerous tries (and I'm still not 100% happy), and went from very stark contrasting line-work to subtler shades of light and dark. As a result the perceived "material" of the achor changed from plastic to more of a light metal. The ridge in the final version helps add to that effect.

For the background of the app icon I wanted to strengthen the ocean theme by using the colours of the beach, sea, and sky you'd find on a tropical island. It's definitely a bold colour palette, but I'm pretty satisfied with it. As a final touch I added a grain texture to the "sand", which looks great at large sizes.

Four iterations of the Shiplog dock icon. Version 1 places the icon in the top right of a blue-to-yellow gradient. Version 2 tweaks the gradient to be less harsh and adds shadows to the anchor. Version 3 tweaks the gradient again, and adds a grain texture. Version 4 centres the anchor in the middle of the icon shape, and adds a ridge to the lower part of the anchor.

A close-up of the Shiplog icon's lower half, showing the grain texture embedded in the icon.

The large app icon shows off the details in a great way, but there's no room for those in the tiny monochrome environment of the menu bar. In order to remain legible at small sizes, I tweaked the icon in a few ways – giving it a bigger "eye" and shortening the stem considerably.

A comparison of the full size Shiplog icon and its reduced size: the eye is increased and the stem is shortened.

Finally, one of the most useful features of Shiplog is the fact that its menu bar icon changes if there's a build running. That way you can see if your deployment's finished without even opening the app. For this, I reduced the opacity and added an ellipsis.

A comparison of the Shiplog menu bar icons, in light- and dark mode, displaying its default state and "building" state.

And that's it! Check out Shiplog at shiplog.app. Download it, play with it, and let me and/or Nils know what you think on Twitter.

Shiplog is also open source, so if there's something you would like to change or if you have a great idea to add, you'd be very welcome to contribute to the GitHub repo!