DevStats MVP Design: Streamlining Engineering Management

Raoni Caselli
8 min readOct 19, 2023

--

Converting an idea into a tangible product demands substantial effort, along with a multitude of other considerations. Transforming it into a thriving business requires an even greater commitment. Regardless of past successes, each business presents its unique challenges and potential pathways to success. As we fail and succeed, we learn more about the different strategies that can pave the way for success once again.

Throughout my career, I’ve had the privilege of immersing myself in different markets and companies, affording me invaluable exposure to various approaches to product development. Through these experiences, I’ve collected lessons that have proven instrumental in crafting successful products and aligning user and business objectives to drive achievement.

This case study showcases a project from mid-2021, offering a firsthand look at how I assisted a client in realizing his vision. By conceptualizing a Minimum Viable Product (MVP), we provided a foundation for them to build, validate the market, and ultimately cultivate a growing business. This project exemplifies my commitment to bridging ideas with tangible, marketable solutions.

At House of Products, we bring together a team of experts in Product, Design, and Business, all with a strong background in Product Marketing. Whether you’re looking to launch a new product or improve an existing one, check out how we can help you at https://houseofproducts.design. Your next success story could be right around the corner!

Now let’s get on to the case study!

DevStats is an engineering management tool for leaders seeking to build high-performing tech teams. My collaboration with them began while working as a freelancer, prior to my involvement with House of Products. This case study offers a comprehensive view of my approach to crafting a Minimum Viable Product (MVP) from a design standpoint, that reflects on how we do Product Design at House of Products today.

The project lasted seven weeks, from the initial meeting to handing over the final user flows, covering:

  • All the essential features needed for the MVP, with detailed documentation of each use case and interaction state.
  • A styleguide that outlined the basic elements and components needed to build the MVP. It contained detailed documentation of specs, variations, and interaction states.

I worked closely with a UX Researcher, who helped with workshops and tests. We collaborated closely with the development team, handing off designs as they were ready, so they could start building the basic version. Due to time constraints, research activities were limited to validating and confirming the main feature hypothesis.

Our collaboration with the client was a big success and it led to more improvements of the product later on, adding more features and making it even easier to use.

The squad page allows managers to follow their squad’s KPIs and dive deeper into each one of them.

Curious to dive deeper into the DevStats saga? Read on.

Company Context

DevStats, headquartered in Utah USA, is a startup focused on providing a Developer Analytics tool for SMBs. The company was founded by Phil Alves, who’s also the owner of DevSquad, a consulting firm that specializes in building SaaS products.

Background of the Idea

It all started with a simple idea, to empower engineering leaders to effectively manage their teams by monitoring developer productivity. The client saw this opportunity in his own company, observing the challenges faced by engineering managers in navigating performance data with competitor tools, which fell short in critical areas. Even if the product didn’t gain the anticipated traction, it would still serve as an invaluable internal tool tailored precisely to their requirements.

Problem Framing

Tech managers are responsible for monitoring their team’s performance and refining processes through the establishment of best practices and goals.

The tools used for the development work include a git tool (GitHub, GitLab, etc.) and project management tools (Jira, Trello, etc.). To measure performance, managers often find themselves integrating additional tools, leading to a proliferation of platforms to oversee within their daily routines.

This creates a few problems:

  • Scattered Information: Performance metrics are dispersed across multiple tools, impeding in-depth analysis and requiring extra effort to consolidate insights.
  • Delayed Problem Identification: Issues in production often surface too late, persisting, and potentially recurring due to inadequate and untimely resolution.

DevStats sought to solve these problems by streamlining the management of diverse tracking tools, simplifying the extraction of insights from data sourced from Git and Project Management platforms, and fostering timely communication by promptly alerting managers to emerging problems.

The initial week was dedicated to investigating the problem space, understanding user profiles and workflows, and formulating the product’s navigational structure and features overview. This immersion provided all the information necessary to begin conceptualizing the design for the prioritized user flows:

  • Assessing the company’s performance status
  • Evaluating the squad’s performance
  • Prepare for 1–1 sessions with each team dev
  • Onboarding new accounts
HMW workshop and Product map
Main user stories based on the prioritized flows

Conceptual Designing

To begin ideation, I tasked the client with gathering examples of products that he felt effectively addressed similar challenges and possessed an appealing visual aesthetic. Simultaneously, I brought my own set of references to increase our inspirational material.

