FlexiCare Revamp
Web App Design
Customer Support
A redesign of Insta360’s after-sales service to simplify camera replacement and shorten turnaround time.
Timeline
4 Weeks
Tools
Figma
My Role
Usability Test
Product Design
Web Design
Work Project
Product Manager*1
Product Designer*1
Software Engineer*3
QA Engineer*1
About Insta360
A leading action camera brand.
It focuses on the global market, with its website serving as a key entry point.
About FlexiCare
Launched in 2024, it’s a premium after-sales service designed to offer convenience, allowing users to replace their old camera to a new one.
Business Problems
Our customer support team always prioritizes user satisfaction, yet FlexiCare continues to receive complaints.
The service is originally designed to offer convenience and drive revenue. However, negative experiences in the flow have led to complaints, refund requests, and reduced future revenue potential.
Complaints + Refund ↑
Online Support
Willingness to pay ↓
Repair Request | Camera Issue Page
UX Audit
To validate pain points, I organized internal Audits with PMs & Eng, analyzed behavioral data, and synthesized feedback from support tickets.
🔎 UX Audits
📩 Customer Feedback
📈 Behavior Data
2 Improvements Areas
Discover
Define
Develop
Deliver
Faster Application↑
Improved Navigation↑
Design System↑
Complaints/Refunds↓
Willingness to Pay↑
User Problems
Poor Discoverability + Complex Workflows
We found the FlexiCare request flow confusing and slow because it was mixed with the repair service request.
While these 2 services serve different purposes, they share a common entry point and user flow.
This picture above shows the previous entry point for FlexiCare in the Support Homepage.
Opportunity
How might we revamp FlexiCare service flow into
a simpler, premium experience, that is separate from repair service and built for FlexiCare users?
Improvement Areas
Discoverability and Efficiency were identified as the key improvement areas. The following 2 mini cases explore how we addressed each.
Efficiency: Optimizing Workflows ⭐
https://www.insta360.com/cn/support
Consumer
Professional
Enterprise
Explore
Support
Downloads
About
Shop by interest
STORE
Insta360 Support
What do you need help with?
New
360 Cameras
Action Cameras
Handheld Gimbals
Webcams
Insta360 X4
Insta360 GO 3S
Insta360 Ace Pro
Insta360 Flow Pro
Insta360 X3
Insta360 ONE RS
Show More
Quick Access
Repair Service
FlexiCare Service
Service Progress
123
Device Info Query
Repair Price
Insta360
Care Service
Insta 360+ Service Activation
After-Sales Policy
Show More
Insta360 Care Service
Providing comprehensive protection services for your device
Learn More
Contact Us
Online Chat
Office Hour: 24/7
Start Chat
Recommended
Technical support
service@insta360.com
Send Email
Phone
+1 800 6920 360
Office Hour: Mon-Fri 7:00-17:00 (PST)
Contact Us
@Insta360
Go to Facebook
Community
Participate in exchanges on hot topics
Join Discussion
Feedback
To provide you with better products or services
Give Feedback
Discoverability: Service Page & Shortcut
Case 01: Optimizing Workflows ⭐
The original service flow: Slow Turnaround + Irrelevant Steps
8-10 min
Long completion time
10~20 Days
Slow Service Cycle
63%
low Completion rates
In the FigJam file above, I’ve structured two workflow diagrams:
(1) the Existing Repair Service Workflow and, (2) the Most Time-Consuming Steps, highlighted in orange.
For the 2nd flow, I collaborated with the data analyst and found that the most time-consuming & highest drop-off points were: Camera issue selection (too many inputs), Assessment & payment (long wait times).
Customer Feedback
“Why I need to write so many information that don't seem related to the FlexiCare service...”
“You have to select which camera to repair and all that stuff. It's really annoying and pointless.”
“I feel like I spent a long time filling out the form, especially the part where I had to fill in all the camera issues and logistics information. It took forever to complete.”
For Design
Only ask what’s relevant.
Shorten the service flow.
Make the experience effortless.
Proposed Directions
5 → 3 Steps
phase 1: Online Request
① Reduce Unnecessary Steps
② Payment is made when submitting Online Request (Not after Assessment), with a Fixed fee.
1 Week → 48h
phase 2: Device Assessment
① As it’s an exchange service, no repair is required.
② The new device is shipped by Staff within 24h of receiving the old one.
Revised Workflows ✍️
To reduce cognitive load, I worked with the support team to simplify the process by removing unnecessary steps & restructuring online forms.
data improvements
10 → 5 min
Ave. completion time
20 → 7 Days
Slow Service Cycle
63 → 75+%
Request Completion rates
Revised flow
Solution Snapshot
SERVICE PAGE
Created a tailored entry point(service page) and sets clear expectations early on, reducing confusion.
Ensure Qualification: Serial Number Check
Enhance Clarity: Services Instructions
Product PAGE
Condensed to 1 step with basic product details and a short open-ended summary, eliminating decision-heavy UX.
After vs. Before
Short Summary, Simplified Input
After
Dropdown-heavy, 2-step
Before
Review PAGE
Replaced with a single review page with the one-time replacement fee, reducing checkout hesitation.
Single review page
One-time replacement fee
Designing for Mobile
Many users, especially outdoor enthusiasts, use our service during sports activities. Based on data, about 19% do so via the mobile web app.
As a result, I also paid attention to the mobile layout and interactions to ensure a seamless experience.
Here's a quick look at selected mobile UI.
Case 02: Improving Discoverability
Adding FlexiCare Service Page & Shortcut
The Current FlexiCare Users
> 20%
find it difficult to navigate to the Service
4 ~ 5
Clicks Required to Find FlexiCare
Original flow
Users begin at the official site, navigate to Support page, click through repair services, then go through up to 5 application steps just to find the hidden FlexiCare option.
Official Website
Support Homepage
Repair Service
Online Request
Select FlexiCare
Solution Snapshot
Support homepage
Based on: 🔎 UX Audits
Add a search bar, making it easy to find answers.
Based on: 📈 Data + User Feedback
Put the most relevant services upfront for easy access.
Based on: 📩 Data + Business Needs + Feedback
Add shortcuts for the 8 most popular services.
Revised Portal & Flow
data improvements
-5%
find it difficult to navigate to the Service
5 → 3
Clicks Required to Find FlexiCare
Final Design | Major Screens
Support homepage
Service page
Product page
Shipping page
submission review
Payment page
successfully submitted
PROGRESS page
Additional Visual Improvements
Design language
Shifted from yellow-heavy to a more black-dominant UI to convey professionalism and trust, as research shows it better represents these.
Primary Colors
Color scheme 1
Color scheme 2
☑️ Color scheme 3
English | Content
English | Title
Design system
Updating Interactions & Components
Icons
Layout
Variables & Components
Default
Hover
Click
Next Steps
User Satisfaction
Regularly review user feedback to make positive improvements.
Service Competion Time & Rates
Analyze behavior data (time spent on each page, drop-off rates) to identify friction points.
UX Audit
Organize regular usability tests to with both internal & external stakeholders.
Thank you for visiting👋🏻 Copyright © 2025 Jinjin Du, All Rights Reserved