Deciding on the look and feel of a new home is already challenging. The level of complexity grows even more when ideas involve altering the underlying structure itself. Every decision you make affects the feasibility of future changes. Choosing what is best can be subjective, even when rooted in the realities of physics and mathematics. Now imagine millions of people using this house, each with unique requirements. That gives you an idea of how it feels to update the navigation experience of GitLab. Picking a fork in the road means it won't be perfect for every user, but it needs to work well for the vast majority.
We'll share how our design process ideated through each solution to make a vision into reality.
Dreaming of a new home
You might dream of an extra bedroom, an open kitchen, or more efficient use of space. Regardless, it all starts with a vision of what comes next. In our release post, we shared how our North Star vision drove our direction. We used these themes to focus on the meaningful foundational elements as we explored new concepts. We built our design assumptions around these themes before filling out user interface elements.
Help us make the GitLab Blog an even better resource for all things DevSecOps. Please take our Blog Reader Survey - it takes less than five minutes to complete. Thanks in advance!
Theme 1: Minimize the feeling of being overwhelmed
The project and group left sidebars have been growing. Features were in different places and often required users to search for the page they needed. We started addressing these issues in the following ways:
- Reorganize page elements into consistent collections across groups and projects to reduce confusion.
- Start everyone with sensible defaults for a baseline that accommodates most user needs.
- Provide customizable options in the left sidebar which could reduce discovery time in the future.
- Give back screen real estate so the focus remains on the page content and task.
Theme 2: Orient users across the platform
It could be difficult for a user to know where they were inside GitLab. Landmark clues like sidebars, breadcrumbs, and page titles weren't consistent and occasionally were missing. Without these wayfinding cues, jumping from one task to the next was challenging if the next thing wasn't directly in front of the user. To give a sense of place, we:
- Show the pages specific to a given context by displaying all available options in the left sidebar.
- Fix breadcrumbs at the top of the window to help users retain their context even when scrolling.
Theme 3: Allow users to pick up where they left off easily
There can be a lot going on at one time in GitLab, so it can be hard to know what to do next. It should feel natural to transition into GitLab and get started. Helping users transition means we must:
- Make it clear that the homepage of GitLab can redirect anyone to their next task.
- Keep things familiar so that anyone will feel right at home.
- Reduce the number of page visits required to jump between tasks.
Visualizing the navigation layout
It's helpful to envision how you would use each room in a house before pulling it all together. We started by visualizing five different concepts, and each idea explores a unique design choice to address our assumptions.
| Idea 1: Minimal features on display |
|---|