Creating template ideas allowed for the identification of common patterns applicable across the product. This approach was instrumental in streamlining user learning curves and optimizing development efforts through the emphasis on reusable components. The end goal was to enhance user efficiency and minimize the scope of necessary builds.

Squad Dashboard 1st design concept
Squad Players 1st design concept
Squad Integrations 1st design concept
Player Scorecard 1st design concept

Validating 1st concepts

We conducted usability tests with four individuals who matched our target user profile. The feedback primarily highlighted areas where information was either missing or expected to be presented differently in the dashboards. Users provided positive feedback on the navigation system, overall layout, and the value derived from the content.

Subsequently, we collaborated with the client to implement adjustments in the high-fidelity version.

These tests illuminated a crucial distinction: managers with a technical focus exhibited different behaviors and informational needs compared to those primarily engaged in project management. This revelation reinforced our decision to prioritize the MVP for technical managers and guided us in incorporating suggestions from this user group.

Board with results from usability tests showing notes on what could be improved

Building the styleguide

Before delving into the creation of high-fidelity prototypes, we prioritized building a styleguide in alignment with the brand guidelines. Using the Dashboard references, I engaged in a collaborative exercise with the client. This involved selecting visual and communication attributes that most accurately embodied the product vision, culminating in the development of a comprehensive mood board.

Moodboard with UI directions, inspirations, color scheme, and typography

With the mood board as our guide, I proceeded to establish the core foundational elements and components for the styleguide. Below is the definitive version encompassing all elements utilized in the MVP:

Styleguide documentation with foundation (colors, typography, spacing, and grid) and components

High-fidelity prototypes and 2nd round of validation

To streamline our workflow, we divided tasks: I concentrated on crafting high-fidelity prototypes and providing detailed use cases for features not included in testing, while the UX researcher initiated a second round of validation for the primary user flows.

Design Handoff for each feature with main use cases and interaction states

The key takeaway was the insight into how teams structure their development processes and how this influenced their initial experience with DevStats, particularly concerning the initial integration and onboarding process.

The user research proved invaluable in showing user reactions to the product, providing us with a deeper understanding of their motivations and expectations for this type of tool, all within the context of their specific user profiles.

Insights from 2nd round of usability tests
Player scorecard
Integrating Git tools
Example of report

Design Handoff

Despite maintaining open communication and regular alignment through Figma comments, I opted to enhance the handoff process for the development team. This involved providing a custom experience, allowing them to effortlessly access the styleguide and user flows without the need to navigate within each page of the Figma file. Through the utilization of a Figma navigational prototype, developers could seamlessly traverse the entirety of the documentation without the hassle of searching through Figma’s individual pages.

Styleguide documentation is divided into Foundation and Components (basic and complex).
MVP handoff divided by features, with links to each use case and interaction state.

Lessons learned and next chapter

The project’s most demanding aspect was accomplishing tasks within the stipulated timeframe while upholding a high standard of work. Initially planned as a 4-week endeavor, we extended it to 6 weeks to incorporate additional MVP features, all while maintaining an accelerated work pace.

We adjusted our approach to accommodate the tight schedule. This involved task delegation and occasionally initiating activities simultaneously, particularly when one task was contingent on client review. Additionally, we found it necessary to reevaluate the prioritization of specific features, ensuring that we allocated more time to those elements crucial for delivering value to users. These adaptations proved to be invaluable lessons learned.

Conclusion

The DevStats project stands as a testament to the effectiveness of streamlined collaboration, iterative development, and adaptability in overcoming challenges. By carefully defining the problem, conducting user research, and leveraging client inputs, we were able to create a product that not only met the initial vision but also exceeded expectations. The process of validating concepts, building a comprehensive styleguide, and refining prototypes ensured a user-centric approach at every step.

Balancing time constraints with quality work was a core challenge, leading to a project extension, with strategic task management and prioritization proving pivotal in delivering a valuable product.

The insights gained from user feedback, especially regarding team development processes and onboarding, provided invaluable direction for refining the product. Open communication and a tailored handoff enhanced collaboration with the client and development team.

In retrospect, this project underscores adaptability, effective communication, and a user-centric mindset. It sets a precedent for impactful, user-centered solutions, and led to further collaboration on expanding DevStats post-launch.

House of Products solves problems like the ones portrayed in this case study, helping startups and entrepreneurs turn an idea into a real product, and boost all kinds of KPIs.

Visit https://houseofproducts.design for more information.

--

--

Raoni Caselli

I'm a designer working mostly on digital products. For the past decade I've worked in B2B and B2C tech companies from many different areas and sizes.