May 2023

EncoreLife (CHI PLAY 2024)

B to C | Tablet

Research Project | iOS

Gamification

Retirement is a significant life event that impacts well-being. Although demographic changes have led to longer post-retirement periods, the extended lifespan does not guarantee increased quality of life, as older adults may experience increased loneliness, loss of purpose, and adverse health outcomes. This study developed a gamified app EncoreLife, featuring collaborative local activities, digital social interactions, and a reminder system, aiming to foster social connections and establish daily life structures for older adults transitioning to retirement.

Project Type

Research Project
0-1 UX Design

Duration

4 months

Team

4 UX Designers /
UX Researchers

My Role

UX Design Lead
+
UX Research Lead

Project Type

0-1 UX Design

Duration

12 months

Team

1 UIUX Designer/ Researcher
+
1 Product Manager
+
2 Graphic Designers
+
6 Developers

My Role

UX Design Lead
+
UX Researcher

Project Type

0-1 UX Design

Duration

3 months

Team

3 UX Designers /
UX Researchers
+
1 Product Manager
+
2 Developers

My Role

UX Designer
+
UX Researcher

Project Type

0-1 UX Design

Duration

3 months

Team

2 UX Designers /
UX Researchers
+
1 Product Manager
+
3 Developers

My Role

UX Designer
+
UX Researcher

Project Type

0-1 UX Design

Duration

1 month

Team

2 UX Designers /
UX Researchers
+
2 Developers

My Role

UX Designer
+
UX Researcher

Project Type

0-1 UX Design

Duration

3 months

Team

1 UX Designers /
UX Researchers
+
1 Product Manager
+
2 Developers

My Role

UX Designer
+
UX Researcher

PROJECT OVERVIEW

T O B E G I N W I T H ...‍

Problem Statement

Currently, our workflow involves several steps, including inputting a topic, generating outlines, choosing detailed options (paid), generating slides, audio (paid), and videos (paid). However, our research indicates that some users find the current flow confusing, while others desire a more comprehensive experience without immediate payment. Unfortunately, our current AI costs pose a challenge in providing extended experiences without compromising on expenses.

Goals

We aim to redesign our workflow to enhance user understanding of available functionalities and increase overall satisfaction with the DrLambda experience by:

1. Provide users with insights into more advanced functions without incurring additional server costs.
2. Improve the conversion rate 📈 from free users to paid subscribers.

How Might We...
effectively guide and demonstrate the value of paid features to new creators/users at an earlier stage in their experience?
‍

After Quantitative &
Qualitative Research

(Refined) How Might We...
enhance the value demonstration for unpaid users and streamline the workflow for both paid and unpaid users to minimize confusion and friction, thus boosting the conversion rate?

Solution Overview

S H O R T - T E R M
‍
1. Simplify and provide visually clear subscription and credit system
2. User-friendly workflow with easy navigation and step rvisiting
3. New dashboard for project organization
4. Presenter view feature on the website
‍

L O N G - T E R M
‍
1. Updated and adaptable design system
2. More template options and smart template using AI
3. Editing tool for customizing
4. AI-autogenerated slides with images
5. AI assistant for user support and problem resolution
6. AI-generate & regenerate text/image
7. AI video generation based on slides' contents

FINAL IMPACT 📈

19%

‍increase in subscription conversion

40%

‍increase in returning users

26%

increase in task completion time

So, how did we get there?‍

RESEARCH

Primary Research

4 Key Findings

Information Overload

Users feel swamped by information overload on each step & page.

The page's packed with so much info, making it difficult to know where to focus my attention.

User Autonomy

Users want the ability to customize, adapt, and maintain control over their workflow and input/output processes.

lf the slide I generate can combine with my template, it would make my life much easier.

Pricing Transparency

Users are confused about how the pricing for each feature operates.

The screen displays a requirement for 10 credits, but I hadn't seen any mention of credits before. How many credits are required to create pages again?

Incomplete Workflow

Users need to download the slides and leave the website to present them using another application.

I feel like the entire process of downloading these PDF slides and presenting them elsewhere adds a lot of extra work.

Competitive Analysis

✅Accessible Guides
‍
Nearly all competitors provide essential guides, including 'Getting Started' and 'Help' documentation, conveniently located within both the dashboard and slide editing interface.

✅Transparent Credit Systems
‍
The majority of competitors maintain clear credit transparency, offering complimentary trials of their advanced artificial intelligence tools as part of their initial AI credit allocation.

✅Versatile Compatibility
‍
Seamless integration with leading third-party apps such as Figma and GIPHY.

Persona & User Journey Map

To gain deeper insights into our users and their experiences within our design framework, we developed a persona and a user journey map.

DESIGN & PROTOTYPES

B E F O R E
❌Projects' information is not clearly presented

1. Projects aren't organized
‍
2. Lack of credits information

A F T E R
Learn old/new projects at a glance
‍
1. All projects organized by date/last viewed/recently viewed/starred
‍
2. Folders for users better organize their projects
‍
3. "Grid" or "List" project view according to user's preference

