Control Center
An Intuitive and User-Friendly Control Center Design for Software Engineers

Speed Read

In a rush? Here's the gist.
Challenge

I challenged myself to understand the current experience of software engineers in managing their source code repositories, collaborating with team members, and automating the software development lifecycle from a single platform. I embarked on a design project to create a control center specifically for software engineers. This case study details the process, challenges, and outcomes of this design Challenge.

Process

I conducted secondary research by reading public forums, performing market analysis of globally used control centers, and mapping out user journeys. Additionally, I used brainstorming sessions and a feature prioritization matrix to prioritize features. Finally, I created wireframes, adopted a professional yet fun style guide, and developed interactive UI designs.

Takeaways

My key takeaways from this project include the significance of user-centric design, effective methods for feature prioritization. Due to a lack of resources, I was unable to conduct testing but recognized the value of alternative testing methods that could have validated my designs beyond just relying on secondary research data.

Impact

The final design streamlines code collaboration and project management with single focus navigation, a hierarchical overview, and an intuitive horizontal sprint planning layout. It features interactive commit history visualization, enhancing productivity, collaboration, and efficiency .

Got more time? :)
Scroll down to read the entire case study
theme
SaaS | Information Architecture | Dashboard Design | Data Visualization | Web Design
When
2023
Role AND team
UX designer and Researcher | Independent Project

Introduction

In the fast-paced world of software development, engineers need tools that improve productivity, streamline workflows, and provide clear insights into their projects. I aimed to understand the current experience of software engineers in managing their source code repositories, collaborating with team members, and automating the software development lifecycle from a single platform. I embarked on a design project to create a control center specifically for software engineers. This case study details the process, challenges, and outcomes of this design Challenge.

Objectives

  • Understand how developers view and manage commits, including the process and tools they use to review and track changes.
  • Explore how they update bug statuses, focusing on the workflows and systems in place for bug tracking and resolution.
  • Investigate how they manage tasks, examining their methods for organizing, prioritizing, and tracking progress on various development activities.

Defining the Problem

After extensive literature review, studying information from public forums, support and discussion channels of various control centers, and conducting a competitor analysis of four widely used control centers globally by software engineers, I defined the problem statement as follows:

How might we improve the functionality of control centers to enhance usability and efficiency for software engineers

Core Experiences

The control center design focuses on simplifying navigation with a single, contextually changing system to minimize confusion and prominently display recent activity on the dashboard. It tailors data presentation based on the specific project management process, replacing complex icons with simple, color-coded, intuitive information displays. The design features a strategic information architecture for enhanced usability and intuitiveness, alongside improved data visualization with multiple views and customization options for ongoing tasks and collaborations, including detailed visualizations of commit history data.

01 Improved Data Visualization

The control center design includes improved visualization of commit history data, offers multiple views and customization options for ongoing tasks and collaborations. This enhancement allows for a clearer understanding of project progress and contributions, ensuring that all relevant information is easily accessible and understandable.

Simplified Navigation 02

Features a single, contextually changing navigation system that adapts based on the user's current tasks and needs, significantly reducing confusion and unnecessary complexity. The design also prominently displays the most recent and relevant activity on the dashboard, keeping users informed and up-to-date with minimal effort.

03 Simpler icon usage

The design uses straightforward, color-coded icons that are easy to recognize and understand. These icons are complemented by text or display additional information when hovered over, improving clarity throughout the control center.

Tailored to Project Management Processes  04

The Control Center design aligns information with the specific project management processes used, such as Agile or Scrum. This is evident in the defined action items, like Epics, User Stories, tasks, and bugs. It also supports Sprint planning, allowing action items to be allocated to different sprints.

05 Strategic Information Architecture

Strategic information architecture is employed when creating or editing action items, such as Bugs and Tasks. The design is divided into two sections: one for information that remains consistent across all action items, and another for contextual information and input fields that change based on the specific action item.

The Design Process

01 understand

Understanding the Problem Space...

To understand the ecosystem and its challenges, I began by exploring Control Center communities and discussion forums. I also examined discussions on Reddit, Blind, and other anonymous platforms to gain insights into the current experiences of software engineers. Here's what people have been saying:

Constraints & Assumptions

Constraints

  • The design must be developed exclusively for desktop platforms, focusing on desktop-specific usability and interface guidelines.
  • Due to a lack of resources, detailed usability testing cannot be conducted. The project will rely on existing user feedback and industry best practices instead.
  • The project must be completed within a one-month timeframe.

Assumptions

  • Assumed that preliminary research accurately reflects the broader user base.
  • Assumed the existing technology stack will support the new desktop design.
  • Assumed that available feedback from user forums and industry research will be used for validating design decisions due to ime constraints and lack of resources.

02 RESEARCH

Market Research

I conducted a competitor analysis on globally used Control Centers that include, AWS Code Commit, Atlassian Bitbucket, Azure DevOps,  and GitHub to understand their strengths and weaknesses, compare features, and identify gaps.

Key Insights

  • Overwhelmed by an excessive number of options and complex menus.
  • Difficulty interpreting and making sense of data due to unclear or cluttered visuals.
  • Confusion over various methodologies like Agile Scrum and how to apply them effectively.
  • Struggling with too many icons, tabs, and nested pages to remember and manage.
  • Confusing navigation paths leading to the same end goal, making it hard to find the right route.

Mapping the User Journey

03 ideate

Feature Prioritization Matrix

I developed a feature prioritization matrix to identify which features or ideas should be prioritized based on their potential impact on the project and the effort required to implement them.

Brainstorming

I explored three different ways to design the dashboard and decided to go with Option C. This design features single focus navigation and a hierarchical overview. It prioritizes projects first, followed by repositories under each project, and includes recent activity, tasks, and updates on each file within the repositories.

For the task management webpage, I explored both horizontal and vertical displays of sprint planning. I decided to go with the horizontal display, as it is more intuitive for dragging and dropping action items into sprints.

Many globally used platforms don't provide a useful graph view of commit history. Hence, I decided to make the commit history data visual, interactive, and functional. I also chose a Kanban board design for small-scale task management and ensured thoughtful information display throughout the website.

04 design

Wireframes

I explored three different ways to design the dashboard and decided to go with Option C. This design features single focus navigation and a hierarchical overview. It prioritizes projects first, followed by repositories under each project, and includes recent activity, tasks, and updates on each file within the repositories.

Final Design

The final design is a comprehensive, user-friendly tool to streamline project management and task tracking for teams of all sizes. The platform features a single focus navigation and a hierarchical overview, prioritizing projects, repositories, and including recent activity, tasks, and file updates. With an intuitive horizontal layout for sprint planning, users can easily drag and drop action items into sprints. Additionally, we will provide an interactive and functional commit history visualization, addressing the shortcomings of many globally used platforms. My goal is to enhance productivity, collaboration, and efficiency, making code collaboration and project management seamless and effective.

Looking Back...

  • In the future, with time and resources I would conduct usability testing to reveal more insights, allowing me to refine my design decisions. Early and frequent usability testing with actual users can uncover usability issues and areas for improvement that might not be apparent during the design phase.
  • I could have also conducted other tests that don't require people, such as heuristic evaluation. Utilizing heuristic evaluation can help identify usability problems by having experts review the interface based on established usability principles, providing a different perspective on potential design flaws.