--- title: "What we're doing to beautify our UI" author: Christie Lenneville author_gitlab: clenneville author_twitter: clenneville categories: company image_title: '/images/blogimages/UXpost.jpg' description: "We’re actively working to make our UI more aesthetically pleasing. Learn how we started with a UX spike and where we’re going next." tags: UX, UI, design twitter_text: "Notice anything different about @gitlab? Here are the results of a recent UX spike to polish the GitLab UI" featured: yes postType: product --- Designers like to create beautiful UIs. That’s no surprise. But visual design can be really difficult to maintain in an open source product like GitLab, where we have thousands of contributors and a strikingly fast feature velocity. ## Why it’s hard We deliberately keep the contribution barrier for GitLab as low as possible, which means small UI bugs tend to slip into the product. We’ve also had a historical tendency to focus our efforts more on value-added delivery than visual refinement. Velocity and feature delivery are really important, so this mindset isn’t a bad thing. But, aesthetics are important, too. They have a real and meaningful impact on usability and credibility, both of which are key concerns for GitLab’s UX team. ## What we’re doing about it We’re working hard to make GitLab the most usable DevOps tool on the market. Part of that effort is making our UI as visually pleasing as we can without sacrificing speed. At a high level our plan is to: ### 1. Focus on tactical fixes that can happen right away This blog post includes some examples of what we’ve already accomplished and shows you where to find what we’re doing next. ### 2. Update our visual design strategy Visual design trends evolve at a pretty rapid clip, and we’re due for an update. That’s why we’re so pleased to have [Jeremy Elder](/company/team/#jeremyelder) join our team as a senior product designer with a dedicated focus on visual design. Along with being an [excellent visual designer](https://dribbble.com/jeremyelder), Jeremy brings a deep background in illustration and design systems. He’s already jumped in to help refine a number of UI issues (after only one month of being on the team). We can’t wait to see where he takes us! ### 3. Build out our design system Today, [Pajamas](https://design.gitlab.com/) is more of an idea than a reality, but not for much longer. We’re aggressively designing, documenting, and building out reusable components that will bring refinement and consistency to our UI and enable our product designers and frontend engineers to move much faster. That only means good things for our future velocity! ## More about tactical fixes In June 2019, a small team of GitLab product designers, [Annabel Gray](/company/team/#annabeldunstone), [Marcel van Remmerden](/company/team/#mvremmerden), and [Jarek Ostrowski](/company/team/#jaaaaarek), went heads down for almost three weeks on a UX spike. During this period, they rapidly closed 43 issues in our [Beautifying our UI](https://gitlab.com/groups/gitlab-org/-/epics/989) epic (take a look to see what we’re still planning to do). They addressed a lot of issues during the UX spike, but I’d like to highlight a few that are especially exciting: ### New threaded discussion design Our previous design for threaded discussions included a lot of boxes and borders, making it difficult to quickly scan the page to find related content. Marcel removed some of the visual cruft and used subtle background colors to help users distinguish between components more easily. While we have other long-term changes we’d like to make to discussions, this was a great start. ![Before](/images/blogimages/beautifying-our-ui/discussion-before.jpg){: .shadow.center.medium} Before {: .note.text-center} ![After](/images/blogimages/beautifying-our-ui/discussion-after.jpg){: .shadow.center.medium} After {: .note.text-center} We're happy to see that members of the wider GitLab community noticed the effort on this change and responded positively. {::options parse_block_html="false" /}

Thanks @gitlab for quick/easy upgrade to GitLab 12.0, glad to see discussions UI design cleaned up https://t.co/Va28ssb20Y

— David Puplava (@DavidPuplava) June 24, 2019
### Prioritized merge request “changes” in the content hierarchy In a merge request, **Changes** is one of the most-clicked tabs. Unfortunately, at certain breakpoints, the tab was hidden, requiring users to scroll to see it (or sometimes they were even forced to resize their window). Annabel fixed the tab component throughout the product, accounting for all breakpoints, whether or not one or both sidebars are open, and whether or not the tab bar includes buttons. This ensures that the **resolved discussions** component wraps to the next line on smaller screen sizes, leaving more room for **Changes** to always display correctly. ![Before](/images/blogimages/beautifying-our-ui/breakpoints-before.jpg){: .shadow.center.medium} Before {: .note.text-center} ![After](/images/blogimages/beautifying-our-ui/breakpoints-after.jpg){: .shadow.center.medium} After {: .note.text-center} ### Align merge request icons As a final example, Jarek focused on correctly aligning the icons on the merge request page. It’s a subtle change that refines the visual design and makes the page easier to scan (scheduled for release in 12.1). ![Before](/images/blogimages/beautifying-our-ui/mricons-before.jpg){: .shadow.center.medium} Before {: .note.text-center} ![After](/images/blogimages/beautifying-our-ui/mricons-after.jpg){: .shadow.center.medium} After {: .note.text-center} ### We’re excited to do more This recent spike was a great start, but we’re all excited to make more improvements to GitLab's UI. We’re currently exploring how we could [make the UI for our discussions easier to understand](https://gitlab.com/gitlab-org/gitlab-design/issues/437) and the best ways to [display threads](https://gitlab.com/gitlab-org/gitlab-ce/issues/53937). We’re also in the process of creating [new default avatars](https://gitlab.com/gitlab-org/gitlab-ce/issues/62185). If any of these topics interest you or if you have some feedback on our ideas, please chime in and let us know what you think of the UI as it evolves, we would love to hear from you! Photo by [Martin Reisch](https://unsplash.com/@safesolvent?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/@safesolvent?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).