02 Summary & Files

B E F O R E
❌Information overload in one page
‍
1. Topic, audience, language, files, and link options are all included in one small panel, which might overwhelm user
‍
2. GPT 3.5 and 4 switch button is not obvious

A F T E R
Streamlined overall workflow

1. We dissected the steps from "summary" to "summary" + "files" ensuring each step is dedicated to specific tasks, thereby preventing information overload for users
‍
2. "Tone" option allow user to choose how they want their presentation tone be like

03 Outlines

B E F O R E
❌Unclear information and hard to navigate

1. Clearer information hierarchy and more intuitive user actions needed
‍

A F T E R
Visual decluttering on responsive page information

1. Options for user manually input outlines OR AI generate outlines
‍
2. A responsive overview section to each slide

3. "Regenerate" funtion

04 Template

B E F O R E
❌Fixed template without options for users

A F T E R
Multiple template options based on users' needs

🟦 Academic/business/casual templates

AI-Powered Template Creation

🟦 Integrating comprehensive AI capabilities at every touchpoint, ensuring a seamless and fully-enhanced customization experience

05 Slides

B E F O R E
Customization Gap, lack of user autonomy
❌A lack of personalization in the AI-generated options, failing to match individual user preferences quickly
‍
❌Without "regenerate" option
‍

A F T E R
Expanding the feature due to heavy user reliance, design to build user trust and navigational efficiency
1. AI-assisted images generation

‍
2. AI-assisted content and styling editing: Providing efficient and practical AI-assisted content editing and styling for better slide content customization

‍
3. "Edit layouts" features based on users' needs

06 Scripts and Presentation

B E F O R E
❌Without presentation mode
❌The "Scripts" page was separated from slides

‍

A F T E R
Presenter view

🟦 We introduced a presenter view in the feature workflow, enabling users to present their slides directly without the need to download or navigate away from Dr. Lambda's website.

Design System

💡We extracted colors (primary and secondary colors) from DrLambda's logo and build the design system based on that.

💡We also introduced the Power Buttons: Incorporated into the design system, these buttons feature gradient colors and highlight AI-related features throughout the website. Their design helps Dr. Lambda demonstrate its technological prowess and value, especially to users new to AI and the platform.

USER TESTING

KEY FEATURE DEVELOPMENT

B E F O R E

A F T E R

D E V E L O P M E N T O F F E A T U R E 0 1

Breaking user input to bite-size information

💡We refined the steps in the stepper for enhanced visual clarity

D E V E L O P M E N T O F F E A T U R E 0 1

Iteration 1

💡We dissected the steps according to information architecture and user feedback, ensuring each step is dedicated to specific tasks, thereby preventing information overload for users.

D E V E L O P M E N T O F F E A T U R E 0 1

Final Design

💡Streamline the content on each page to avoid overwhelming users and make the key points stand out.

D E V E L O P M E N T O F F E A T U R E 0 2

New Subscription Interface

💡We designed a new subscription pop-up window that helps enhance user experience by:

1. Allowing users to access subscription plans without interrupting their workflow
2. Providing a clearer visual hierarchy for easier comprehension
3. Including a credit calculator to help new users understand and efficiently use their limited free credits

D E V E L O P M E N T O F F E A T U R E 0 2

Iteration 1

💡Add missing subscription frequencies. Explain "Credit" and its breakdown briefly.

💡Implement the brand color more strategically to achieve a cleaner interface.

D E V E L O P M E N T O F F E A T U R E 0 2

Final Design

R E G E N E R A T E

A I - G E N E R A T E D I M A G E S

A I - G E N E R A T E D T E X T

A I - G E N E R A T E D S M A R T T E M P L A T E

D E V E L O P M E N T O F F E A T U R E 0 3

New AI-related Features

💡Following user feedback and extensive usability testing, we introduced the Regeneration Buttons for AI-generated images, text content, templates and scripts:

💡Regeneration Buttons enable users to refresh their AI-generated content without extra charges or using additional credits.
‍
💡Also, users are given the choice between an AI-guided template creation session for a more personalized approach, or selecting directly from a curated library for speed and convenience.

" High usage of the generative feature per element raises operational costs, posing a challenge for the sustainability of our subscription-based model..."

A I - G E N E R A T E D I M A G E S

A I - G E N E R A T E D T E X T

A I - G E N E R A T E D S M A R T T E M P L A T E

A I - G E N E R A T E D S C R I P T S

D E V E L O P M E N T O F F E A T U R E 0 3

Final Design

💡We consider this feature fundamental for enhancing the user experience on AI-generated content (AIGC) platforms. Convincing the business teams of the necessity of this feature, despite its additional cost, was a key milestone in prioritizing the user experience.
‍
💡Its effective, user-friendly bulk editing capability positions Dr.Lambda favorably in the competitive market, aligning with goals of user retention and attracting new clientele.

D E V E L O P M E N T O F F E A T U R E 0 4

Presenter View

💡We introduced a presenter view in the feature workflow, enabling users to present their slides directly without the need to download or navigate away from Dr. Lambda's website.

