Starmap

Starmap is a tool used to generate graphical representations of project roadmaps from GitHub issues. For the purposes of Starmap, a roadmap is represented by a single root node issue in GitHub that contains links to date-bound project milestone issues within that roadmap.

The goal of Starmap is to help externalize planning, share team progress against milestones, and publicly flag dependencies. Starmap roadmaps are inter-team and user-focused. The tool provides flexibility in terms of the level of granularity that can be viewed, enabling users to drill down into specific details or see a high-level overview of the project as a whole.

‍

Background

‍

From the end of 2022 to the beginning of 2023, I had the privilege of collaborating with Protocol Labs on the development of Starmap, an open-source tool that transforms GitHub issues into visual roadmaps. Working closely with two talented developers and PL organizational leaders, I took charge of the design process, conducting research, wireframing, prototyping, and testing to bring this roadmap game changer to life. This case study highlights my journey as a UX designer, discussing the design process, challenges encountered, and the  outcomes achieved.

‍

Methods

‍

When the project manager brought me on board, I kicked things off by delving into research within the PL organization. I had insightful conversations with the CEO and conducted user interviews to grasp the needs and expectations of GitHub users and org leaders. These discussions helped me uncover how users interacted with GitHub issues and identify the essential features they craved in a roadmap tool. Armed with this valuable insight and the project requirements, I crafted initial wireframes and prototypes, which I then put through rigorous testing with users.

Through multiple rounds of testing and incorporating user feedback, I fine-tuned the design, ultimately creating a high-fidelity prototype that seamlessly integrated with the development process. Working closely with the talented development team, I offered guidance and insights to ensure the tool's functionality aligned perfectly with user needs. Throughout the development phase, I constantly sought input from users to ensure a user-friendly and intuitive experience.

‍

Challenges Faced

‍

One of the major challenges I encountered during the development of Starmap was striking the right balance between functionality and simplicity. It was a delicate dance to meet the demands of the tool while ensuring it remained user-friendly and accessible. I meticulously crafted the design to achieve a sweet spot where robust functionality coexisted harmoniously with intuitive usability.

‍

Midway through the project, our project manager had to step away, leaving me in charge of meeting deadlines, disseminating org-wide updates, communicating necessary changes to the developers, and collaborating directly with leadership. It was a thrilling yet demanding responsibility that pushed me to grow both personally and professionally.

‍

Outcomes

‍

The successful development and release of Starmap as an open-source solution marked a significant milestone. GitHub users now had access to a powerful yet user-friendly roadmap tool that transformed their roadmapping experience. Thanks to the UX design efforts, the interface boasted simplicity and usefulness, earning praise from the user community. Positive feedback poured in, validating the impact Starmap had on their workflow.

‍

Starmap stands as a shining example of the fruitful collaboration between UX designers and developers. Through meticulous design and continuous feedback integration, I ensured the tool catered to a diverse user base, delivering an accessible and powerful solution. The flawless execution by the development team brought the vision to life. By leveraging user feedback and fostering effective teamwork, we achieved the remarkable outcome of an intuitive and impactful tool for GitHub users worldwide.

‍

To learn more about how Fission is utilizing Starmap, check out their story here.

‍

Designs

See the designs in Figma or embedded below.