I-Chieh Pan

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>I-Chieh Pan</title>
	<link>https://ichiehpan.cargo.site</link>
	<description>I-Chieh Pan</description>
	<pubDate>Thu, 26 Mar 2026 06:48:27 +0000</pubDate>
	<generator>https://ichiehpan.cargo.site</generator>
	<language>en</language>
	
		
	<item>
		<title>New Relic Session Replay</title>
				
		<link>https://ichiehpan.cargo.site/New-Relic-Session-Replay</link>

		<pubDate>Thu, 02 Jan 2025 15:12:11 +0000</pubDate>

		<dc:creator>I-Chieh Pan</dc:creator>

		<guid isPermaLink="true">https://ichiehpan.cargo.site/New-Relic-Session-Replay</guid>

		<description>

	
	New Relic Session Replay


	My roleProduct design lead
	My task
UX / UI designCompetitive researchUser reserch and testing

	Team Two product managers, nine core engineers,content writer and a support designer
	

	At a glance...


	The challenge
When front end developers troubleshoot issues, they need to know both what the user was doing and how the application was responding when the issue occurred so they can gauge severity, reproduce errors, and identify root causes.
 Previously, New Relic offered only data-centric logs and traces, requiring developers to translate lengthy text into an approximation of what the user was doing.&#38;nbsp;


	Design strategy

Multi-contextual alignmentI designed a unified diagnostic experience that synchronizes three distinct contexts into a single, real-time frame of reference:

Visual (Replay player component): 
The exact UI experience and user interactions
Behavioral (Event trail component): 
A narrative of route changes, JavaScript errors, and custom events.
Technical (Session traces component): 
The granular "under-the-hood" logs and network calls.
	

	The impact

Rapid adoption: 
Scaled to 1,000+ active accounts and 7 million weekly sessions within six months of launch.
Revenue growth: 
Generated $3.52M in Monthly Recurring Revenue (MRR), establishing Session Replay as a core pillar of New Relic's Browser capability.
Improved user experience:
 Eliminated context-switching by providing a "single source of truth," allowing developers to move from observing a symptom to diagnosing a root cause in one fluid motion.
	

	1.&#38;nbsp; Discovery &#38;amp; definition


	Session Replay is our number one requested feature from current and prospective customers. It provides visual context of what the end user was doing alongside the telemetry data of how the application was behaving. Session Replay also expands New Relic’s capabilities from traditional app monitoring to Digital Experience Monitoring (DEM).


Before I start, I need to understand what customers are expecting from a session replay tool. I conducted a competitive analysis of session replay features, mapping out the functional landscape and identifying opportunities for differentiation.

	
&#60;img width="9216" height="5216" width_o="9216" height_o="5216" data-src="https://freight.cargo.site/t/original/i/bd7e6e96cbddcb182ece2f06ad9f5342d7e183c4f76b8c6b9b3b2769a20e9768/Session-replay-competitive-research-1.png" data-mid="242364931" border="0"  src="https://freight.cargo.site/w/1000/i/bd7e6e96cbddcb182ece2f06ad9f5342d7e183c4f76b8c6b9b3b2769a20e9768/Session-replay-competitive-research-1.png" /&#62;
&#60;img width="9216" height="7392" width_o="9216" height_o="7392" data-src="https://freight.cargo.site/t/original/i/abcf79ea561e80c692b1d70090c987f5ab2af49026a3fc636cd0bbb36a25ff4d/Session-replay-competitive-research-2.png" data-mid="242364932" border="0"  src="https://freight.cargo.site/w/1000/i/abcf79ea561e80c692b1d70090c987f5ab2af49026a3fc636cd0bbb36a25ff4d/Session-replay-competitive-research-2.png" /&#62;

	
	Jobs-to-be-Done

I also conducted internal qualitative research with our engineers who use ‘Fullstory’&#38;nbsp; user session replay on a daily basis. The interviews revealed they prioritize time-to-insight, specifically through the immediate visibility of key events on the replay timeline. And they appreciate the ability to quickly link errors, the user action and data together for incident triaging.&#38;nbsp;
I synthesized these findings into Jobs-to-be-Done statements by&#38;nbsp;distilling user motivations, core goals and critical actions.The reproduction: As a front-end engineer, when a JavaScript error occurs, I need to see exactly what the user was doing leading up to it, so I can recreate the issue.The impact: As a front-end engineer, I need to see how the application behaved during the error to determine if this was an isolated incident or a critical failure affecting the entire user journey.

The root cause: As a full-stack engineer, I need to correlate&#38;nbsp;user actions with back-end technical events on a single timeline, so I can pinpoint the source of a bug without switching contexts.
 

	2.&#38;nbsp; Strategic framework

	
The friction of context-switchingWhy is troubleshooting so difficult?
When developers are troubleshooting an issue, they need to hunt through a sea of fragmented data—logs, traces and timeline—to reconstruct what the user actually did leading up to an error. Translating lines of text into a ‘best guess’ of user behavior creates cognitive load and delays critical time-to-insight.
Design approachWhen a developer is deep in a "debugging flow," the biggest productivity killer is context switching—jumping between tabs to match a timestamp in a video to a specific line in a log file. To solve this, I focused on creating a unified view where the replay player, event trail, and session traces all move together in real-time.This alignment follows the natural way developers troubleshoot: they see a problem in the UI → identify the high-level event → in need of the granular logs to find the root cause. By keeping these three layers side-by-side and in synced, we remove the friction of context-switching, allowing developers to move from observing what happened to understanding why it happened in one fluid motion.

	
	&#60;img width="2570" height="1582" width_o="2570" height_o="1582" data-src="https://freight.cargo.site/t/original/i/0cc3867eedc63a3d5ffccf60989af6c57ee58f459d9882cd81f134295949dc0a/wireframe.png" data-mid="242563677" border="0"  src="https://freight.cargo.site/w/1000/i/0cc3867eedc63a3d5ffccf60989af6c57ee58f459d9882cd81f134295949dc0a/wireframe.png" /&#62;


	3.&#38;nbsp; Distilling high-volume data

	
