Process: UI Slicing

When slicing applies

• Evolution of a component of the service.
• Addition of a new component to the service.

The problem it solves

How do we support the front-end developer in implementing a redesign or a new component, so as to limit misunderstandings, omissions and errors?

Goals:

• make the implementation more intuitive, step by step;
• limit the risk of errors;
• get tickets as atomic as possible, for a better fit in the sprints;
• anticipate implementation problems earlier;
• estimate tickets better thanks to a clearer view of the work to do.

The sequence

1. Slice the implementation into atomic tickets.
2. Produce the mockups that match the implementation, step by step.
3. Add a sticky note with a short description of the change or addition to make.
4. The Product Owner creates the ticket.
5. The Product Owner adds the ticket number on the sticky note.
6. Presentation in refinement.
7. Estimation of the tickets by the engineering team.
8. Follow-up of the implementation.

The format of a board

• A “before / after” (the target version).
• The ticket number, or an empty slot for the Product Owner to fill in.
• One short sentence describing the change made.
• The specifications of new components live on another Figma page.
• The flow of the feature lives on another Figma page.