Eron Chang

Product Designer

SUmmari

Jan 2021 - Dec 2022

San Francisco, USA

Company

Skills

Product Design / Visual design / Motion design

Role

Product Designer

SUmmari

Jan 2021 - Dec 2022

San Francisco, USA

Company

Skills

Product Design / Visual design / Motion design

Role

Product Designer

SUmmari

Jan 2021 - Dec 2022

San Francisco, USA

Company

Skills

Product Design / Visual design / Motion design

Role

Product Designer

SUmmari

Jan 2021 - Dec 2022

San Francisco, USA

Company

Skills

Product Design / Visual design / Motion design

Role

Product Designer

Contribution & Highlights

Summari is a company that leverages AI to provide instant summarization products across multiple platforms and devices. As the sole designer, I was responsible for building a consistent design system and branding across different targeted platforms as well as designing the UI, UX, graphics, and animations for all of the Summari products.

Our team launched a series of instant summarization products on Product Hunt on Mar 24th, 2022, and the result is truly rewarding and served as a validation of our works.

*In mid-2023, Summari was acquired and subsequently ceased providing services to our products.

Contribution & Highlights

Summari is a company that leverages AI to provide instant summarization products across multiple platforms and devices. As the sole designer, I was responsible for building a consistent design system and branding across different targeted platforms as well as designing the UI, UX, graphics, and animations for all of the Summari products.

Our team launched a series of instant summarization products on Product Hunt on Mar 24th, 2022, and the result is truly rewarding and served as a validation of our works.

*In mid-2023, Summari was acquired and subsequently ceased providing services to our products.

AI instant summarization Products

AI instant summarization Products

Web app & Browser Extension

Summari on Web

The Chrome extension will prompt user to summarize the content on pages we recognize as summarize-able and deliver the summary on the same page. Users can also use the Summari web app to manage links and summaries saved for later.

Web app & Browser Extension

Summari on Web

The Chrome extension will prompt user to summarize the content on pages we recognize as summarize-able and deliver the summary on the same page. Users can also use the Summari web app to manage links and summaries saved for later.

Web app & Browser Extension

Summari on Web

The Chrome extension will prompt user to summarize the content on pages we recognize as summarize-able and deliver the summary on the same page. Users can also use the Summari web app to manage links and summaries saved for later.

Mobile Apps

Summari on iOS/Android

The mobile Summari app allows our users to seamlessly generate summaries without leaving current app using the share extension on both iOS and Android: use share extension to share the link with Summari app and the app will deliver the summary right on the page via the extension.

Mobile Apps

Summari on iOS/Android

The mobile Summari app allows our users to seamlessly generate summaries without leaving current app using the share extension on both iOS and Android: use share extension to share the link with Summari app and the app will deliver the summary right on the page via the extension.

Mobile Apps

Summari on iOS/Android

The mobile Summari app allows our users to seamlessly generate summaries without leaving current app using the share extension on both iOS and Android: use share extension to share the link with Summari app and the app will deliver the summary right on the page via the extension.

Tablet App

Summari on iPadOS

Our user research informed us that there's need in providing the same Summari experience on larger mobile devices as a lot of our users often read on their iPads.

Tablet App

Summari on iPadOS

Our user research informed us that there's need in providing the same Summari experience on larger mobile devices as a lot of our users often read on their iPads.

Tablet App

Summari on iPadOS

Our user research informed us that there's need in providing the same Summari experience on larger mobile devices as a lot of our users often read on their iPads.

Slack Intergration

Summari on Slack

We recognized that users are also more likely to read online content sent by colleagues and teammates in the professional context. Therefore, we decided to start by providing users similar instant summarization experience on Slack to help users not only digest content received but also be able to directly share the summary along with any text-based link.

Slack Intergration

Summari on Slack

We recognized that users are also more likely to read online content sent by colleagues and teammates in the professional context. Therefore, we decided to start by providing users similar instant summarization experience on Slack to help users not only digest content received but also be able to directly share the summary along with any text-based link.

Slack Intergration

Summari on Slack

We recognized that users are also more likely to read online content sent by colleagues and teammates in the professional context. Therefore, we decided to start by providing users similar instant summarization experience on Slack to help users not only digest content received but also be able to directly share the summary along with any text-based link.

