Skip to content

✨ Beautifying our UI (15.0) ✨

Every milestone, we will ask Product Designers and Engineers to volunteer to partner in making self-directed usability improvements. It is an opportunity to fix the things that have been bugging you or that you've heard from users without worrying about prioritization.

  • Self-Directed: There are no restrictions on where in the product the pair can make improvements. The goal is to empower the pair to focus on usability improvements that they personally want to see fixed in a product that they use themselves almost every day.
  • No restrictions on product area: The pair is not required to work within product areas owned by their own stage groups.
  • No restrictions on pairings: The Product Designer and Engineer pair do not need to be from the same stage group. This is a voluntary initiative.
  • Work in MRs, not issues: Both the Product Designer and the Engineer should work directly in MRs to make changes. For the Product Designer, these MRs will likely be focused on less complex usability issues that the pair identifies, such as documentation, minor UI polish, or UI text changes.
  • Length of rotation: The length of the pairing will be 1-3 milestones, depending on what the pairing believes is appropriate for them. This means that multiple groups could be working on Beautifying our UI in parallel.
  • Prioritization: The Product Designer and Engineer will inform their stage group team of their involvement in the initiative, so that they can make time for it during milestone planning.

Learn more

What this issue is for

  • Link each MR to this issue
  • Braindump potential UI fixes

Testing

Please make sure package-and-qa job passes in every MR as we expect some E2E tests will be broken by the changes. QA review would also be beneficial.

groupcode review Diff file expansion

  • Function signature line combined with expansion buttons line in gutter, removing wasted vertical space
  • Color updates to make it more clear which lines are unchanged
  • Show button options depending on changes (ie only show "Expand all" rather than up/down if there are less than 20 changed lines)
Before After
Files-before Files-after

groupcode review Merge request header

  • Removed the branch widget altogether
  • Moved "code" related actions into new Code dropdown (available across all tabs 🎉)
    • Check out branch
    • Open in Web IDE/Gitpod
    • Downloads
  • Move branch information into header (available across all tabs 🎉)
  • Add tertiary dropdown for other MR actions
    • Close MR
    • Mark as draft
    • Report abuse
Before After
Screen_Shot_2022-05-18_at_2.58-1 Screen_Shot_2022-05-18_at_2.58
Screen_Shot_2022-05-18_at_2.59-1 Screen_Shot_2022-05-18_at_2.59
Screen_Shot_2022-05-18_at_3.03 Screen_Shot_2022-05-18_at_3.03

groupcode review Update Unresolved threads widget

  • Add ability to navigate to previous unresolved thread
  • When all threads must be resolved to merge setting is enabled, widget has orange background to draw attention to what is needed in order to merge
Before After
Screen_Shot_2022-05-18_at_3.01 Screen_Shot_2022-05-18_at_3.01-1

groupcode review Move MR sidebar into Overview tab content

  • Note: Still behind a feature flag as of 2022-05-19
  • Less clutter and more room for code review in Changes tab
  • Move "action" items out of sidebar and into tertiary dropdown in header (Lock MR, notifications)
Before After
Screen_Shot_2022-05-18_at_2.57 Screen_Shot_2022-05-18_at_2.57-1
Screen_Shot_2022-05-18_at_3.00-1 Screen_Shot_2022-05-18_at_3.00
Screen_Shot_2022-05-18_at_3.05 Screen_Shot_2022-05-18_at_3.05-1

groupproject management Unbox issue boards

Before After
Screen_Shot_2022-05-19_at_12.25.54_PM Screen_Shot_2022-05-19_at_12.26.06_PM
Edited by Annabel Dunstone Gray