Problem validation: Upgrade the Review App and the MR to include original Designs as a reference
Problem Statement
When a Designer hands off to an engineering, it is a messy and frustrating process to find and communicate about visual bugs or being code complete during an MR. How can we make it effortless for developers to adhere to the design specs, to avoid lengthy design reviews?
Interviews
Data
- Don not have solid object level data but working on it: create-stage#12618 (closed)
Solution validation issues
As we work through the canvas and the feedback, the MVC so far has three actionable solutions to design and validate:
These interviews resulted in the following MVC feature proposals:
- Designs in Browser Extension: #199760 (closed)
- Designs in the MR: #199758 (closed)
- Designs in the Review App: #198092
- Designers attach comments to DOM elements in the Review App - Visual review feature: #216148 (closed)
User workflow feedback from Interviews
Workflow 1) Developer handoff from issue
This workflow gives context to the start of developer handoff
- Designer adds Design to Issue or embeds in Issue Description
- Commenting back and forth
- Design handoff files may be posted like links to prototypes
- SSOT Design is finalized by the engineers to start the work
- (Some Designers exit here and don't see much progress until the code is live)
Workflow 2) Designer/Developer collaboration through the MR to production
Next, there is a different collaboration/handoff that happens during the final stages of an MR being ready to go live. The back and forth is tedious and not easily tracked.
- Engineer opens the MR and begins to code
- Designer is @ mentioned when often later in the game or when the code is done or may be forgotten
- Engineer takes screenshots of their local environment and posts them as comments for the Designer
- Designer gives feedback and the screenshot responses continue until it is verified to be correct
- To verify that the visual design is correct, the Designer has to:
- Open the issue in a new window
- Find the design in the issue
- Download or view the screenshot at 100%
- Open Sketch or use their browser to side-by-side or overlay the Design to check
- Mark up the screenshot with a point of feedback if necessary
- Generate a new screenshot
- Post that back to the Engineer with the comment
- To verify that the visual design is correct, the Designer has to:
- Designer looks at Screenshots of each comment showing them how this was implemented
- They comment back and forth via screenshots
Opportunity: Live Design Inspect in the MR and Review App
At GitLab, we believe we have a huge opportunity to bridge the gap between Design and Engineering by including Designs for inspection in the MR Review App.
No other design tools have the engineers and the repository to allow for collaborative and interactive commenting on live production apps while viewing the original designs that were attached to the Issue.
Opportunity Canvas
Canvas working title: "Upgrade the Review App and the MR to include original Designs for communication and Live Inspect."
JTBD user stories
[When] I post a Design to an Issue [I want] it to be available to the GitLab Review App during MR [so that] I can use it to inspect and review what the frontend engineer built.
[When] I review a responsive Design [I want] it to be available to the GitLab Review App during MR [so that] I can use it to inspect and review what the frontend engineer built.
Pain points from interviews
Other problems with it:
- When checking live code, often the actual interactions that occur are not obvious until you try it.
Reach
Impact
3.0 = Massive impact on frontend handoff and differentiator from all other "static handoff tools"
Confidence
100% = High confidence