Navigating the noise
Reviewing session replays is traditionally labor-intensive. By overlaying event markers like JavaScript errors and route changes onto the timeline, we provide engineers with clear visual cues.
 Here are some explorations around designing a scrubber that doesn't just play back a video, but actively surfaces the critical signals,&#38;nbsp;allowing engineers to jump straight to the root cause.


	&#60;img width="1618" height="1700" width_o="1618" height_o="1700" data-src="https://freight.cargo.site/t/original/i/d95373682157064711dce3baeb95c525da1c80820c6d1823ac32daac20b187b3/Scrubber-exploration-2.png" data-mid="242417833" border="0" data-scale="52" src="https://freight.cargo.site/w/1000/i/d95373682157064711dce3baeb95c525da1c80820c6d1823ac32daac20b187b3/Scrubber-exploration-2.png" /&#62;


	&#60;img width="1838" height="1788" width_o="1838" height_o="1788" data-src="https://freight.cargo.site/t/original/i/a69e6144d8b2e40ff0aafb74302204d26b2804448382354ee8539ada4ae6f540/Route-change-grouping.png" data-mid="242419370" border="0" data-scale="88" src="https://freight.cargo.site/w/1000/i/a69e6144d8b2e40ff0aafb74302204d26b2804448382354ee8539ada4ae6f540/Route-change-grouping.png" /&#62;

	
Designing for
 high density dataTo help users parse long sessions without cognitive fatigue, I developed a "chapter system” that organizes dense route changes into a scannable timeline. By clustering rapid-fire interactions, we reduce visual noise while maintaining a 10px minimum hit-area for accessibility.This diagram illustrates three logic models for grouping sub-second events—balancing a high-level overview with granular accuracy.
	

Responsive markers for better legibility
To ensure the timeline and error markers remains useful on any screen size, I designed a merging mechanism for error markers—much like how a map groups landmarks as you zoom out. 
This "eagle-eye" view automatically clusters overlapping errors into a single interactive marker, maintaining a clean workspace while preserving the detail within a tooltip.


	&#60;img width="1676" height="1098" width_o="1676" height_o="1098" data-src="https://freight.cargo.site/t/original/i/e05717b92269ec7846d00922c18de67b04832c32d133cf9086e72fa635029c97/Adobe-Express---Merging-marker-short.gif" data-mid="242450696" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/e05717b92269ec7846d00922c18de67b04832c32d133cf9086e72fa635029c97/Adobe-Express---Merging-marker-short.gif" /&#62;
	

	4.&#38;nbsp; Validation


&#60;img width="2836" height="2130" width_o="2836" height_o="2130" data-src="https://freight.cargo.site/t/original/i/ea763757e7384f60b03f275950442e4e0dc1a7d8699808117060104cdeefcf4f/Marker-user-test.png" data-mid="242452612" border="0" data-scale="57" src="https://freight.cargo.site/w/1000/i/ea763757e7384f60b03f275950442e4e0dc1a7d8699808117060104cdeefcf4f/Marker-user-test.png" /&#62;


	I conducted an internal user test to validate this ‘grouped’ approach against the ‘overlay’ (no-grouping) approach on the session replay timeline. My goal was to determine which pattern best helps users maintain an "eagle-eye" view of session when in small space.&#38;nbsp; 
The findings were definitive with the grouped approach:

Cognitive ease: the grouped view was "easier for the brain to digest" and&#38;nbsp; "keeps things less cluttered" compared to the overlay approach.Precision: participants liked that they could click a single square to see exactly what happened in that timeframe without overlapping with other error sets. Efficiency in investigation:&#38;nbsp;The red deepens as more errors cluster together, creating a natural ‘heatmap’ that shows users where the most issues occurred and where to start their investigation.
	

	•&#38;nbsp; •&#38;nbsp; •
	

	&#60;img width="3000" height="2040" width_o="3000" height_o="2040" data-src="https://freight.cargo.site/t/original/i/52814292c8547ac21d412f21a7e5fb915d05856400d860ff42a93cfe052d9eef/Chapter-hover-list---multiple-URLs.png" data-mid="242502748" border="0"  src="https://freight.cargo.site/w/1000/i/52814292c8547ac21d412f21a7e5fb915d05856400d860ff42a93cfe052d9eef/Chapter-hover-list---multiple-URLs.png" /&#62;
	

	Seeing it all come togetherThe final design of New Relic Session Replay is not just a "video player" but a synchronized diagnostic tool. By unifying the video player (with timeline scrubber) and the 'Event Trail' and 'Session Trace' components, I ensured that every technical signal is perfectly in sync with the user's visual journey. It allows developers to see an error and the user's behavior side-by-side, at the exact moment it happened.&#38;nbsp;This balance of granular detail and intuitive context is what ultimately cuts the time-to-insight from minutes to seconds.

	
	5.&#38;nbsp; Business and user impact


	Rapid Adoption: Scaled to 1,000+ active accounts and 7 million weekly sessions within six months of launch.