" We do not wish to introduce an additional step for users to select the time length, as the script feature is not the primary focus of our target."

D E V E L O P M E N T O F F E A T U R E 0 4

Iteration 1

💡We accepted the advice and eliminated the additional step of allowing users to choose the time length of the scripts. We then delved into brainstorming the presenter view with scripts to enhance the effectiveness/value of the script component.

D E V E L O P M E N T O F F E A T U R E 0 4

Final Design

💡The presenter view, featuring a timer, slides, and scripts, enables users to better align each script with the corresponding slide, while the timer provides additional assistance in managing their presentation timing.

TAKEAWAYS

What I have learned...

🌊Turn Challenges into Opportunities

UX design is not a smooth process. Every twist – be it pushback, evolving scopes, or compressed timelines – is a chance to grow. Through this project, I learned how to expect the unexpected and adapt swiftly.

🧭Prioritize Scalability in Design

As a designer, it's important to remember that I'm not only designing for now but also for the future. This project taught me to think long-term, considering the broader impact and future growth potential of every design decision.

💡Turn Rationales are Backbone of Design

Design is indeed a journey, and it's perfectly fine to have quick-fix solutions for immediate needs alongside long-term strategies that may take years to unfold. But strong rationales behind every decision are crucial. It helped me defend designs and create more constructive communication.

✍️ Take User Feedback Wisely

User feedback highlighted the importance of not overlooking technical pain points in designing the AI experience, as these are intrinsically linked and collectively shape the desired user experience.

PROJECT OVERVIEW

T O B E G I N W I T H ...‍

Problem Statement

Retirement can be a challenging period for many individuals, leading to feelings of a lack of accomplishment, belonging, and life structure. Although demographic changes have led to longer post-retirement periods, the extended lifespan does not guarantee increased quality of life, as older adults may experience increased loneliness, loss of purpose, and adverse health outcomes. This study developed a gamified app EncoreLife, featuring collaborative local activities, digital social interactions, and a reminder system, aiming to foster social connections and establish daily life structures for older adults transitioning to retirement.

Goals

Our goal with EncoreLife is to improve the quality of life for new retirees during this transition period. Through in-depth interviews and literature reviews, we identified that retirees suffer from a lack of meaning in life and increased loneliness.

Solution Overview

So, how did we get there?‍

RESEARCH

Research Model

Design Overview

Preliminary User Feedback

DESIGN & PROTOTYPES

01 Collaborative Local Activity

💡Fun Activity as a Game!
‍
💡Small Local Challenges
‍
💡Individual & Group
‍
💡Guide & Progress Bar
‍
💡Congrats!
‍
💡Badges, Points & Coupons

💡Integrate Local Groups

💡Group Challenges

💡Share Achievements

💡Co-build Shared Space

💡View Others’ Boards

💡Leaderboard

03 Activity Management

💡Integrate Personal Calendars

💡Progress Bar

💡Track To-Do Lists

RESEARCH

Primary Research

4 Key Findings

Information Overload

Users feel swamped by information overload on each step & page.

The page's packed with so much info, making it difficult to know where to focus my attention.

User Autonomy

Users want the ability to customize, adapt, and maintain control over their workflow and input/output processes.

lf the slide I generate can combine with my template, it would make my life much easier.

Pricing Transparency

Users are confused about how the pricing for each feature operates.

The screen displays a requirement for 10 credits, but I hadn't seen any mention of credits before. How many credits are required to create pages again?

Incomplete Workflow

Users need to download the slides and leave the website to present them using another application.

I feel like the entire process of downloading these PDF slides and presenting them elsewhere adds a lot of extra work.

Secondary Research

PROJECT OVERVIEW

T O B E G I N W I T H ...‍

Problem Statement

Goals

Quackiverse aims to create an AI-powered, gamified language tutor targeting children aged 6 to 15, focused on cultivating their reading, speaking, and listening abilities in a secondary language. Through personalized avatars, real-world AR interactions, and adaptive game-based learning pathways, this platform aims to make language learning accessible, enjoyable, and flexible.

Solution Overview

So, how did we get there?‍

RESEARCH

Research Model

Design Overview

Preliminary User Feedback

DESIGN & PROTOTYPES

01 Collaborative Local Activity

💡Fun Activity as a Game!
‍
💡Small Local Challenges
‍
💡Individual & Group
‍
💡Guide & Progress Bar
‍
💡Congrats!
‍
💡Badges, Points & Coupons

💡Integrate Local Groups

💡Group Challenges

💡Share Achievements

💡Co-build Shared Space

💡View Others’ Boards

💡Leaderboard

03 Activity Management

💡Integrate Personal Calendars

💡Progress Bar

💡Track To-Do Lists

RESEARCH

Primary Research

4 Key Findings

Information Overload

Users feel swamped by information overload on each step & page.

The page's packed with so much info, making it difficult to know where to focus my attention.

User Autonomy

Users want the ability to customize, adapt, and maintain control over their workflow and input/output processes.

lf the slide I generate can combine with my template, it would make my life much easier.