Twitter bot

Summari on Twitter

Considering reading articles shared by others on social media is also one significant way people engage with online articles, we decided to work on a mini yet powerful product that allow user to simply reply "summarize" to the tweet with link and our bot will instantly summarize and deliver the summary. This also serve as a way for us to increase product exposure on Twitter.

Twitter bot

Summari on Twitter

Considering reading articles shared by others on social media is also one significant way people engage with online articles, we decided to work on a mini yet powerful product that allow user to simply reply "summarize" to the tweet with link and our bot will instantly summarize and deliver the summary. This also serve as a way for us to increase product exposure on Twitter.

Twitter bot

Summari on Twitter

Considering reading articles shared by others on social media is also one significant way people engage with online articles, we decided to work on a mini yet powerful product that allow user to simply reply "summarize" to the tweet with link and our bot will instantly summarize and deliver the summary. This also serve as a way for us to increase product exposure on Twitter.

Case study - MObile Apps

Case study - MObile Apps

Overview

Summari started as a read-later tool that helps users to save and manage contents while also being able to request summaries for contents you saved. To begin with, the summaries are written and delivered by our geniuses, a community of college students. In order to massively scale up our summarization service to more users, and to shorten the amount of time for us to deliver summaries to users more promptly, Summari teamed up with Primer to enable us using AI as our instant summarization engine to deliver comprehensive and high-quality summaries. Summari aims to help our users get the main ideas of any text-based link before investing time reading the full content.

In this case study, I will delve into the different challenges faced during the integration of AI technology into our products on various platforms and devices, transforming them into advanced generative AI tools for our users.

Overview

Summari started as a read-later tool that helps users to save and manage contents while also being able to request summaries for contents you saved. To begin with, the summaries are written and delivered by our geniuses, a community of college students. In order to massively scale up our summarization service to more users, and to shorten the amount of time for us to deliver summaries to users more promptly, Summari teamed up with Primer to enable us using AI as our instant summarization engine to deliver comprehensive and high-quality summaries. Summari aims to help our users get the main ideas of any text-based link before investing time reading the full content.

In this case study, I will delve into the different challenges faced during the integration of AI technology into our products on various platforms and devices, transforming them into advanced generative AI tools for our users.

Overview

Summari started as a read-later tool that helps users to save and manage contents while also being able to request summaries for contents you saved. To begin with, the summaries are written and delivered by our geniuses, a community of college students. In order to massively scale up our summarization service to more users, and to shorten the amount of time for us to deliver summaries to users more promptly, Summari teamed up with Primer to enable us using AI as our instant summarization engine to deliver comprehensive and high-quality summaries. Summari aims to help our users get the main ideas of any text-based link before investing time reading the full content.

In this case study, I will delve into the different challenges faced during the integration of AI technology into our products on various platforms and devices, transforming them into advanced generative AI tools for our users.

More Context

With a small team comprising 1 Product Manager, 1 Product Designer, and only 3-5 developers, our resources were initially limited. Our journey started under the brand Joggo, focusing on basic infrastructure, content curation, and a request-based summary service. As we defined effective summary structures, our college student team played a dual role in content creation for providing immediate value to users and data provision for AI training.

As we grew, we partnered to develop our summarization AI. To enhance user experience and offer more immediate value, I suggested proactive summarization of popular content, leading to a subscription service within Joggo for direct access and summarized newsletters.

Eventually, when the AI engine was ready, we transitioned to Summari, a name reflecting our core service more clearly.

More Context

With a small team comprising 1 Product Manager, 1 Product Designer, and only 3-5 developers, our resources were initially limited. Our journey started under the brand Joggo, focusing on basic infrastructure, content curation, and a request-based summary service. As we defined effective summary structures, our college student team played a dual role in content creation for providing immediate value to users and data provision for AI training.

As we grew, we partnered to develop our summarization AI. To enhance user experience and offer more immediate value, I suggested proactive summarization of popular content, leading to a subscription service within Joggo for direct access and summarized newsletters.

Eventually, when the AI engine was ready, we transitioned to Summari, a name reflecting our core service more clearly.