Revenue Growth: Generated $3.52M in Monthly Recurring Revenue (MRR), establishing Session Replay as a core pillar of New Relic's Browser capability.
Operational Efficiency: Eliminated context-switching by providing a "single source of truth," allowing developers to move from observing a symptom to diagnosing a root cause in one fluid motion.


	&#38;nbsp;See it in action
	
&#60;img width="1734" height="840" width_o="1734" height_o="840" data-src="https://freight.cargo.site/t/original/i/275b1a58b69d53e32e59d90ede3faa90210242c9b09aed8f74c1a636024fc5a1/browser_screenshot-full_session-replay-details.gif" data-mid="234254731" border="0" data-scale="50" src="https://freight.cargo.site/w/1000/i/275b1a58b69d53e32e59d90ede3faa90210242c9b09aed8f74c1a636024fc5a1/browser_screenshot-full_session-replay-details.gif" /&#62;

	
</description>
		
	</item>
		
		
	<item>
		<title>New Relic SLI Query Builder</title>
				
		<link>https://ichiehpan.cargo.site/New-Relic-SLI-Query-Builder</link>

		<pubDate>Thu, 26 Mar 2026 06:48:27 +0000</pubDate>

		<dc:creator>I-Chieh Pan</dc:creator>

		<guid isPermaLink="true">https://ichiehpan.cargo.site/New-Relic-SLI-Query-Builder</guid>

		<description>

	
	New Relic SLI Query Builder
	

	My roleLead product designer
	My task
Discovery ideation UX/UI design

	Team Product manager,core engineers of 5,Engineering manager,
content designer
	

	At a glance...


	The challenge
For engineers and SREs, defining a Service Level Indicator (SLI) requires advanced knowledge of query syntax, metrics, and attribute schemas.&#38;nbsp;
This technical prerequisite becomes an obstacle that leads to high abandon rates in the current SLI setup process. This improvement aims to solve this problem for our users.&#38;nbsp;

	Design strategy

A context-aware query builder that surfaces only valid options, automate setup via templates and warns before users save a broken SLI.
	

	Business impact
Increased service levels adoption:weekly active account increased by 16% and weekly active users increased by 11% within 8 weeks.


Reduced SLI misconfiguration, contributed to 1,500+ beta users and $1.52M MRR at GA.


	The challenge
	

	The complexity of setting up SLIs&#38;nbsp;
Setting up a custom SLI in New Relic means filling NRQL queries in a couple of blank input fields— and to do that, users need to know the metric type, the right function and attribute names etc. Here are some of the details users need to know when they write a SLI query:


Understading the service levels practice and the logic of SLI
Knowing what you could measure for your data (e.g. latency, response time, throughput etc)
Knowing their own elemetry schema and attribute names
Deciding a threshold value that is meaningful for their service
Think of it like building a filter for a spreadsheet you've never seen before. You know what you want to find, but you don't know the column names, the data format, or which operators to apply.&#60;img width="1688" height="1210" width_o="1688" height_o="1210" data-src="https://freight.cargo.site/t/original/i/1254c8b9e133a69b611f91cc08a4689cd47068e3c78ed9862c2c6b1f9f591889/V1---SLI.png" data-mid="247724563" border="0"  src="https://freight.cargo.site/w/1000/i/1254c8b9e133a69b611f91cc08a4689cd47068e3c78ed9862c2c6b1f9f591889/V1---SLI.png" /&#62;SLI query builder with blank input fields

	
	Low task completion rateFrom the event tracking data, we’ve seen users struggled to complete the SLI setup with only 11.1% completion rate.&#38;nbsp; 
Another problem we’ve been seeing is users misconfiguring the good and valid events, which leads to a 100%&#38;nbsp; SLI. Users thought their services are healthy while in reality it’s a misleading picture of their service health.&#38;nbsp;
&#60;img width="1606" height="897" width_o="1606" height_o="897" data-src="https://freight.cargo.site/t/original/i/06216bd5aa05c662476ffb93904b4f9796db33d4e37e1a51ffd66a4c6fd38b10/SLI-funnel.png" data-mid="247612255" border="0" data-scale="52" src="https://freight.cargo.site/w/1000/i/06216bd5aa05c662476ffb93904b4f9796db33d4e37e1a51ffd66a4c6fd38b10/SLI-funnel.png" /&#62;

	
	Discovery

	
	Our user groupService level management was introduced by Google SRE teams, and is now widely adopted across the industry. When designing the SLI query builder, we need to address three key personas:


SRE: Automates infrastructure and resolves issues; establishes performance baselines across teams and services.

Developer: Monitors service uptime, performance and end-user experience.


Business Leader: Minimizes costs from downtime and drives operational efficiency.
 

	Understand the pain points
I partnered with a UX researcher and PM to gather customer feedback through qualitative interviews.
The research aimed to answer three key questions:- 


What is blocking adoption?
- What problems do users encounter during SLI setup?
- Who is actually executing the setup flow?