Pricing Transparency

Users are confused about how the pricing for each feature operates.

The screen displays a requirement for 10 credits, but I hadn't seen any mention of credits before. How many credits are required to create pages again?

Incomplete Workflow

Users need to download the slides and leave the website to present them using another application.

I feel like the entire process of downloading these PDF slides and presenting them elsewhere adds a lot of extra work.

Secondary Research

PROJECT OVERVIEW

T O B E G I N W I T H ...‍

Problem Statement

Launch V6CO's website as a minimum viable product (MVP) that truly represents our mission to revolutionize wellness and home healthcare. This platform will double as an educational resource on wellness and longevity and as a storefront showcasing our pioneering Dr.@home product line. It's essential that the website reflects the team's passion, expertise, and forward-thinking approach, underscoring our commitment to improving the lives of the elderly and those at risk around the world. The site will also highlight our global manufacturing services and emphasize our secure distribution channels, including established partnerships with Costco, CVS, and Walgreens.

Goals

The goal for the MVP launch is to establish a robust online presence that:
‍
🎯 Clearly communicates V6CO’s vision and mission to its visitors.
🎯 Showcases our products' detailed information on its use and benefits as well as how they can purchase.
🎯 Serves as an intuitive and accessible point of contact for potential vendors, partners, and customers seeking to join or support our mission.
🎯 Provides valuable content on wellness and preventive health care, highlighting our advocacy for affordable home wellness solutions.
🎯 Generates interest and leads for future product lines and catalyzes a community around home-based wellness care.
🎯 Offers a seamless user experience, despite the limited initial product range, preparing the ground for scaling up with future offerings in 2024 and beyond.

How Might We...
effectively guide and demonstrate the value of paid features to new creators/users at an earlier stage in their experience?
‍

Final Impact 📈

The result was a seamless, scalable website that not only elevates the brand's digital presence but also sets a solid foundation for future product expansions. The launch strategy incorporated a comprehensive marketing toolkit to amplify reach and engagement. Post-launch, the website has demonstrated a tangible increase in customer interaction and potential partner inquiries, validating the success of the MVP as a cornerstone for V6CO’s ongoing digital strategy.
‍

DESIGN & PROTOTYPES

💡Our goal for the homepage is to present the most valuable information to our users, showcasing our most popular products and highlighting the reasons to choose our offerings. Additionally, we provide the 'Latest news' for users to explore.

Products

💡We are continuously expanding our product range across multiple series, with each product featuring a dedicated page that provides detailed information and a link to where it will be available for purchase.

News

💡We will regularly publish health-related articles and news each month to keep our users informed and up-to-date.

S H O R T - T E R M
‍
💡This page showcases our partners to date, including parmacies, businesses and retailers that carry our products.

Partners

L ON G - T E R M
‍
💡As we have transitioned our company model from B2C to B2B, our website's target audience has also shifted. Consequently, we have introduced a "Become a Distributor" webpage for businesses interested in reselling our products.

💡Our Contact page displays our direct company address and contact information, enabling individuals and businesses to easily reach out to us.
‍
💡We are considering the addition of a "News Notification" section to keep our users informed about the latest products' updates.

S H O R T - T E R M
‍
💡Our About page provides a comprehensive overview of our company, detailing our goals, missions, and promises. It also explains how these elements contribute to the success of our products, showcasing the foundation of our commitment to excellence and innovation.

L ON G - T E R M
‍
💡As we have our own manufacturing facilities in China, we are able to offer an additional service: Manufacturing.

Design System

💡As our company specializes in technology-based home wellness products, we aim for a color scheme that is bold yet conveys reliability and innovation, primarily utilizing blue to achieve this effect. Additionally, our logo, V6CO, is inspired by the word 'physical,' which is why green is another prominent color in our design system, symbolizing growth and vitality.

PROJECT OVERVIEW

T O B E G I N W I T H ...‍

Problem Statement

Reduce serious fall injuries with the V6CO Guardian Air Vest Over 35 million falls are reported every year, with more than 32,000 deaths. One out of every five falls leads to a severe injury, such as hip fractures, broken bones, or head trauma injury in seniors. The V6CO Guardian Air Vest has been designed to help reduce the number of severe injuries from falls.

Goals

Our objective is to develop an interactive app for the Guardian Air Vest that enhances the connection between guardians and their loved ones. By providing this unique feature, we aim to differentiate our product in the market and increase our sales rate.

1. The app will provide guardians with real-time information on the wearer's movement direction and send immediate alerts in the event of a fall, which could potentially lead to a severe accident.

2. By enabling guardians to take prompt action in response to a fall, the app aims to reduce the risk of injury and provide peace of mind, ensuring that they are aware of their loved one's safety at all times.

How Might We...
design an app that enables guardians to more effectively track and assist elderly individuals who are at risk of falling in their everyday lives?

Solution Overview

S H O R T - T E R M
1. Simplify and present visually clear information regarding the user's fall status.
2. Track the user's walking route to ensure their location is known.
3. Implement an alarm feature to promptly alert guardians when the user falls, enabling timely assistance and care.

