DELIVERABLES
User flows
Site maps
Wireframes
UX Design
Prototype
DSM Library
ROLE
UX Designer
YEAR
2020
PROGRAMS
OVERVIEW
Cycloid is a DevOps framework tool designed to optimize the use of technology and cloud resources, enabling teams to collaborate effectively on projects regardless of their skill levels. Our platform provides a simple, non-intrusive framework that ensures governance while preserving flexibility. In this project, we worked remotely to refactor the DevOps framework platform, focusing on enhancing the user experience, implementing streamlined processes, and advising the team on UX best practices. Key deliverables included user flows, site maps, a DSM library, wireframes, and prototypes.
We conducted thorough market and user research to identify frustrations, while applying design methodologies to redesign the platform. This encompassed improved user flows, clearer copy, consistent page structures, and an overall superior user experience. The team comprised over 12 members, including front-end and back-end developers, DevOps specialists, and managers, primarily based in France. As a teal organization, we operated in sprints and conducted occasional workshops to prioritize projects or develop new features. Weekly routines included Monday meetings to outline the week's tasks and Thursday presentations to the entire company on accomplishments. Each team member documented their progress and sentiments on Trello cards.
PROBLEM STATEMENT
The existing Cycloid platform suffered from fragmented user experiences, confusing flows, and inconsistencies that hindered user adoption and efficiency. Users faced challenges in navigating processes, interacting with features, and achieving their goals due to unclear structures, errors in flows, and a lack of intuitive design. The challenge was to refactor the platform to create a more cohesive, user-friendly interface that addressed these pain points while aligning with business objectives for scalability and governance.
ROLES & RESPONSABILITIES
As the primary UX designer on the Cycloid refactoring project, my role was central to identifying user frustrations and delivering solutions. I created user flows, site maps, wireframes, and prototypes, while also developing an improved DSM library. Collaborating closely with developers and managers, I facilitated workshops, gathered feedback through surveys and questionnaires, and ensured designs were technically feasible. Regular updates via Github and meetings helped align the team, with my responsibilities extending to presenting prototypes and advising on best practices to balance user needs with platform governance.
DURATION & HANDOFF
The project spanned several sprints over an estimated 3-4 months, from initial research to final handoff. Designs were handed off through Github, where artboards, wireframes, and prototypes were uploaded for review. Final assets were integrated into the DSM library, with updates communicated via Trello, Slack, and Google Hangouts to ensure seamless transition to development.
SCOPE & CONSTRAINTS
The scope involved a comprehensive refactor of the platform, including user flows, navigation, and interface consistency, while incorporating user feedback for future scalability. Constraints included remote collaboration across time zones, limited direct access to users for real-time testing, and the need to maintain non-intrusive governance. Technical feasibility within the existing infrastructure also phased out some advanced features, requiring prioritization based on effort versus impact.
RESEARCH
The research phase was foundational, employing a structured approach to uncover user and business insights. We utilized the GAME framework to define goals, actions, metrics, and evaluations, ensuring a deep understanding of frustrations and opportunities. This involved listing user actions across the platform, identifying errors through Google Analytics, and reviewing prior user interviews and surveys. The entire platform was audited from top to bottom, with issues documented in an Excel sheet, assigning effort-versus-impact values to prioritize improvements.
RESEARCH GOALS
Our research goals centered on clarifying user and business objectives through targeted questions: How will users benefit from the refactored platform? What problems do they seek to solve? How do they interact with features? This extended to business goals, such as enhancing governance and flexibility. By pinpointing user types and their pain points—like confusing flows and navigation errors—we aimed to measure success through metrics like reduced error rates and improved adoption.
MARKET RESEARCH
To gain broader insights, I explored market trends in DevOps tools, analyzing user behaviors via Google Analytics for data on screen resolutions, browser preferences, and interaction patterns. Prior company surveys and interviews revealed desired features and improvement areas. This market scan compensated for limited direct competitor data, drawing inspiration from similar platforms to address gaps in usability and efficiency.
COMPETITIVE ANALYSIS
A detailed competitive analysis examined strengths and weaknesses in comparable DevOps platforms, focusing on user interfaces, feature sets, and experiences. This revealed opportunities for differentiation, such as streamlined flows and intuitive navigation not present in competitors. Insights from tools like Github and analytics helped identify essential features to implement immediately and those for future phases.
SERVICE MAP
Service maps were created to visualize user actions and platform structures, such as inviting new users or refactoring navigation. An effort-versus-impact matrix prioritized features by evaluating implementation effort against user value. Surveys and questionnaires gathered team votes on requirements, ensuring alignment. This approach streamlined the roadmap, focusing on high-impact areas like error-prone flows while preparing for scalable expansions.
IDEATION & DESIGN
In the ideation and design phase, data from research was synthesized into concepts addressing key challenges. We explored multiple ideas for user flows and structures, considering technical feasibility and alignment with user-business goals. Workshops and feedback loops via Github and Slack refined these, leading to atomic design principles for consistency. This phase bypassed initial low-fidelity sketches in favor of direct wireframing to accelerate validation.
WIREFRAMES
Wireframes were developed to visually define project requirements, illustrating each page and user steps for tasks like navigation or feature interactions. Examples included flows for user invitations and menu restructures, handed off to the UI team for mockups. These proved invaluable in clarifying scenarios and reducing ambiguities before high-fidelity stages.
USER TESTING
User testing involved internal team feedback through prototypes and questionnaires, simulating real scenarios. Insights from surveys and meetings highlighted usability issues, leading to iterations. Although external user access was limited, this process validated designs, confirming improvements in flow clarity and reducing frustrations.
HI-FI DESIGNS
A detailed competitive analysis examined strengths and weaknesses in comparable DevOps platforms, focusing on user interfaces, feature sets, and experiences. This revealed opportunities for differentiation, such as streamlined flows and intuitive navigation not present in competitors. Insights from tools like Github and analytics helped identify essential features to implement immediately and those for future phases.
PROTOTYPE
Prototypes were crafted for complex behaviors, such as navigation menus, to test usability. Four variations were designed to compare dropdowns and collapsible, accompanied by questionnaires for voting. Uploaded to Figma or Github, these interactive previews facilitated feedback, ensuring the refactored platform met user expectations without compromising performance.
USER TESTING
User testing involved internal team feedback through prototypes and questionnaires, simulating real scenarios. Insights from surveys and meetings highlighted usability issues, leading to iterations. Although external user access was limited, this process validated designs, confirming improvements in flow clarity and reducing frustrations.
TESTING & LAUNCHING
During testing, prototypes were refined through iterative feedback on Github and Invision-like tools, addressing edge cases and ensuring cross-device compatibility. The launch integrated key enhancements, overcoming constraints to deliver a more efficient platform. Positive internal reception marked success, with ongoing monitoring for further refinements.
CONCLUSIONS
The Cycloid refactor stands as a reflection of diligent research, ideation, and design, resulting in a platform that reduces confusion and enhances efficiency. While some concepts remain for future exploration, the outcomes solve real user challenges, adding value to both users and the company through thoughtful, user-centered improvements.