&#60;img width="1978" height="1528" width_o="1978" height_o="1528" data-src="https://freight.cargo.site/t/original/i/0a120044373283fe12db4f7fbdffd5484ef138f080a9956aee3de4310ffadbd6/User-interview.png" data-mid="247613778" border="0"  src="https://freight.cargo.site/w/1000/i/0a120044373283fe12db4f7fbdffd5484ef138f080a9956aee3de4310ffadbd6/User-interview.png" /&#62;
&#60;img width="2338" height="1675" width_o="2338" height_o="1675" data-src="https://freight.cargo.site/t/original/i/e0e3e7b747ab061a1767e62aadaa2e010c1fd05c7fc904e64408b2bd3bdf03f6/Research-note-taking-table.png" data-mid="247613753" border="0"  src="https://freight.cargo.site/w/1000/i/e0e3e7b747ab061a1767e62aadaa2e010c1fd05c7fc904e64408b2bd3bdf03f6/Research-note-taking-table.png" /&#62;


	Research findings
The interviews surfaced three key insights:


1. SLI/SLO practice
Some teams are not fully aware of the benefit of SLM and don’t know what would be a good metric to measure for their service, especially when there is no dedicated SRE teams.2. Ease of use
Some customer are not certain about the attributes within their telemetry schema, hence they need to cross checking a lot when using the query builder. Another common issue is not being&#38;nbsp; familiar with NRQL syntax.3. Human errorCustomers report SLI being inaccurate or not working –&#38;nbsp; which actually came from invalid good or bad event setup.


	Known constraints
1. There is always going to be some translation gap between customer’s data and New Relic’s data model. Meaning there will be cases where customers can’t find any metric that is useful for them in SLI.2.&#38;nbsp;Every SLI must be linked to an entity. For customers who prefer not to tie an SLI to a specific technical component, the work-around is to use a Workload as a logical container. 

	
	Design approach

	
A query is essentially a series of decisions. The design strategy is to surface those decisions one at a time, in the right order, with only valid options at each step.


1. Recognition over recall
Instead of asking users to remember or copy/paste attributes or data points within each clause, we offer dropdowns to lower the technical barrier. This allows users to simply select from all the available data points. It takes away the cognitive load and prevents human errors (e.g. typos) 


	&#60;img width="2446" height="1588" width_o="2446" height_o="1588" data-src="https://freight.cargo.site/t/original/i/cef3b67169bbd5b03eacf521a33b4e87fb7b2e11ad59cfd027921a31777811ea/Screenshot-2026-04-27-at-11.53.35AM.png" data-mid="247614230" border="0"  src="https://freight.cargo.site/w/1000/i/cef3b67169bbd5b03eacf521a33b4e87fb7b2e11ad59cfd027921a31777811ea/Screenshot-2026-04-27-at-11.53.35AM.png" /&#62;
	

2. Automation via smart templates
Some SLIs are typically used to measure the performance of certain entity types (APM, Browser, database etc). By suggesting SLIs and threshold based on historic data, we eliminate the setup hurdle, make it accessible for non-technical users. For power users, we offer the option for custom SLI setup.


&#60;img width="2034" height="1510" width_o="2034" height_o="1510" data-src="https://freight.cargo.site/t/original/i/6498f3282ba7816811efe165f2c5d0c3342550ff47b4818900875019fa9d4abe/Screenshot-2026-04-27-at-11.53.02AM.png" data-mid="247614229" border="0" data-scale="98" src="https://freight.cargo.site/w/1000/i/6498f3282ba7816811efe165f2c5d0c3342550ff47b4818900875019fa9d4abe/Screenshot-2026-04-27-at-11.53.02AM.png" /&#62;
	

3. Prevent errors before they happen
We show a warning message and disabled saving when we detect same query for both good and valid events. This sets a guardrail for users and make sure what they configured is actually meaningful, not just technically valid.


	&#60;img width="1510" height="1066" width_o="1510" height_o="1066" data-src="https://freight.cargo.site/t/original/i/5d70554d4a50195c651d0b37d08f2b3a804ecbf5b1470262d630f6ce94826b1b/Screenshot-2026-04-27-at-11.52.35AM.png" data-mid="247614228" border="0" data-scale="78" src="https://freight.cargo.site/w/1000/i/5d70554d4a50195c651d0b37d08f2b3a804ecbf5b1470262d630f6ce94826b1b/Screenshot-2026-04-27-at-11.52.35AM.png" /&#62;
	

4. Simplify comparison by formatting By changing the query into a line-by-line format, we improve the scannability and make it easy to cross-check the valid versus the good/bad event.
 

	&#60;img width="1964" height="1034" width_o="1964" height_o="1034" data-src="https://freight.cargo.site/t/original/i/44f1a31fabdfd5e228b34027f89acacbd540e139e5377e7883176b45a8f40e3b/Screenshot-2026-04-27-at-11.52.24AM.png" data-mid="247614250" border="0"  src="https://freight.cargo.site/w/1000/i/44f1a31fabdfd5e228b34027f89acacbd540e139e5377e7883176b45a8f40e3b/Screenshot-2026-04-27-at-11.52.24AM.png" /&#62;

	
	&#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp;&#38;nbsp; See the improvement in action below

&#60;img width="2874" height="1794" width_o="2874" height_o="1794" data-src="https://freight.cargo.site/t/original/i/09356ec1ed3eef500671eac2188de9f9bcaa1fce8b8341a629d50a03ee1e1593/SLI-query2.gif" data-mid="246658169" border="0" data-scale="91" src="https://freight.cargo.site/w/1000/i/09356ec1ed3eef500671eac2188de9f9bcaa1fce8b8341a629d50a03ee1e1593/SLI-query2.gif" /&#62;

	
	•&#38;nbsp; •&#38;nbsp; •
	

	Business impact


	Increase service level adoption -- SLI query builder filled the gap in service level creation flow, which has a $2M CRR impact on the business.