More Context

With a small team comprising 1 Product Manager, 1 Product Designer, and only 3-5 developers, our resources were initially limited. Our journey started under the brand Joggo, focusing on basic infrastructure, content curation, and a request-based summary service. As we defined effective summary structures, our college student team played a dual role in content creation for providing immediate value to users and data provision for AI training.

As we grew, we partnered to develop our summarization AI. To enhance user experience and offer more immediate value, I suggested proactive summarization of popular content, leading to a subscription service within Joggo for direct access and summarized newsletters.

Eventually, when the AI engine was ready, we transitioned to Summari, a name reflecting our core service more clearly.

Goals & Challenges

With the ability to summarize any text-based link instantly using AI, Summari now also has the opportunity to scale up our summarization services and take a big step forward to provide our value propositions on more platforms and devices where users would encounter links to read. The new overarching goal is to:

Design for a seamless and consistent summarization experience, enable users to obtain summaries at ease on all medium.

Design for a seamless and consistent AI summarization experience, enable users to obtain summaries at ease on all medium.

After conducting initial tests and research on our mobile apps, Chrome extension, and user growth strategies, we identified several critical challenges as below.

Goals & Challenges

With the ability to summarize any text-based link instantly using AI, Summari now also has the opportunity to scale up our summarization services and take a big step forward to provide our value propositions on more platforms and devices where users would encounter links to read. The new overarching goal is to:

Design for a seamless and consistent summarization experience, enable users to obtain summaries at ease on all medium.

After conducting initial tests and research on our mobile apps, Chrome extension, and user growth strategies, we identified several critical challenges as below.

Goals & Challenges

With the ability to summarize any text-based link instantly using AI, Summari now also has the opportunity to scale up our summarization services and take a big step forward to provide our value propositions on more platforms and devices where users would encounter links to read. The new overarching goal is to:

Design for a seamless and consistent summarization experience, enable users to obtain summaries at ease on all medium.

After conducting initial tests and research on our mobile apps, Chrome extension, and user growth strategies, we identified several critical challenges as below.

iOS
iPadOS
Android
Let's start with our mobile apps…

This is the MVP of our mobile app. It was simple to start with but allowed user to save, archive, and curate their own contents. And most importantly, it has a floating action button that allows user to tap on, insert the article link they want to summarize, and the app will generate the summary to user.

However, we quickly recognized the friction for users to manually copy link, switch to a different app, tap the button to paste in the link, and then wait for the summary to be generated. Therefore, in this early MVP version of using AI to generate summaries, we were experiencing much less usage of AI summarization than we expected.

iOS
iPadOS
Android
Let's start with our mobile apps…

This is the MVP of our mobile app. It was simple to start with but allowed user to save, archive, and curate their own contents. And most importantly, it has a floating action button that allows user to tap on, insert the article link they want to summarize, and the app will generate the summary to user.

However, we quickly recognized the friction for users to manually copy link, switch to a different app, tap the button to paste in the link, and then wait for the summary to be generated. Therefore, in this early MVP version of using AI to generate summaries, we were experiencing much less usage of AI summarization than we expected.

iOS
iPadOS
Android
Let's start with our mobile apps…

This is the MVP of our mobile app. It was simple to start with but allowed user to save, archive, and curate their own contents. And most importantly, it has a floating action button that allows user to tap on, insert the article link they want to summarize, and the app will generate the summary to user.

However, we quickly recognized the friction for users to manually copy link, switch to a different app, tap the button to paste in the link, and then wait for the summary to be generated. Therefore, in this early MVP version of using AI to generate summaries, we were experiencing much less usage of AI summarization than we expected.

Challenge:

How might we allow users to get summary right where users are viewing the contents on mobile?

Challenge:

How might we allow users to get summary right where users are viewing the contents on mobile?

Challenge:

How might we allow users to get summary right where users are viewing the contents on mobile?

👀 Spot the design opportunity…

I recognized an opportunity when I realized that users need to tap the share button to acquire a link for summarization. Guiding users to obtain the link is a step in the right direction, but I saw potential for further optimization.