L O N G - T E R M
1. Develop a promotional page to showcase our other related products.
2. Provide users and their guardians with weekly, monthly, and yearly reports to maintain a record of their activity and safety.

Final Impact 📈

10%

‍increase in sales rate

35%

‍increase in attracting retailers

DESIGN & PROTOTYPES

C U R R E N T
Resgister/Log in accounts from Guardian/User

Device Details

C U R R E N T
Device Details with device basic information (for both user and guardian), walking route history, alarm data and device user settings‍

Alarm Page

C U R R E N T
Alarm feature with user's fall history
‍
1. Alarm messages enable guardians to review detailed alarm data by date‍
2. Users can track the device's action history using the calendar
3. When a fall alarm is received, a call can be made to the connected guardian directly through the app

Mine

C U R R E N T
My account page allow user to update their personal information, learn more about the app, as well as provide feedback
‍

Design System

💡To align with our product design and our company's color theme, we have chosen blue as our primary color. Additionally, based on research conducted on our target audience, we found that they prefer darker colors with simple page layouts and visuals for easier navigation and use of the app.

So, how did we get there?
‍

RESEARCH

Product Research

Falls are common and costly, especially among Americans age 65 and older. But falls are preventable and do not have to be an inevitable part of aging.

Every second of every day, an older adult (age 65+) suffers a fall in the U.S.—making falls the leading cause of injury and injury death in this age group. One out of four elderly adults will fall each year in the United States, making falls a public health concern, particularly among the aging population.
‍

🙋‍♀️There is a gap between the vest User and their Guardian...
As the current system does not provide real-time communication or alerts to the guardian in the event of a fall. This lack of immediate notification can delay the response time and potentially worsen the outcome for the user.‍

User Journey Map

To gain deeper insights into our users and their experiences within our design framework, we developed a user journey map.

Information Architecture

Based on our research and analysis, we have identified the main features and details that need to be displayed within our app. Our goal is to make the interface as simple and visually clear as possible, ensuring that users can easily access the information they need.

USER TESTING

KEY FEATURE DEVELOPMENT

D E V E L O P M E N T O F F E A T U R E 0 1

Front page design

💡We aim for the front page to display the most useful information to users, particularly guardians, by showing a list of connected users and the connectivity status of their devices. The main information displayed includes:
‍
1. Message center
2. Scan
3. Product banner/promotion carousel
4. Device list

D E V E L O P M E N T O F F E A T U R E 0 1

Iteration 1

💡I refined the layout and icon and made selective cuts of texts for enhanced visual clarity, ensuring that users are not overwhelmed by excessive information in the front page.

D E V E L O P M E N T O F F E A T U R E 0 1

Final Design

" I like the idea of combining some information together to make the page less text-heavy."

D E V E L O P M E N T O F F E A T U R E 0 2

"Scan" feature

💡Users can conveniently scan the QR code on the device and connect it to their current account.

" Scanning may encounter issues in low light or when the image is blurry. Adding a manual input option could improve usability.
(Note: Only when device is within distance.)"

D E V E L O P M E N T O F F E A T U R E 0 2

Final Design

🙋An 'Album' feature has been added, allowing users to manually upload pictures of the device QR code.

D E V E L O P M E N T O F F E A T U R E 0 3

Alarm

💡Alarm messages enable guardians to review detailed alarm data by date
💡The location will be displayed in detail
💡Users can track the device's action history using the calendar
💡When a fall alarm is received, a call can be made to the connected guardian directly through the app

D E V E L O P M E N T O F F E A T U R E 0 3

Final Design

D E V E L O P M E N T O F F E A T U R E 0 4

Walking Routes

Device details with basic device information (both user and guardian), walking routes of the user, alarm data and device settings

💡Basic device information shows the device ID/Name/Guardian/Addition time
💡Walking Route allow guardian to track on their user's location in case of accidents
💡Alarm Data using the calendar

" 'Tracking steps' is only possible when the user allows the phone to access their location. Therefore, creating a 'Walking Trajectory Video' can be challenging. We recommend changing it to a simple map displaying the route with a starting point and destination."

D E V E L O P M E N T O F F E A T U R E 0 4

Final Design

🙋We do think the video might not be necessary, so we have replaced it with a map picture.

Project Type

0-1 UX Design

Duration

6 months

Team

3 UX Designers / Researchers
+
1 Product Manager
+
1 Marketing Manager
+
2 Product Designers
+
6 Developers

My Role

UX Design Lead
+
UX Researcher

Project Type

B to C Web Design
Post-MVP Launch

Duration

10 Weeks

Team

5 UX Designers /
UX Researchers
+
2 Product Manager
+
2 Developers

My Role

UX Design Lead
+
UX Research Lead

PROJECT OVERVIEW

T O B E G I N W I T H ...‍

Problem Statement

Goals

How Might We...
effectively guide and demonstrate the value of paid features to new creators/users at an earlier stage in their experience?
‍

After Quantitative & Qualitative Research

Solution Overview

