GitLab Navigation Redesign Case Study

• UX Manager: UX direction

GitLab is a web-based git repository manager with wiki, issue tracking, CI, CD, and monitoring. GitLab is an open source tool with additional functionality available under proprietary licensing.

We work iteratively and out in the open at Gitlab with a release going out every month. In 9.0, we took a risk and tried to fix perceived problems in our navigation before thoroughly testing the solution with our users. As an open source project for a software development tool with a diverse user base, the feedback we receive is big, varied, and direct. The impact of this change was heard and felt immediately. Rather than respond reactively, we used an iterative UX research process to gain deeper insight and understanding of our user's needs. This process ultimately led to a complete re-imagining of the way users navigate within GitLab.

GitLab Design System

• UX Manager: UX direction, UX design, UI development

By 2017, GitLab, as an organization and product, was growing fast. We were working on introducing new features while bringing additional designers, engineers, and product managers on board to handle the increase in scope and volume of work. While there was existing markdown documentation in our UX Guide, upkeep was manual and time-consuming. The use of static images meant it was prone to being out of date. In addition to a lack of current usage guidelines, our CSS was growing without clear technical guidelines. We had page specific styles that would cascade down, affecting other areas and producing more interface bugs. Overall, we were lacking two crucial things: reusable components and clear guidelines for their use

The problem

GitLab was experiencing a growing number of stylistic issues as the product continued to increase in scope. This highlighted consistency concerns; colors and fonts were not well defined, and the way we handled components differed from page to page. We found ourselves addressing the same usability problems over and over. The pace of design was slowing down, leaving us unable to focus on much beyond the current milestone. Rather than working closely with product managers to generate future features and strategic roadmaps, we found ourselves in a purely transactional role. With these problems in mind, we needed a way to do the following:

The full case study is available in my book, "Building Design Systems" published by Apress. You may also reach out to me personally to receive a free copy of the chapter in PDF form.

GitLab Web IDE

• UX Manager/UX Designer: Product discovery, concept ideation, design, UX direction

The problem

As GitLab's user-base grew, non-developers were struggling to make edits to multiple files using GitLab's repository (repo) view. The edit functionality was limited, permitting only one file to be worked on at a time.

Initial solution

We started by reusing the existing repository view within GitLab. We set up a proof of concept, allowing for the file viewer to work as a basic file editor. This eliminated the page refresh when switching between files and approached editing from a branch, rather than a file, perspective. This was called the “Repo editor.”

The concept solved one problem but did not align with our vision for an easy-to-use experience. Users could not switch between branches or files easily and were unable to make a series of changes and commits without pushing them. It was clear that we were aiming for an integrated development experience, accessible for everyone right within the GitLab UI.

Final solution

One of GitLab's unique advantages is being an integrated product. Using the Open Source Monaco Editor, we developed the first version of what came to be know as the Web IDE. Building an editor that was integrated and made it simple for users from all backgrounds to contribute was a natural fit.

Payless Mobile Re-design & Re-platform

• UX Manager & Senior UI Developer: UX direction, UI framework, frontend development

Mobile Menu

Tablet Menu

Mobile Product List Page

Tablet Product List Page

Mobile Product Detail Page

Tablet Product Detail Page

Conversion of existing mobile and tablet ecommerce sites to a single, responsive site using Mad Mobile's proprietary node.js platform.

Paper and interactive prototypes were used to uncover usability issues and validate design decisions early on in the project.

I was personally responsible for the development of a scalable, modular, cross-platform web application using HTML and LESS. Special care was given to create a DRY structure which utilized the same data source for both mobile and tablet even though the designs differed greatly.

I worked closely with the design and development teams to ensure the implemented styles were pixel perfect and maintainable.

Concierge

• UI/UX Manager, Senior UI Developer: UX direction, UI framework, frontend development

Black Book

Customer Profile

Email

Product List Page

Product Detail Page

Find in Store

Personal Shopper

Cart

Concierge is a mobile application connecting store associates with customer, product, and delivery data from retail enterprise systems. Modules for Clienteling, Customer Engagement, Dashboard, and mPOS empower store associates to create a personalized shopping experience, and sell more effectively.

As UX Director & Senior UI Developer on the team, I worked in parallel with the Lead Developer, Product Owner, and Program Management to build proof-of-concept prototypes, while providing ideas on technical possibilities and exploring design options.

As a key stakeholder on the Concierge product team, I was responsible for leading and developing the UX process, meetings, standards, and implementation. This responsibility included decisions on UI development and technology decisions. These decisions were carried over as standards for other company projects.

The product was built using React, JSX, Sass, and inline styles for theming components.

AutoNation Go

• UI/UX Manager: UX direction, UX research & analysis

Competitor Analysis

Flow analysis

Search Feature Recommendation

AutoNation wanted a complete redesign of their current cross-platform web application. The project, designated 'AutoNation Go', sought to simplify the car buying process while adding value to current AutoNation customers with account and service details.

As UX Director on the project, I worked in parallel with the Product Owner and Project Managers to gather requirements and investigate UX solutions using a variety of methods. A competitive analysis was used to assess the strengths and weaknesses of competitors against AutoNation's user's needs. Mental models were developed to capture user behavior, pain points, motivations, and needs from contextual inquires. Product features were then mapped out for each pillar to identify gaps, opportunities, and feature bloat.

Photography

Pixel Pushing

Tactile Media