Reduced SLI misconfiguration, contributed to 1,500+ beta users and $1.52M MRR at GA.
	

	Looking back
	

	The biggest UX risk in highly technical products is the silent failure.Shift the memory burden from the user to the system. By requesting data in incremental steps, we minimize the cognitive load required to recall critical information.
Bridging the gap between specialists and laypeople demands a solution that is intuitive. &#38;nbsp;
	

</description>
		
	</item>
		
		
	<item>
		<title>ITONICS Cloud Design System</title>
				
		<link>https://ichiehpan.cargo.site/ITONICS-Cloud-Design-System</link>

		<pubDate>Thu, 04 Mar 2021 11:35:47 +0000</pubDate>

		<dc:creator>I-Chieh Pan</dc:creator>

		<guid isPermaLink="true">https://ichiehpan.cargo.site/ITONICS-Cloud-Design-System</guid>

		<description>


	ITONICS Cloud Design System


	My task&#38;nbsp;UX auditUI/ UX designPrototyping&#38;nbsp;

	Team a team of 6 people 
including PM and developers 


ITONICS Cloud is a SaaS solution for innovation management that helps users to analyze data, translate it into insights. The Cloud has some pre-existed components inherited from the previous desktop version.&#38;nbsp;We need unified, standardized, and reusable rules to follow for the Cloud version.


	The challenges&#38;nbsp;Old desktop version components mixed with new components resulted in inconsistencies and incoherence in styles and behaviors

&#38;nbsp;The developers are wasting their time re-coding similar components that could have consolidated into one.&#38;nbsp;
 
	
&#60;img width="6708" height="4376" width_o="6708" height_o="4376" data-src="https://freight.cargo.site/t/original/i/809a28ac687e006eb85e5c2f46f0150ec6eec76905f5aec7aae36849c2201264/UIs.png" data-mid="108076930" border="0"  src="https://freight.cargo.site/w/1000/i/809a28ac687e006eb85e5c2f46f0150ec6eec76905f5aec7aae36849c2201264/UIs.png" /&#62;


	Design system
We expect a design system that should serve the following purposes:&#38;nbsp;Achieve consistent user experience&#38;nbsp;&#38;nbsp;Provides clarity that improves the communication between developers and designers&#38;nbsp;&#38;nbsp;Allow to iterate faster: more frequent low-fi mockups iterations, and apply the design system once we reach a certain concrete design decision

Process&#38;nbsp;Inventory audit, to evaluate the experience and identify issues&#38;nbsp;&#38;nbsp;Create style guide, specify UX rules and component usage if there isn’t any yet&#38;nbsp;Consolidate extraneous or overlapped components and patterns&#38;nbsp;Document and maintain the UI library


	&#60;img width="2882" height="1076" width_o="2882" height_o="1076" data-src="https://freight.cargo.site/t/original/i/3e1907b0e38c4c1fa89a00be038de1d912e4db2408db2c8d6597a2b8ece76141/Design-System-Audit.png" data-mid="102318687" border="0"  src="https://freight.cargo.site/w/1000/i/3e1907b0e38c4c1fa89a00be038de1d912e4db2408db2c8d6597a2b8ece76141/Design-System-Audit.png" /&#62;

	
	UX audit - component &#38;amp; pattern


UX auditing The way I group elements is based on their&#38;nbsp; purpose and type, rather than appearance. This approach is aligned with how we organize the component library. Through this purpose-directed inventory, we can then see have an overview of how elements are used in the system, what are the behaviors, and furthermore what needs to be standardized.


Establish rules and guidelinesAfter the audit, I try to capture the existed patterns or determine the best practices to follow as rules. I follow the Atomic Design (Brad Frost, 2016) approach to organize our design system. So we have folders like Atoms; Molecules; Organisms; Templates; Pages and Extra Content. 
 

&#60;img width="2396" height="938" width_o="2396" height_o="938" data-src="https://freight.cargo.site/t/original/i/946aecff07cfac2d724a10ff1375de1b9829fee7bfb17141c2dd7b84da3f8e97/Design-System-Rules.png" data-mid="102318694" border="0"  src="https://freight.cargo.site/w/1000/i/946aecff07cfac2d724a10ff1375de1b9829fee7bfb17141c2dd7b84da3f8e97/Design-System-Rules.png" /&#62;


	UX guideline documentation


