May 2022
The Loop
0-1 Design | Interior & App Design
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.
Read More
Project Type
0-1 UX Design
Duration
4 months
Team 
2 UX Designers /
UX Researchers
My Role
UX Design Lead
+
UX Research Lead
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
+
2 Developers
My Role
UX Design Lead
+
UX Research Lead
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

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.

How do we evaluate the success of our design?
MVP launches within the first three months...

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.

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

Streamlined Overall Workflow by breaking user input to bite-size information

💡We refined the steps in the stepper for enhanced visual clarity, ensuring that users are not overwhelmed by excessive information in a single step, especially in the "Summary" page based on our interview/survey results.

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.

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

Streamlined Overall Workflow by breaking user input to bite-size information

💡We refined the steps in the stepper for enhanced visual clarity, ensuring that users are not overwhelmed by excessive information in a single step, especially in the "Summary" page based on our interview/survey results.

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.

💡Consider creating a foldable section or merging sections for improved organization.

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:

💡These 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 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.

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

Final Design

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

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

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

1. User information
2. Contact us
3. Device list
4. User feedback
5. Beginner Tutorial
6. About us
7. Set up

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.

Thus,

to protect older adults and people with conditions that increase the risk of falls from injuries, the system uses a 500mAh battery to deploy airbags strategically placed. The fall protection vest is adjustable to ensure a comfortable and accurate fit, and the washable design includes a resistant cover. When a fall is detected, the intelligent airbag indicator will activate, and the military-grade inflator will deploy the airbags in less than 0.08 seconds. The high-precision microchip sensor will detect a fall and activate the gas generator. The V6CO Guardian Air Vest can help reduce the number of serious injuries from falls and is a must-have for anyone at risk of falling.

🙋‍♀️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.

Charcoal Painting

Date: 2018-2019
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 cobining 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.

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

Streamlined Overall Workflow by breaking user input to bite-size information

💡We refined the steps in the stepper for enhanced visual clarity, ensuring that users are not overwhelmed by excessive information in a single step, especially in the "Summary" page based on our interview/survey results.

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.

💡Consider creating a foldable section or merging sections for improved organization.

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:

💡These 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 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.

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

Final Design

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

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.