By leveraging the UI that appears after tapping the share button in browsers or reader apps, I identified a way to streamline the process. We could enable the copied link to be sent directly to our Summari app for summarization, using the share extension, thereby eliminating the need for users to switch apps.

Solution
Share Extension & Sheet UI - Allow Summari to work where user reads

We seamlessly integrated our app into the share extension UI, enabling users to access it as a shortcut. When a link is shared to our app, we ingeniously trigger a sheet UI that overlays the original app being read. This interaction and thoughtful design eliminates the hassle of app-switching, allowing users to view summaries right on top of their current app, and providing a non-intrusive, convenient way for users to get a gist of the article before diving into the full read. This update also helped us significantly boost the number of AI summarization usage.

Solution
Share Extension & Sheet UI - Allow Summari to work where user reads

We seamlessly integrated our app into the share extension UI, enabling users to access it as a shortcut. When a link is shared to our app, we ingeniously trigger a sheet UI that overlays the original app being read. This interaction and thoughtful design eliminates the hassle of app-switching, allowing users to view summaries right on top of their current app, and providing a non-intrusive, convenient way for users to get a gist of the article before diving into the full read. This update also helped us significantly boost the number of AI summarization usage.

Solution
Share Extension & Sheet UI - Allow Summari to work where user reads

We seamlessly integrated our app into the share extension UI, enabling users to access it as a shortcut. When a link is shared to our app, we ingeniously trigger a sheet UI that overlays the original app being read. This interaction and thoughtful design eliminates the hassle of app-switching, allowing users to view summaries right on top of their current app, and providing a non-intrusive, convenient way for users to get a gist of the article before diving into the full read. This update also helped us significantly boost the number of AI summarization usage.

Challenge:

How might we better handle the “waiting experience” while AI generates summary?

Challenge:

How might we better handle the “waiting experience” while AI generates summary?

Challenge:

How might we better handle the “waiting experience” while AI generates summary?

Summary engine starting up...

It won’t be long now...

Analyzing text...

Understanding context...

Chunking text...

Identifying key ideas...

Abstracting...

Summarizing...

Creating bullets...

Formatting...

⏳ Wait…

While our products promises "instant" summarization, it's more accurately "relatively instant". Initially, the MVP version offered a simple animation indicating AI summarizing, but nothing else during the wait time. This led to a significant dropout rate – nearly 60% of users requested summaries but left before completion. Though summaries continued to generate in the background, many were left unread eventually.


Our initial MVP highlighted the need for an enhanced waiting experience and mechanisms to prompt users to return and read their requested summaries. User research revealed that while our users were willing to wait for summaries, understanding the expected duration of this process was important to them. This insight was crucial in guiding our next steps towards optimization.

While our products promises "instant" summarization, it's more accurately "relatively instant". Initially, the MVP version offered a simple animation indicating AI summarizing, but nothing else during the wait time. This led to a significant dropout rate – nearly 60% of users requested summaries but left before completion. Though summaries continued to generate in the background, many were left unread eventually.


Our initial MVP highlighted the need for an enhanced waiting experience and mechanisms to prompt users to return and read their requested summaries. User research revealed that while our users were willing to wait for summaries, understanding the expected duration of this process was important to them. This insight was crucial in guiding our next steps towards optimization.

While our products promises "instant" summarization, it's more accurately "relatively instant". Initially, the MVP version offered a simple animation indicating AI summarizing, but nothing else during the wait time. This led to a significant dropout rate – nearly 60% of users requested summaries but left before completion. Though summaries continued to generate in the background, many were left unread eventually.


Our initial MVP highlighted the need for an enhanced waiting experience and mechanisms to prompt users to return and read their requested summaries. User research revealed that while our users were willing to wait for summaries, understanding the expected duration of this process was important to them. This insight was crucial in guiding our next steps towards optimization.

Solution
⏱️ Provide more details to set lead time expectation

Due to AI limitations, the summarization process for an average online article of about 1,000 to 1,500 words typically takes around 20 seconds. This includes content parsing, API communication, and displaying results on the user interface. To enhance user experience in our optimized version, we've updated our messaging to set clearer expectations.

🚪 Provide safe escape for lead time