Deliverables&#38;nbsp;Style guide and pattern library&#38;nbsp;Design specifications &#38;nbsp;&#38;nbsp;UI library build with Sketch that house the design files&#38;nbsp;System maintainence and update

	
	&#60;img width="4452" height="1388" width_o="4452" height_o="1388" data-src="https://freight.cargo.site/t/original/i/75a863f0b474e48d6cc5b90ce02ae92e707c6811d48fd19d8216b49d4ec7d9c4/Detail-page-specs-1.png" data-mid="242418837" border="0"  src="https://freight.cargo.site/w/1000/i/75a863f0b474e48d6cc5b90ce02ae92e707c6811d48fd19d8216b49d4ec7d9c4/Detail-page-specs-1.png" /&#62;
	

	Design specification for element hero banner


	&#60;img width="1740" height="946" width_o="1740" height_o="946" data-src="https://freight.cargo.site/t/original/i/7c855bbddd80b525585433fd3a68a8d3fb2d1aa2da9ee5d589d65a74e28c9676/Cards.png" data-mid="107199522" border="0"  src="https://freight.cargo.site/w/1000/i/7c855bbddd80b525585433fd3a68a8d3fb2d1aa2da9ee5d589d65a74e28c9676/Cards.png" /&#62;
	
	
	Design deliverable: card component 


	&#60;img width="2643" height="2985" width_o="2643" height_o="2985" data-src="https://freight.cargo.site/t/original/i/89851f4ccb8e9356cf173a76034b1d7d552f939571cfbe278e2aaab14b988aff/Detail-Pagex3.png" data-mid="107199519" border="0"  src="https://freight.cargo.site/w/1000/i/89851f4ccb8e9356cf173a76034b1d7d552f939571cfbe278e2aaab14b988aff/Detail-Pagex3.png" /&#62;
	

		Design deliverable: entity detail page&#38;nbsp;


	Learnings&#38;nbsp;Establish rituals and processes help me move things forward.Since I am the only designer in the team, I can only work on the design system parallelly to my day-to-day tasks.&#38;nbsp;So I decide to setup a roadmap and checkpoints for the development of the design system. This helps me move things forward and break down the tasks into smaller chunks that are more manageable.&#38;nbsp;Have the design system in mind.
Always inspect what you can build for the design system when you have a design task. On the other hand, check what you already have in the system before making any new design.&#38;nbsp;
&#38;nbsp;A design system is a living and on-going project.
Sometimes the insufficiency of the guidelines shows when in implementation stage. So updating and improving the design system are just as important as creating it.


&#60;img width="1652" height="942" width_o="1652" height_o="942" data-src="https://freight.cargo.site/t/original/i/4315072f69b96b3126652ce62714c9dae191a3bd055773ab5a6d2e7d3e4266e5/Before.png" data-mid="107223084" border="0" data-scale="92" src="https://freight.cargo.site/w/1000/i/4315072f69b96b3126652ce62714c9dae191a3bd055773ab5a6d2e7d3e4266e5/Before.png" /&#62;
&#60;img width="1722" height="942" width_o="1722" height_o="942" data-src="https://freight.cargo.site/t/original/i/02826fe9b301908c5d2b6276a2af1dd122bec98a9d57db5da8f80d5b83a32410/After.png" data-mid="107223080" border="0"  src="https://freight.cargo.site/w/1000/i/02826fe9b301908c5d2b6276a2af1dd122bec98a9d57db5da8f80d5b83a32410/After.png" /&#62;

	
</description>
		
	</item>
		
		
	<item>
		<title>ITONICS Web Clipper</title>
				
		<link>https://ichiehpan.cargo.site/ITONICS-Web-Clipper</link>

		<pubDate>Sat, 01 May 2021 15:38:49 +0000</pubDate>

		<dc:creator>I-Chieh Pan</dc:creator>

		<guid isPermaLink="true">https://ichiehpan.cargo.site/ITONICS-Web-Clipper</guid>

		<description>
 

	ITONICS Web Clipper


	My roleUX / UI designWorkshop facilitation
	Team 1 product manager, 5 core engineers&#38;nbsp;