S H O R T - T E R M
1. Simplify and provide visually clear subscription and credit system
2. User-friendly workflow with easy navigation and step revisiting
3. New dashboard for project organization
4. Presenter view feature on the website
‍

L O N G - T E R M
1. Updated and adaptable design system
2. More template options and smart template using AI
3. Editing tool for customizing
4. AI-autogenerated slides with images
5. AI assistant for user support and problem resolution
6. AI-generate & regenerate text/image
7. AI video generation based on slides' contents

FINAL IMPACT 📈

19%

‍increase in subscription conversion

40%

‍increase in returning users

26%

increase in task completion time

So, how did we get there?‍

RESEARCH

Primary Research

4 Key Findings

Information Overload

Users feel swamped by information overload on each step & page.

The page's packed with so much info, making it difficult to know where to focus my attention.

User Autonomy

Users want the ability to customize, adapt, and maintain control over their workflow and input/output processes.

lf the slide I generate can combine with my template, it would make my life much easier.

Pricing Transparency

Users are confused about how the pricing for each feature operates.

The screen displays a requirement for 10 credits, but I hadn't seen any mention of credits before. How many credits are required to create pages again?

Incomplete Workflow

Users need to download the slides and leave the website to present them using another application.

I feel like the entire process of downloading these PDF slides and presenting them elsewhere adds a lot of extra work.

Secondary Research

Persona & User Journey Map

To gain deeper insights into our users and their experiences within our design framework, we developed a persona and a user journey map.

Happy User Flow

Following our analysis of the current user experience, we envisioned a new, optimized journey. Our goal was to create a happy path that streamlines the workflow, making it more intuitive, helpful, and user-friendly.

DESIGN & PROTOTYPES

B E F O R E
❌Projects' iformation is not clearly presented

1. Projects aren't organized
‍
3. Lack of credits information

A F T E R
Learn old/new projects
at a glance
‍
1. All projects organized by date/last viewed/recently viewed/starred
‍
2. Folders for users better organize their projects
‍
3. "Grid" or "List" project view according to user's preference

Project Summary and Files

B E F O R E
❌Information overload
in one page
1. Topic, audience, language, files, and link options are all included in one small panel, which might overwhelm user
‍
2. GPT 3.5 and 4 switch button is not obvious

A F T E R
Streamlined overall workflow
1. We dissected the steps from "summary" to "summary" + "files" ensuring each step is dedicated to specific tasks, thereby preventing information overload for users
‍
2. "Tone" option allow user to choose how they want their presentation tone be like

Outlines

B E F O R E
❌Unclear information and hard to navigate
1. Clearer information hierarchy and more intuitive user actions needed
‍

A F T E R
Visual decluttering on responsive page information
1. Options for user manually input outlines OR AI generate outlines
‍
2. A responsive overview section to each slide

3. "Regenerate" funtion

Template

B E F O R E
❌Fixed template without options for users

A F T E R
Multiple template options based on users' needs
1. Academic/business/casual templates

AI-Powered Template Creation
1. Integrating comprehensive AI capabilities at every touchpoint, ensuring a seamless and fully-enhanced customization experience

Slides

A F T E R
Expanding the feature due to heavy user reliance, design to build user trust and navigational efficiency
1. AI-assisted images generation

‍
2. AI-assisted content and styling editing: Providing efficient and practical AI-assisted content editing and styling for better slide content customization

‍
3. "Edit layouts" features based on users' needs

Scripts and Presentation

B E F O R E
❌Without presentation mode
❌The "Scripts" page was separated from slides

‍

A F T E R
Presenter view
1. We introduced a presenter view in the feature workflow, enabling users to present their slides directly without the need to download or navigate away from Dr. Lambda's website.

Design System

Charcoal Painting

Date: 2018-2019

USER TESTING

KEY FEATURE DEVELOPMENT

B E F O R E

A F T E R

D E V E L O P M E N T O F F E A T U R E 0 1

Breaking user input to bite-size information

💡We refined the steps in the stepper for enhanced visual clarity

D E V E L O P M E N T O F F E A T U R E 0 1

Iteration 1

💡We dissected the steps according to information architecture and user feedback, ensuring each step is dedicated to specific tasks, thereby preventing information overload for users.

D E V E L O P M E N T O F F E A T U R E 0 1

Final Design

💡Streamline the content on each page to avoid overwhelming users and make the key points stand out.

D E V E L O P M E N T O F F E A T U R E 0 2

New Subscription Interface

D E V E L O P M E N T O F F E A T U R E 0 2

Iteration 1

💡Add missing subscription frequencies. Explain "Credit" and its breakdown briefly.

💡Implement the brand color more strategically to achieve a cleaner interface.

D E V E L O P M E N T O F F E A T U R E 0 2

Final Design

R E G E N E R A T E

A I - G E N E R A T E D I M A G E S

A I - G E N E R A T E D T E X T

A I - G E N E R A T E D S M A R T T E M P L A T E

D E V E L O P M E N T O F F E A T U R E 0 3

New AI-related Features

