Group 2.png

GitShark

Case study for GitShark, a mobile Git client.

architecture
Product Design
interests
Design Systems
format_paint
Branding
 
GitShark logo
 

Introducing GitShark

GitShark is a Git GUI that lets you manage branches, make and pull commits, clone repositories, and all the other features you’d expect from a desktop class client; except, however, that GitShark is mobile-first.

Branches

Merge

Fork

Pull requests

Stash

Checkout

Unfortunately, due to platform updates and limitations, the project proved to be impossible to build under these constraints, and GitShark has been discontinued.

However, you can still try out our beta release, which should work on devices below Android 12.

 

Research & competition

With GitShark, we took on an enormously ambitious project: How do we cram most Git features you’d find in a desktop environment into a device you can carry in your pocket? What features should we focus on? What features are sure to provide the user with a bad experience and should be cut entirely?

Our first step was to identify our direct competitors. This would allow us to figure out what works and doesn’t work about the goals a Git client should achieve on a mobile device. Unfortunately — or perhaps fortunately — there weren’t many, which gave us a clean slate as to how to think about Git on such constrained proportions.

 

Pocket Git & Working Copy vs. GitShark

The apps we’ve found - on both Android and iOS - had an outdated design, and a lack of accessibility. Touch targets and labels were too small, there were too many options available at any point, app gestures weren’t explained, among other problems. GitShark aimed to fix all of those issues.


All the features you’d want and expect.

  • Access repositories: Add, create or clone remote repositories with a single button press.

  • Sync with all your remotes: Fetch, pull and push from your locals to your remotes.

  • Track file changes: All your files are automatically sent to staging; you don’t have to do a thing.

  • Manage branches and commits: Easily view and create your own branches or commit changes.


Designed for today’s standards.

GitShark uses the Seaside design system to compose its screens, delivering a beautiful experience updated to match what users expect from a modern app.


Information density done right.

When dealing with complex screens and operations, details can sometimes get overwhelming at small sizes, which is why GitShark will prioritize what’s important.

Rest assured, every detail is easily accessible when needed.

 

The bigger, the better.

GitShark scales with different form factors, making use of the extra space to provide more content and enhance your productivity.

Showcase.png

GitShark seamlessly adapts to both small and large screens.

In larger screens — desktop not included — we provide further affordance by increasing the desired touch target and the overall padding of elements. This helps make screens and components more scannable, and help with the lack of precision of tablet interactions.


Animations are a core part of GitShark.

We know animations can totally transform the user experience, which is why GitShark aims to animate interactions with subtle and beautiful transitions.

Staging.gif

Iconography was challenging.

GitShark deals with very complex actions, not easily translated into icons. Things like Fork, Pull Request and Branch were all understood, thanks to standards adopted by several different Git clients. However, things like Rebase, Squash, Cherry-pick were more esoteric, with several different implementations depending on the service used; sometimes, these actions were relegated to text menus, due to the inability to communicate them easily.

GitShark’s icons follow a 2px grid, ensuring they are scalable and legible.

We chose to follow the form of the icons that were already recognizable, and set out to build a cohesive icon set following these same guidelines, adhering to maximum legibility at small sizes.


 

Wrap-up

GitShark was a great project with a lot of potential that was unfortunately cut short due to changes outside of our control.

Using Seaside and figuring out solutions to complex problems was both challenging and an incredible learning experience. Maybe GitShark can make a ressurgence one day.

Thank you for reading!