Completion time
Am I the right person for you? Let's see:
... and what cannot
Not good at everything, what can I say!
Background story
During my employment at CytoCypher B.V., I took the helm in developing a platform designed to analyze the results of acquired cardiac cell behavior in laboratory settings. It provides robust analysis tools, summary features, and project organization capabilities to facilitate comprehensive research management.
I was the principal designer, responsible for the entire platform you see here. These designs represent the project's status upon my departure from the company. Nonetheless, I undertook the task of building it from the ground up, collaborating with all stakeholders, refining based on feedback, liaising with developers, and ensuring the seamless transfer of necessary information for implementation.
My contribution
- Designed a comprehensive analysis dashboard platform facilitating day-long experiments within larger projects, integrating collaboration tools for interdisciplinary teams, alongside essential analysis tools for heart research facilities.
- Performed UX research with stakeholders and existing Users to gather requirements and feedback on existing versions to indice an (re-) design plan.
- Created comprehensive documentation for various software products, such as user guides and instructional materials.
- Created, maintained and optimized the design systems to provide reusable resources for the whole Design team in order to keep design consistent across all platforms.
- Created interactive prototypes for Users, for in-house demos and testings.
Start point
The main part of the software consisted of visualizing cardiac tissue analysis data. The start point was a website that only allowed uploading files and seeing the analysis.
After consulting with stakeholders to elevate our approach and enrich the software platform, I began user research to understand how our current tool is being used. This involved finding out when and where users perform their analyses, what kind of output they expect, and how they utilize it.
We gathered this information through surveys and by reviewing proactive feedback from users. This feedback provided a starting point for our initial wireframes. Subsequently, we conducted interviews and usability tests on these wireframes to assess the flow, refine our assumptions, and uncover additional insights.
Following several design iterations, we conducted further usability tests on more polished high-fidelity mockups. This process helped us confirm features and flows while also discarding incorrect assumptions we had made.
Challenges
- User Migration: Transitioning existing users from a basic analysis tool to a comprehensive app with many new features. It’s like upgrading from Notepad to the entire Office 365 suite.
- Solution: To tacke it I developed a comprehensive onboarding process that included step-by-step tutorials. Besides since we had dedicated support, I made sure they were trained and properly informed to help users transition from the basic analysis tool to the new, feature-rich app.
- Knowledge Transfer: Shifting all the information users had learned through experience or training to a self-explanatory interface.
- Solution: Redesigned the interface to be more intuitive and user-friendly, incorporating tooltips, contextual help, and interactive guides. This made the software self-explanatory, reducing the need for extensive training and enabling users to quickly understand and utilize new features.
- Maintaining Simplicity: Balancing simplicity and clarity while incorporating numerous buttons, information icons, and menus—all necessary to match the software's complexity.
- Solution: We focused on a minimalist design approach (don’t put it there if its not needed), carefully selecting and organizing essential buttons semantically (tools that work together stay together), icons, and menus. By prioritizing the most critical features and using clear, concise labeling (in line with our old software and preexisting terms in our company and in the field), we maintained a clean and simple interface despite the software's complexity.
- Defining Use Cases and Personas: Extracting and defining use cases and personas from researchers, each with unique experiment methods and platform needs. Generalizing these paths involved merging similar processes, making compromises, and prioritizing business objectives.
- Solution: We conducted extensive user research, including interviews and surveys with researchers, to understand their diverse experiment methods and platform needs.
- Implementing UX Best Practices: Applying standard UX design principles in our complex system to leverage familiar user experiences while clearly explaining our unique features. For instance, in a simpler system, a folder structure might be enough to manage projects. However, in our complex, interdependent system, these folders must link to changes in other sections of the software, acting as the organizational brain behind the projects.
- Solution: We conducted user research to identify common design patterns that users were already familiar with and integrated these into our system. Then, we enhanced our interface with detailed explanations and visual cues to highlight how our system's unique functionalities worked. This included creating an adaptive folder structure that not only organized projects but also dynamically reflected changes across the platform. We provided interactive demos and in-app guidance to help users understand and navigate these features, ensuring a seamless and intuitive user experience.
Trends
Staying current with trends in software design through various sources such as daily checks on Dribbble, Behance, and design blogs, I recognized that minimalism could be an ideal style for our project. This approach was particularly fitting given the software's complexity and the intricate concepts that needed to be visualized.
Team
As I was responsible for ideation from the ground up, my first step was to meet with internal stakeholders.
In the initial stages, I collaborated with a colleague who, while primarily a hardware architect, had some design insights and a genuine interest in the process. His extensive product knowledge was invaluable, guiding me and refining my suggestions with feedback like “no, we don’t do this” or “this is the wrong concept.” This iterative refinement happened repeatedly throughout the entire process.
The development team consisted of three developers, with me as the sole designer.
Our collaboration involved weekly meetings where we discussed necessary adjustments to the UI to ensure it matched the designs. We often had to make concessions due to time constraints and limited development resources.
We used Zeplin for hand-offs, which meant that all finalized versions needed to be precise. I paid close attention to padding, colors, and components to maintain consistency and avoid the need for custom components or inconsistent sizes that could compromise responsiveness.
Additionally, I learned to navigate the different working styles of the developers. One was very strict, adhering closely to “what’s on Zeplin is what I develop,” while the other was more flexible, making minor adjustments like standardizing padding without needing a design update. Understanding their expectations and paying attention to these details helped ensure our meetings were productive and our collaboration smooth.