Content Map for Developer Efficiency
Overview
The original MyZOLEO platform presented several challenges.
The user flows weren't well-defined, leading to a confusing experience for users.
Additionally, the lack of a consistent design language made it difficult for users to form a cohesive understanding of the platform. This also resulted in frequent communication gaps between designers and developers, requiring them to clarify design intent and functionality throughout the development process.
These inefficiencies caused delays and increased the risk of inconsistencies in the final product. The content map was used to mitigate these scenarios and issues.
Duration: Q2 2023—Continuous
Team: Dennis Buizert
The problem, challenges, and solutions
Problem: Despite the challenges associated with project handovers, establishing a clear and efficient process was particularly important for this project due to our organization's lack of experience with designers.
Challenge: The traditional approach of creating a prototype was not feasible for this project due to its unique hardware and software requirements. The project was divided into specific flows, with the navigation and homepage being developed later and incorporating logic based on account status.
Solution: To address this challenge, we implemented a Content Map, a comprehensive database that interconnected screens, flows, and system IDs. Before creating design breakdowns, we meticulously identified these elements. At the conclusion of each flow, I collaborated with the technical team to determine IDs, underlying connections between servers and software, and then integrated this information into the Content Map breakdown.
The Approach
To ensure a seamless user experience in the redesign, I led a user-centered approach. This involved meticulously outlining the information architecture through content mapping. This process, which streamlined development by 60%, defined the purpose, functionality, and user interactions for each screen and user flow.
Furthermore, I established clear logic behind calls to action (CTAs) for intuitive navigation. By defining component behavior and collaborating with front-end developers on data IDs, I ensured consistency across devices and a smooth handoff for implementation.
The Impact
Through a user-centered approach that included meticulous content mapping, I achieved a 65% increase in developer efficiency. This further eliminated clarification on functionalities or handover meetings by additional 40% which saved time and resources throughout the development process.
Furthermore, I ensured a smooth user experience by meticulously documenting user flows, particularly for incomplete registrations. This included specifying the information users see based on their account status. I also created a separate flowchart for developers, fostering clear communication and streamlined development.
Finally, I facilitated a seamless integration between the front-end design and the back-end infrastructure by creating an Airtable list. This list mapped front-end data IDs to back-end responses and API calls. This empowered developers to accurately translate the design into a functional product.
Defining User Flow Logic for Seamless Onboarding
Taking ownership mid-project, I identified a critical gap in the design: undefined user flow logic for new user registration and device activation. This previous pain point had the potential to create a frustrating user experience. To safeguard user experience, I collaborated with the Lead Architect to meticulously define this user flow with clear logic.