To further free our users from lead time, I suggested implementing a "Save to Read Later" feature. This allows users to dismiss the summarizing screen with confidence while the process continues in the background. Once the summary is ready, we notify the user through a push notification, encouraging them to read it in our app and thereby boosting not only the summarization usage but also our app user engagement.

Solution
⏱️ Provide more details to set lead time expectation

Due to AI limitations, the summarization process for an average online article of about 1,000 to 1,500 words typically takes around 20 seconds. This includes content parsing, API communication, and displaying results on the user interface. To enhance user experience in our optimized version, we've updated our messaging to set clearer expectations.

🚪 Provide safe escape for lead time

To further free our users from lead time, I suggested implementing a "Save to Read Later" feature. This allows users to dismiss the summarizing screen with confidence while the process continues in the background. Once the summary is ready, we notify the user through a push notification, encouraging them to read it in our app and thereby boosting not only the summarization usage but also our app user engagement.

Solution
⏱️ Provide more details to set lead time expectation

Due to AI limitations, the summarization process for an average online article of about 1,000 to 1,500 words typically takes around 20 seconds. This includes content parsing, API communication, and displaying results on the user interface. To enhance user experience in our optimized version, we've updated our messaging to set clearer expectations.

🚪 Provide safe escape for lead time

To further free our users from lead time, I suggested implementing a "Save to Read Later" feature. This allows users to dismiss the summarizing screen with confidence while the process continues in the background. Once the summary is ready, we notify the user through a push notification, encouraging them to read it in our app and thereby boosting not only the summarization usage but also our app user engagement.

Challenge:

How might we increase the rate for user to generate the first summary after installing the app?

Challenge:

How might we increase the rate for user to generate the first summary after installing the app?

Challenge:

How might we increase the rate for user to generate the first summary after installing the app?

✨ Aiming for the "Aha" moment

One unexpected challenge we faced was increasing user engagement, specifically the rate at which users generate their first summary after app installation. Initially, only 38% of users created a summary independently within the first three days post-onboarding.


Understanding why this metric is crucial, we identified it as the "Aha Moment" for our users – the point where they fully grasp and experience the value proposition Summari offers. This moment occurs when a user, while reading something on their phone, decides to use Summari for a quick summary. The realization of saving time and efficiently grasping content is the pivotal experience we aim for every user to have.

✨ Aiming for the "Aha" moment

One unexpected challenge we faced was increasing user engagement, specifically the rate at which users generate their first summary after app installation. Initially, only 38% of users created a summary independently within the first three days post-onboarding.


Understanding why this metric is crucial, we identified it as the "Aha Moment" for our users – the point where they fully grasp and experience the value proposition Summari offers. This moment occurs when a user, while reading something on their phone, decides to use Summari for a quick summary. The realization of saving time and efficiently grasping content is the pivotal experience we aim for every user to have.

✨ Aiming for the "Aha" moment

One unexpected challenge we faced was increasing user engagement, specifically the rate at which users generate their first summary after app installation. Initially, only 38% of users created a summary independently within the first three days post-onboarding.


Understanding why this metric is crucial, we identified it as the "Aha Moment" for our users – the point where they fully grasp and experience the value proposition Summari offers. This moment occurs when a user, while reading something on their phone, decides to use Summari for a quick summary. The realization of saving time and efficiently grasping content is the pivotal experience we aim for every user to have.

Let's look at how user learn how to generate a summary…

Users were instructed on using the powerful share extension to get summary and pinning it to their favorites for easy access. We also informed them about the option to receive notifications once their summary is ready, eliminating the need to wait for every summary to be generated. This led to smoothly integrating a step for notification permissions and providing example links for users to immediately try out the summarizing process.

Let's look at how user learn how to generate a summary…

Users were instructed on using the powerful share extension to get summary and pinning it to their favorites for easy access. We also informed them about the option to receive notifications once their summary is ready, eliminating the need to wait for every summary to be generated. This led to smoothly integrating a step for notification permissions and providing example links for users to immediately try out the summarizing process.

Let's look at how user learn how to generate a summary…

