Agency:
Copods
Role:
Lead Visual Designer
Duration:
Mar 2024 - Aug 2024
Worked with a powerful data analytics platform that analyzes complex log files from medical equipment including MRIs and CT scanners to provide insights that help hospitals and service providers improve operational efficiency, reduce unplanned downtime, and optimize asset utilization. Their solutions ultimately reduce costs and support proactive maintenance strategies across healthcare organizations.
+20%
CVR
+30%
TCR
-18%
DR
Background
Our design team consisted of three members: two UX designers (one senior, one junior) and myself as the UI designer. During the discovery phase, we collaborated to consolidate requirements and gain a deep understanding of the product. Afterward, responsibilities were divided— the UX team focused on interaction design and wireframing, while I developed the visual language, UI library, and product framework. In some areas, stakeholders opted for a UI refresh rather than a full UX redesign, in which cases I applied the updated visual language to the existing framework.
Discovery and analysis
To better understand the product, we engaged in focused discussions with key team stakeholders to gather insights into their experiences and perspectives. This helped us uncover valuable information to guide our decision-making and strategy. Additionally, I conducted a quick expert review to identify major product issues and a brief competitor analysis to gain a clearer understanding of the domain.
Step 1 : Stakeholder interviews
We held in-depth interviews with the following key stakeholders - the Director of Technical Operations, Product Manager, VP of Marketing, Head of Engineering, and core members of the engineering team and product owners.
Step 2 : User personas
Drawing from stakeholder discussions and product demos provided by their team, we crafted user personas that captured the key characteristics, goals, and needs of the target audience.
Step 3 : Summary of insights
To collate our findings, we grouped our observations into problems and goals. These would serve as our guide during our design process.
Step 4 : Expert review of their current interface
I conducted a quick expert review of their product to assess the key issues from a UI perspective.
Step 5 : Brief competitor study
To deepen my understanding of the domain, I also looked at top industry products to assess the visual trends, the information hierarchies and interaction patterns.
Seeking out visual cues
To begin my journey into formulating their visual language, I picked out a few of the product’s lexicons - color, imagery, iconography, shadows, and UI elements from their website. This provided the touch point, the direction and the baseline aesthetic that would govern my future decision decisions.
Visual strategy
For the re-design, I wanted to highlight the unique features of the product and clearly reflect that in the UI. I created an ethos statement and then derived a few keywords and visual definitions from there.
Working with Tableau
To bring my design vision to life, I needed to understand Tableau’s constraints and collaborate with a team of developers to identify workarounds and solutions, ensuring the design was both scalable and straightforward to implement.
Development constraints
Tableau has a set of pre-defined chart, component and dashboard templates, which can make achieving highly unique visual designs with large datasets difficult.
Ensuring complex dashboards work seamlessly across various breakpoints and all customer devices can be tricky.
Integrating unique brand-specific fonts on Tableau Desktop requires workarounds as tableau will not be able to render the font correctly unless the font file exists on the customer device.
Design fixes
Collaborating closely with developers in feedback cycles to ensure the feasibility and execution of each component and screen I designed.
Establishing a fixed standard resolution for the dashboard to accommodate at least the the majority of customer devices effectively.
Replacing the Noto Sans font with Tableau’s default font family while maintaining the matching font weights to preserve the intended typographic hierarchy.
Final screens
Following collaborative sprints and feedback cycles with the product stakeholders and development team, I rendered the final visual designs for the product.
Impact and learnings
Impact
Higher Customer Conversions – The redesigned interface improved trust and engagement, leading to a 20% increase in sign-ups and purchases.
Faster Task Completion – Streamlining navigation and simplifying interactions reduced friction, making it easier for users to complete key tasks 30% faster.
Reduced Drop-off Rate – By improving the information hierarchy and making CTAs clearer, the drop-off rate on key pages decreased by 18%.
Increased User Engagement – The new UI encouraged users to explore more, leading to a 25% increase in time spent on key pages.
Learnings
This was my first experience working with Tableau, requiring me to modernize the interface while adhering to its framework. To ensure feasibility, I referenced public.tableau.com for best practices and collaborated closely with the development team to validate each design element.