(front-end &#38;amp; back-end)
	

	ITONICS Web clipper is a browser extension that helps users quickly capture web content and save it to ITONICS Cloud. Some users use web clipper everyday, especially those with executive roles, it is an essential way to add content into the system.


Below shows the current web clipper that is being used. User can click the clipper icon on the web browser, a window wiil appear where the page's title, description, and image will be captured. Edit the information if needed and then hit save. The content will be uploaded to the Suite platform, where this clip will then become one of the “post” in their feed. The extension is available for Chrome, IE and Firefox.


&#60;img width="3238" height="1006" width_o="3238" height_o="1006" data-src="https://freight.cargo.site/t/original/i/1aa3b97be10d5108711b72422f72a794c6cb1dd16be446a7ea4446e32f226bc7/Web-Clipper-current.jpg" data-mid="132732322" border="0"  src="https://freight.cargo.site/w/1000/i/1aa3b97be10d5108711b72422f72a794c6cb1dd16be446a7ea4446e32f226bc7/Web-Clipper-current.jpg" /&#62;


	&#38;nbsp; &#38;nbsp; How current web clipper works
	&#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; &#38;nbsp; Clipped content will be added into&#38;nbsp; ITONICS Suite content feed&#38;nbsp;


	Problems &#38;amp; goalsThe clipping process requires a lot of manual work including specifying the data storage destination for each entry which is time-consuming and inefficient. We want to improve the clipping process so that we increase the app usage and user engagement.
Users


The primary users are content creators, content managers, or similar executive roles. They are responsible for creating, editing, and publishing content on the platform. And the secondary users are project managers and employees within the client’s organization, normally they are not as active as the primary users. &#38;nbsp;


User research


To learn how users use the clipper and understand their pain points, I conducted user interviews involving three internal and two external users. I gathered qualitative data and analysed their motivation and expectations when using the clipper tool, and their behaviours regarding collaboration, etc.
Here are some key findings that I concluded from the interview:
&#38;nbsp;Users want easy and quick clipping process&#38;nbsp;Clear indication of the clipping result can avoid errors  Users want uncomplicated way to share the content, while maintain privacy&#38;nbsp;&#38;nbsp;Users find it difficult to organise the content when clipping in high volume


	Ideation

	
	Stakeholder workshopI facilitated a design workshop with the key stakeholders, including CTO, consultant, content manager, technical lead and product manager. The ‘How might we’ (HMW)&#38;nbsp;technique allows us to reframe insights into opportunity areas and innovate on problems found during user research.

These are some examples of our HMW statements:
&#38;nbsp;How might we give the users confidence during the clipping process?&#38;nbsp;How might we make the clipping process more swift? or fun?&#38;nbsp;How might we provide a quick way to share the clips? How might we allow users with different permissions can access the clips?&#38;nbsp;&#38;nbsp;How might we leverage clip status to enable sharing between users?


&#60;img width="3264" height="2448" width_o="3264" height_o="2448" data-src="https://freight.cargo.site/t/original/i/4198299de91410aca88264c12544ece41287ec4a25b6dfa8b4589af75a5e38a8/IMG_6494.JPG" data-mid="108675718" border="0"  src="https://freight.cargo.site/w/1000/i/4198299de91410aca88264c12544ece41287ec4a25b6dfa8b4589af75a5e38a8/IMG_6494.JPG" /&#62;
&#60;img width="1600" height="1200" width_o="1600" height_o="1200" data-src="https://freight.cargo.site/t/original/i/520667656cbacf53e6c55660210b767e14c52376b7d8b7a01381e308dd70b4c9/56affcdf-7e57-4113-abcd-c42b5bad10dd.JPG" data-mid="108676052" border="0"  src="https://freight.cargo.site/w/1000/i/520667656cbacf53e6c55660210b767e14c52376b7d8b7a01381e308dd70b4c9/56affcdf-7e57-4113-abcd-c42b5bad10dd.JPG" /&#62;
&#60;img width="1168" height="1186" width_o="1168" height_o="1186" data-src="https://freight.cargo.site/t/original/i/9448f79aa8e6b1439f3488c7af803ac4cac6e84283267e2408ab2562d7efe03e/Ideation-Sketches.png" data-mid="107363194" border="0"  src="https://freight.cargo.site/w/1000/i/9448f79aa8e6b1439f3488c7af803ac4cac6e84283267e2408ab2562d7efe03e/Ideation-Sketches.png" /&#62;

	
	We use the dot voting technique to prioritize our ideas and make decisions
	Crazy-8's ideation practice
 

	Known constraints
Some technical constraints were communicated before we start the design process.

&#38;nbsp;The Clip quality relies highly on the web page structure &#38;nbsp;Clipped but unsaved data will be lost when the browser session ends&#38;nbsp;A file storage destination is required for every clipping&#38;nbsp;Extension update may be difficult with some browsers
	
	
	Design suggestionsClear navigation and interactiont that provide users better orientation  Clip out more content from the webpage, gain more flexibility for later editing Remember users previous action as a pre-fill,&#38;nbsp; save time on tedious configuration process  Optimise the workflow by introducing bulk action  Extensive functions to help users dealing with a massive amount of entries
	

	Design deliverables

	
	User task flowWith the decisions made during the workshop and the constraints in mind, I drafted a task flow (happy path) to illustrate the user's primary steps to accomplish the clipping process.

	
	&#60;img width="5954" height="1708" width_o="5954" height_o="1708" data-src="https://freight.cargo.site/t/original/i/ea07e7c6e9e9dcb55aa32a83e8cff7669ed688aea8e076ab36c089344776799d/WebClipper-Task-Flow-2.png" data-mid="108787578" border="0"  src="https://freight.cargo.site/w/1000/i/ea07e7c6e9e9dcb55aa32a83e8cff7669ed688aea8e076ab36c089344776799d/WebClipper-Task-Flow-2.png" /&#62;


	WireframeIn the wire-framing stage, I tried to define how this web clipper page should look. There are two challenges that I tried to solve. The first is the position of the configuration panel, which is required to save the clips. The second challenge is how to help users quickly navigate through the clips that they want to edit.

	
	&#60;img width="6752" height="1976" width_o="6752" height_o="1976" data-src="https://freight.cargo.site/t/original/i/5378f351e1c682b92ca2cb5e9db9ecd7fe5cde3aa0cf2963625a13c7013df944/Web-Clipper--Wireframe-Exploration.png" data-mid="108787623" border="0"  src="https://freight.cargo.site/w/1000/i/5378f351e1c682b92ca2cb5e9db9ecd7fe5cde3aa0cf2963625a13c7013df944/Web-Clipper--Wireframe-Exploration.png" /&#62;


	&#38;nbsp;Wireframe Explorations


	Deliverables
After deciding on the general layout and interaction approach, I start to add visual attributes and detail interactions to the design.&#38;nbsp;
	

	&#60;img width="3367" height="1698" width_o="3367" height_o="1698" data-src="https://freight.cargo.site/t/original/i/3ac0f248c5a878aed9236cdaa73592756fe032cdefe0f6d976b8531d8b820faf/WebClipper-Lo-hi-Fi-Mockup.png" data-mid="110095346" border="0" data-scale="95" src="https://freight.cargo.site/w/1000/i/3ac0f248c5a878aed9236cdaa73592756fe032cdefe0f6d976b8531d8b820faf/WebClipper-Lo-hi-Fi-Mockup.png" /&#62;
g
	
	Low to High-Fidelity Prototype


	ValidationWe tested the usability on five users to test the improved clipper workflow. Some insights of the test result are as follow:4 out of 5 users find the clipping process is straightforward and comprehensible


3 out of 5 users find the “Publish” and “Add as Draft” feature can be helpful when sharing clips with teammates 3 out of 5 users are not sure if the clips will remain accessible after they close the browser
 The improved Web Clipper design received positive feedback from the team and the users. It is currently in the implementation stage and aims to release on Google Chrome and Firefox in the future. For the next step, I would like to further explore ways to minimize the number of actions a user must undertake throughout the clipping process.


</description>
		
	</item>
		
		
	<item>
		<title>About &#38; contact</title>
				
		<link>https://ichiehpan.cargo.site/About-contact</link>

		<pubDate>Fri, 22 Jan 2021 10:39:33 +0000</pubDate>

		<dc:creator>I-Chieh Pan</dc:creator>

		<guid isPermaLink="true">https://ichiehpan.cargo.site/About-contact</guid>

		<description>
	
	
	&#60;img width="337" height="337" width_o="337" height_o="337" data-src="https://freight.cargo.site/t/original/i/88873af94099a1364adc9153a251857f16ecad3e606f3f3cbd1a3291d4a6cd5a/IMG_6131.JPG" data-mid="103712827" border="0"  src="https://freight.cargo.site/w/337/i/88873af94099a1364adc9153a251857f16ecad3e606f3f3cbd1a3291d4a6cd5a/IMG_6131.JPG" /&#62;
	

	I-Chieh Pan
A detail-focused designer with over 7 years of experience delivering user-centered design for digital products. I excel at working with senior stakeholders to analyse users’ needs. I’m constantly updating my knowledge of design tools and adding to my hands-on coding skills to build the best digital products I can&#38;nbsp;— I recently built an AI news app with Claude Code, designed to keep UX professionals informed and inspired, try it!
Feel free to download the&#38;nbsp;resume, drop me a message or connect on Linkedin!&#38;nbsp;
	

Sr. Product Designer @ New RelicApr 2022 — present
Sr. Product Designer @ dunnhumbyJun 2021 — Apr 2022
UX/UI Designer @ ITONICSMar 2019 — Aug 2020
UX/UI Designer @ Durch die Stadt
Jul 2017 — Nov 2018
Design Specialist @ ACERMar 2015 — Sep 2015
	

</description>
		
	</item>
		
		
	<item>
		<title>Home</title>
				
		<link>https://ichiehpan.cargo.site/Home-1</link>

		<pubDate>Thu, 17 Mar 2022 23:22:01 +0000</pubDate>

		<dc:creator>I-Chieh Pan</dc:creator>

		<guid isPermaLink="true">https://ichiehpan.cargo.site/Home-1</guid>

		<description>
[local-style="38286400"]{
display:none;
}


I’m I-Chieh, a senior product designer at New Relic with 7+ years of experience delivering user-centered design for enterprise SaaS. I specialise in observability and DevOps tooling —  translating massive, data-intensive systems into intuitive experiences that empower technical users.&#38;nbsp;
Most recently, I led the product design for Session Replay, a feature adopted by over 1,000 accounts and generating $3.52M in monthly recurring revenue within nine months.&#38;nbsp;
 

New Relic
Session ReplayUnified context for faster troubleshooting

	&#60;img width="3412" height="2346" width_o="3412" height_o="2346" data-src="https://freight.cargo.site/t/original/i/0346f6b8dcdbe519f845544123b493cb7a6d7cd9aba550de13d456c71f313b2b/SessionReplay-Thumb.png" data-mid="238755731" border="0"  src="https://freight.cargo.site/w/1000/i/0346f6b8dcdbe519f845544123b493cb7a6d7cd9aba550de13d456c71f313b2b/SessionReplay-Thumb.png" /&#62;


New Relic
SLI Query BuilderMaking SLI setup accessible at scale

	
&#60;img width="1688" height="1210" width_o="1688" height_o="1210" data-src="https://freight.cargo.site/t/original/i/7b0e8e2bcb154e883adcf5285978a4c54fc798ebc91b3f31d2aebc3f6d54e27c/CDF-cover.png" data-mid="246569585" border="0" data-scale="97" src="https://freight.cargo.site/w/1000/i/7b0e8e2bcb154e883adcf5285978a4c54fc798ebc91b3f31d2aebc3f6d54e27c/CDF-cover.png" /&#62;


ITONICS
Design SystemAccelerating development with systematic design

	&#60;img width="1019" height="654" width_o="1019" height_o="654" data-src="https://freight.cargo.site/t/original/i/59705e9f28888c15eab98a8a810423bb64b580b56c2d5ef44d04261db28afa07/Frame-453.png" data-mid="238706101" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/59705e9f28888c15eab98a8a810423bb64b580b56c2d5ef44d04261db28afa07/Frame-453.png" /&#62;


ITONICS
Web Clipper Standardizing how teams capture web insight

	&#60;img width="5104" height="3296" width_o="5104" height_o="3296" data-src="https://freight.cargo.site/t/original/i/dd4b9efed881cb7394db31feb361a8a5c984efa0fcb53b28e29f396c927d49b1/WebClipper-thumb.png" data-mid="242414749" border="0" data-scale="93" src="https://freight.cargo.site/w/1000/i/dd4b9efed881cb7394db31feb361a8a5c984efa0fcb53b28e29f396c927d49b1/WebClipper-thumb.png" /&#62;
</description>
		
	</item>
		
	</channel>
</rss>