Users were instructed on using the powerful share extension to get summary and pinning it to their favorites for easy access. We also informed them about the option to receive notifications once their summary is ready, eliminating the need to wait for every summary to be generated. This led to smoothly integrating a step for notification permissions and providing example links for users to immediately try out the summarizing process.

🔍 Now let's re-examine our users

To delve deeper into user behavior, we conducted several rounds of user interviews. We discovered two distinct user types: the tech-savvy ones who easily adapted to using the share extension, and the majority who tended to use the app directly for summaries, despite our onboarding animations and tutorials. These insights underscored the need to fine-tune our onboarding process, ensuring it is effectively catering to both user groups.

🔍 Now let's re-examine our users

To delve deeper into user behavior, we conducted several rounds of user interviews. We discovered two distinct user types: the tech-savvy ones who easily adapted to using the share extension, and the majority who tended to use the app directly for summaries, despite our onboarding animations and tutorials. These insights underscored the need to fine-tune our onboarding process, ensuring it is effectively catering to both user groups.

🔍 Now let's re-examine our users

To delve deeper into user behavior, we conducted several rounds of user interviews. We discovered two distinct user types: the tech-savvy ones who easily adapted to using the share extension, and the majority who tended to use the app directly for summaries, despite our onboarding animations and tutorials. These insights underscored the need to fine-tune our onboarding process, ensuring it is effectively catering to both user groups.

Solution
Revised user onboarding flow for both user groups

We revamped our onboarding steps to broaden our focus beyond the share extension feature. Now, we started with guiding all users through the simplest and most straightforward way to generate a summary: copying and pasting the article link directly into the Summari app. We also added some additional features to take this route to the next step.

Solution
Revised user onboarding flow for both user groups

We revamped our onboarding steps to broaden our focus beyond the share extension feature. Now, we started with guiding all users through the simplest and most straightforward way to generate a summary: copying and pasting the article link directly into the Summari app. We also added some additional features to take this route to the next step.

Solution
Revised user onboarding flow for both user groups

We revamped our onboarding steps to broaden our focus beyond the share extension feature. Now, we started with guiding all users through the simplest and most straightforward way to generate a summary: copying and pasting the article link directly into the Summari app. We also added some additional features to take this route to the next step.

Solution
Take in-app summarize experience to the next level

Beyond refining the onboarding experience, we introduced additional features to elevate user interaction. One key update was the auto-detection of links copied to the clipboard. Now, when users switch to our app with a link copied, a prompt appears, offering to summarize the link with just one tap. Additionally, we implemented an educational UI, guiding users to revisit and understand the various summary generation methods available in our app.

Solution
Take in-app summarize experience to the next level

Beyond refining the onboarding experience, we introduced additional features to elevate user interaction. One key update was the auto-detection of links copied to the clipboard. Now, when users switch to our app with a link copied, a prompt appears, offering to summarize the link with just one tap. Additionally, we implemented an educational UI, guiding users to revisit and understand the various summary generation methods available in our app.

Solution
Take in-app summarize experience to the next level

Beyond refining the onboarding experience, we introduced additional features to elevate user interaction. One key update was the auto-detection of links copied to the clipboard. Now, when users switch to our app with a link copied, a prompt appears, offering to summarize the link with just one tap. Additionally, we implemented an educational UI, guiding users to revisit and understand the various summary generation methods available in our app.

Results

The enhancements above significantly boosted user engagement. After launching the updated version, we saw the percentage of new users experiencing their "Aha Moment" within the first three days rise to more than 90%.

Our team also officially launched our cross-platform instant summarization products on Product Hunt on Mar 24th, 2022 and we obtained some truly rewarding recognitions.

Results

The enhancements above significantly boosted user engagement. After launching the updated version, we saw the percentage of new users experiencing their "Aha Moment" within the first three days rise to more than 90%.

Our team also officially launched our cross-platform instant summarization products on Product Hunt on Mar 24th, 2022 and we obtained some truly rewarding recognitions.

Results

The enhancements above significantly boosted user engagement. After launching the updated version, we saw the percentage of new users experiencing their "Aha Moment" within the first three days rise to more than 90%.

Our team also officially launched our cross-platform instant summarization products on Product Hunt on Mar 24th, 2022 and we obtained some truly rewarding recognitions.