" High usage of the generative feature per element raises operational costs, posing a challenge for the sustainability of our subscription-based model..."

A I - G E N E R A T E D I M A G E S

A I - G E N E R A T E D T E X T

A I - G E N E R A T E D S M A R T T E M P L A T E

A I - G E N E R A T E D S C R I P T S

D E V E L O P M E N T O F F E A T U R E 0 3

Final Design

D E V E L O P M E N T O F F E A T U R E 0 4

Presenter View

💡We introduced a presenter view in the feature workflow, enabling users to present their slides directly without the need to download or navigate away from Dr. Lambda's website.

" We do not wish to introduce an additional step for users to select the time length, as the script feature is not the primary focus of our target."

D E V E L O P M E N T O F F E A T U R E 0 4

Iteration 1

D E V E L O P M E N T O F F E A T U R E 0 4

Final Design

TAKEAWAYS

What I have learned...

🌊
Turn Challenges into Opportunities

🧭
Prioritize Scalability in Design

💡
Turn Rationales are Backbone of Design

✍️
Take User Feedback Wisely

User feedback highlighted the importance of not overlooking technical pain points in designing the AI experience, as these are intrinsically linked and collectively shape the desired user experience.

PROJECT OVERVIEW

My Role
Leading the end-to-end design of LinkStone AI

Customer Insights & Ideation

I collaborated closely with product manager to uncover valuable insights and translate conceptual ideas into features that meet customer needs and address their pain points.

Experience Strategy & Vision

I developed frameworks and prototypes to communicate the vision, design principles, and content strategy, which are important to promote ideas, achieve consensus, and facilitate the decision-making process.

Planning & Scope Definition

I drive the product direction with my project manager partners. I advocated for customer-centricity and balanced it with the needs of the business. I prioritized and negotiated features for launch and future iterations.

Oversight & Coordination

I collaborated with a team of software engineers and graphic designer, marketing team to ensure the successful implementation.

Design Execution & Validation

I executed journeys, usability testing, wireframes, prototypes and design specs.

Leadership

I lead the whole design and participated in presenting works to gain buy‐in from executives, stakeholders, and investors throughout the project lifecycle.

Context
Exploring the solution for improving the efficiency and quality of industry knowledge acquisition

LinkStone is an interior design expert model based on fine-tuning a large language model specifically for the interior design domain. It aims to provide professional knowledge and solutions for the interior design industry. The primary audience includes interior designers, customers with renovation needs, and interior design students who require expert-level design knowledge and inspiration.

Problem Statement

Interior design knowledge is often fragmented and difficult to preserve, leading to inefficiencies for professionals, clients, and students. LinkStone addresses this by creating a specialized AI-powered Q&A platform to centralize and digitize domain-specific knowledge. By providing accurate insights, tailored recommendations, and accessible resources, LinkStone enhances design quality, fosters collaboration, and streamlines the creative process.

Lack of domain-specific knowledge accumulation

General AI models lack the granularity needed to address interior design-specific tasks and queries accurately.

Time-consuming access to knowledge

Interior designers and clients struggle with efficiently obtaining professional insights and case studies.

Customization and practical application

Users need more tailored solutions that cater to their specific interior design projects and inquiries.

Target Audiences & Needs

Interior Designers

Require detailed knowledge about specific design projects, from materials to layout, and want to improve project quality efficiently.

Renovation Clients

Need accessible and clear design knowledge to either complete a design independently or communicate their needs effectively with contractors.

Interior Design Students

Desire a comprehensive learning tool that provides both foundational design knowledge and advanced case studies for deeper insights.

Goals

Improve Domain-Specific Expertise

By fine-tuning the language model with interior design knowledge, LinkStone aims to elevate the quality and accuracy of the responses given to user queries related to interior design.

Boost User Efficiency

Whether for designers, clients, or students, LinkStone intends to streamline the search for relevant design knowledge and case studies, reducing the time spent on research and improving decision-making speed.

Provide Practical Solutions

The tool offers design recommendations based on user inquiries, improving collaboration between designers, clients, and contractors.

FINAL IMPACT 📈

So, how did we get there?‍

RESEARCH

Competetive Analaysis

The First-round Usability Testing

We conducted usability testing within the company (around 1000 users) to validate the design decisions, evaluate usability of the design, and explore potential second-round updates to the design. And based on the feedback, we listed out things that needed to be the most to the least prioritized.

Insights

From the feedback and identified goals, it's clear that LinkStone needs to improve its contextual understanding, mobile support, system performance, and personalization features. Moreover, users expect the tool to provide more transparent and detailed interior design knowledge, supported by high-quality image recognition and dialogue tracking functions.

DURING MEETINGS...
Prioritize our findings

Given time and resource constraints, I collaborated with engineers in a meeting to review and prioritize the findings from the usability testing based on the development schedule. During the discussion, we outlined all potential features and categorized them based on value, product requirements, priorities, available resources, and existing constraints.

KEEP DOING ITERATIONS BASED ON FEEDBACKS...

DESIGN & PROTOTYPES

