Jobs to be done

Make design handoff more efficient in GitLab

Job statement

As a designer or developer working in GitLab, I need a more efficient way to manage design handoffs and gather feedback on mockups, so that my team can collaborate effectively and keep all feedback centralized.

Thought process

We've all been there... Some people still experience issues with it. Figma solved a lot of these issues for the designer <> designer relationship, but developers still worked within editors and pushed code to GitLab.

It made a lot of sense to build this within GitLab, especially for our own teams since we used GitLab for everything. We and our customers wanted a central place where designers could hand off designs, and where all stakeholders could contribute and collaborate.

Asking for mockup comment

Problem statement

Designers and developers often struggle with scattered feedback and unclear handoffs, which can lead to miscommunication, version control issues, and wasted time aligning on final design changes.

Thought process

One of the great memes for designers is having multiple files like Final1.png, Final2.png, FINALFINAL.png. Each time a change is made, it's made for a reason. It's really hard to keep track of the timeline about why something was changed and keep everyone on the same page.

Asking for mockup comment

Desired outcome

The design handoff process is streamlined, allowing all team members to access and contribute to the latest mockups, ensuring that designs are accurately implemented and that everyone can provide targeted feedback.

Thought process

The goal was simple. Make sure everyone's on the same page, has access, can contribute, is not confused, and has all context.

Streamlined process

Solution statement

A Git-based design tool within GitLab issues that allows designers to upload mockups, pin comments, and enable collaborative feedback tracking—resulting in an organized, efficient workflow that maintains version history over time.

Thought process

An obvious solution here was to use industry convention like Figma and Invision (RIP) and be able to upload mockups and comment on them (for context on the comment) within GitLab issues.

For us and our customers, issues is where efforts started. It's where conversation and research findings are discussed, so it made sense that once the problem is hashed out, mockups would happen there too.

Once designs were uploaded and the merge request was ready to be opened, designs were linked to the MR so developers had what they needed to complete that merge request.

Design management UI

Functional job steps

  • Upload the latest mockup directly to the GitLab issue page.
  • Pin specific comments to sections of the mockup for targeted feedback.
  • Gather and review input from team members such as developers and product managers.
  • Track feedback and iterations using Git to maintain a clear version history.
  • Finalize the design with team alignment and hand off clear, actionable assets to developers.

The outcome solved the problems for both GitLab and our customers. We continued to iterate and get feedback. I worked with our Product Manager to do that continuously to help drive the roadmap and our future milestones.

Design management UI