B E F O R E
❌Projects' information is not clearly presented

1. Projects aren't organized
‍
2. Lack of credits information

02 Summary & Files

B E F O R E
❌Information overload in one page
1. Topic, audience, language, files, and link options are all included in one small panel, which might overwhelm user
‍
2. GPT 3.5 and 4 switch button is not obvious

A F T E R
Streamlined overall workflow
1. We dissected the steps from "summary" to "summary" + "files" ensuring each step is dedicated to specific tasks, thereby preventing information overload for users
‍
2. "Tone" option allow user to choose how they want their presentation tone be like

03 Outlines

B E F O R E
❌Unclear information and hard to navigate

1. Clearer information hierarchy and more intuitive user actions needed
‍

04 Template

B E F O R E
❌Fixed template without options for users

A F T E R
Multiple template options based on users' needs

🟦 Academic/business/casual templates

AI-Powered Template Creation

🟦 Integrating comprehensive AI capabilities at every touchpoint, ensuring a seamless and fully-enhanced customization experience

05 Slides

A F T E R
Expanding the feature due to heavy user reliance, design to build user trust and navigational efficiency
1. AI-assisted images generation

‍
2. AI-assisted content and styling editing: Providing efficient and practical AI-assisted content editing and styling for better slide content customization

‍
3. "Edit layouts" features based on users' needs

06 Scripts and Presentation

B E F O R E
❌Without presentation mode
❌The "Scripts" page was separated from slides

‍

Design System

USER TESTING

KEY FEATURE DEVELOPMENT

B E F O R E

A F T E R

D E V E L O P M E N T O F F E A T U R E 0 1

Breaking user input to bite-size information

💡We refined the steps in the stepper for enhanced visual clarity

D E V E L O P M E N T O F F E A T U R E 0 1

Iteration 1

💡We dissected the steps according to information architecture and user feedback, ensuring each step is dedicated to specific tasks, thereby preventing information overload for users.

D E V E L O P M E N T O F F E A T U R E 0 1

Final Design

💡Streamline the content on each page to avoid overwhelming users and make the key points stand out.

D E V E L O P M E N T O F F E A T U R E 0 2

New Subscription Interface

D E V E L O P M E N T O F F E A T U R E 0 2

Iteration 1

💡Add missing subscription frequencies. Explain "Credit" and its breakdown briefly.

💡Implement the brand color more strategically to achieve a cleaner interface.

D E V E L O P M E N T O F F E A T U R E 0 2

Final Design

R E G E N E R A T E

A I - G E N E R A T E D I M A G E S

A I - G E N E R A T E D T E X T

A I - G E N E R A T E D S M A R T T E M P L A T E

D E V E L O P M E N T O F F E A T U R E 0 3

New AI-related Features

" High usage of the generative feature per element raises operational costs, posing a challenge for the sustainability of our subscription-based model..."

A I - G E N E R A T E D I M A G E S

A I - G E N E R A T E D T E X T

A I - G E N E R A T E D S M A R T T E M P L A T E

A I - G E N E R A T E D S C R I P T S

D E V E L O P M E N T O F F E A T U R E 0 3

Final Design

D E V E L O P M E N T O F F E A T U R E 0 4

Presenter View

💡We introduced a presenter view in the feature workflow, enabling users to present their slides directly without the need to download or navigate away from Dr. Lambda's website.

" We do not wish to introduce an additional step for users to select the time length, as the script feature is not the primary focus of our target."

D E V E L O P M E N T O F F E A T U R E 0 4

Iteration 1

D E V E L O P M E N T O F F E A T U R E 0 4

Final Design

TAKEAWAYS

What I have learned...

🌊Turn Challenges into Opportunities

🧭Prioritize Scalability in Design

💡Turn Rationales are Backbone of Design

✍️ Take User Feedback Wisely

User feedback highlighted the importance of not overlooking technical pain points in designing the AI experience, as these are intrinsically linked and collectively shape the desired user experience.

Other Projects.

The Loop

Project | Interior & App

The project is designed to promote sustainability—in food production and transportation and through education. For the project I created a design for a self-sufficient farm-to-table restaurant. Located at the Bridgemarket site, the restaurant produces seasonally appropriate, nutritious food on-site with the use of a special aquaponics system that purifies and reuses polluted water from the East River. The space also serves to educate restaurant diners on sustainability.

GA Vest

MVP Project | BtoC iOS

The V6CO Guardian Air Vest has been designed to help reduce the number of severe injuries from falls and the app enables guardians to more effectively track and assist elderly individuals who are at risk of falling in their everyday lives. Our objective is to develop an interactive app for the Guardian Air Vest that enhances the connection between guardians and their loved ones. By providing this unique feature, we aim to differentiate our product in the market and increase our sales rate.

V6CO. Website

MVP Project | B2B2C Web

As a MVP website, this V6CO's website is double as an educational resource on wellness and longevity and as a storefront showcasing their pioneering Dr.@home product line. The site highlights the global manufacturing services and emphasize their secure distribution channels, including established partnerships with Costco, CVS, and Walgreens.

