Solution

1. Boosting User Retention & Engagement through Smart UI & Marketing Integration

Why Choose Option A Over Option B?

Chosen (A):
Design an interactive Member Center that integrates personalized content, promotional tools, and brand storytelling—featuring:Integrate personalized product recommendations, promotions, and engagement content into the Member Center and homepage using mascot-enhanced UI

• Latest news from trusted media
• Promotional banners with mascot visuals
• Referral progress bar
• Time-limited coupon system

Not Chosen (B):
Basic static interface with minimal promotion or brand interaction.

• No dynamic marketing modules
• No referral or reward system
• Lacks brand storytelling touchpoints

Rationale:

• Since this is a new brand, trust and visibility are key. Third-party news articles in the Member Center help build credibility and ease product adoption.
• Integrating a referral system with a progress bar leverages behavioral psychology (goal gradient effect) to increase task completion.
• Using a mascot in UI builds brand familiarity and emotional engagement.
• Coupons and limited-time discounts tied to campaigns provide immediate purchase incentives.

Trade-off:

PM / Engineering Collaboration:

• The PM helped define the priority content and module flow needed to guide new users during their first-time experience.
• Worked with engineers to implement dynamic logic and conditional display rules (e.g., based on login frequency or whether a user has claimed a promotion).
• The UI was designed using a modular card-based structure, making it scalable for future feature rollouts and marketing entry points.

Constraints:

• The launch needed to align with upcoming marketing campaigns and product releases, requiring the integration of mascot visuals and news content.
• Due to the lack of user behavior data in the early stage, we applied default category-based recommendation logic instead of personalized suggestions.

Final Decision:

We launched a modular Member Center UI that includes:

• News carousel featuring third-party articles (builds trust)
• Promotional banners with mascot for branding
• Referral tasks with progress bar (game-like experience)
• Time-limited discount cards for conversion boost

Validation:

Reference: Notion, Shopee, Adobe — all use dashboard-style entry points for retention and engagement

Why Choose Option A Over Option B?

Chosen (A):
Visually highlight the savings in the yearly plan (e.g., "Original Price: TWD 1,490 → Now: TWD 1,390") to encourage users to upgrade by reinforcing the “buy more, save more” mindset.

‍Not Chosen (B):
Display only flat pricing options (e.g., monthly and yearly plans) without emphasizing savings or comparative value.

Rationale:

Presenting clear cost savings taps into behavioral psychology—the "deal effect" and “loss aversion.” When users see how much they can save by choosing a yearly plan, it increases their perceived value and urgency. This strategy promotes higher purchase commitment and reduces churn by lengthening the subscription period.

Trade-off:

Pros of A:

• Encourages users to commit to longer-term plans
• Creates a sense of value and urgency
• Aligns with e-commerce best practices

Cons of A:

• Requires conditional logic for dynamic pricing comparison
• May introduce slight cognitive load if not designed cleanly

Pros of B:

• Simplifies UI
• Requires less content or dynamic pricing display

Cons of B:

• Misses opportunity to upsell
• Users may default to short-term plans due to lack of incentive

PM / Engineering Collaboration:

• Collaborated with PM to define pricing logic, psychological messaging, and where to place price comparisons
• Worked with engineers to implement dynamic strikethrough logic and conditional formatting (e.g., if discount is active)
• Ensured compliance with legal requirements (e.g., original vs. promotional price visibility)

Final Decision:

We implemented a dual-option pricing card, where:

• The monthly plan is listed plainly
• The yearly plan is visually emphasized with discount details (e.g., "TWD 1,390/year, originally TWD 1,490")

Validation:

Benchmarked similar patterns from Spotify, Canva, and Adobe

2. Boosting engagement → Using data-driven personalization to strengthen brand loyalty.

Trade-Off Analysis — Reducing Form-Filling Effort to Boost Engagement

2.1. Why Choose Option A Over Option B?

Chosen (A): Progressive Disclosure – Ask users “How did you hear about us?” after initial engagement

Pros of A:
The timing is intentional—by this point, the user has developed initial trust in the product, making them more willing to respond.
The prompt is designed to feel like a lightweight, conversational message—non-intrusive and seamlessly integrated into the experience.
It can also be made skippable, preventing negative emotions from disrupting the core user journey.
Higher response rate, better data accuracy, lower drop-off during onboarding.
‍Cons of A: Slight delay in data collection; requires additional logic to trigger the prompt contextually
‍Pros of B: Immediate access to user acquisition data
‍Cons of B: Increased onboarding friction; lower form completion and user satisfaction

2.2. Collaboration with PM & Engineers

• We discussed with PM the balance between data collection quality and user retention.
• Engineers confirmed that contextual prompt cards can be triggered based on user behavior, requiring only minor backend changes.
• Using Google/Apple one-click login with auto-fill , which was already part of existing infrastructure—minimizing development cost.

2.3. Business Constraints

• Business Goal: Improve user registration completion rate and engagement within the first 7 days while still collecting valuable marketing insights (e.g., traffic sources).

2.4. Final Decision-Making Process

• One-click login with partial auto-fill to remove initial friction.
• Step-by-step form structure to reduce overwhelm.
• Contextual prompt cards to collect optional data over time, increasing brand trust and ongoing interaction.

2.5. Validation

Our design decisions are aligned with best practices observed in platforms like Duolingo, Notion, Figma, and Superhuman, which all utilize progressive disclosure and delayed data capture to optimize UX.

After the user completes a key action (e.g., posting their first job or browsing the recommendation list), a short, guided prompt appears.

2.2. Main Purposes of Using a Progress Bar on a Marketing Page

Why Choose Option A Over Option B?

Chosen (A): Use a Progress Bar on the Marketing Page
Not Chosen (B): No Progress Indicator / Static Multi-step Form

Rationale:

We introduced a visual progress bar to improve form completion by leveraging psychological drivers such as the sunk cost effect and goal-gradient effect. When users see they’ve already completed more than 50%, they feel motivated to finish. Real-time progress feedback also reduces uncertainty and perceived effort, especially on marketing pages where abandonment risk is high.

Rationale:

Pros of A:

• Reduces drop-off by lowering perceived complexity
• Increases completion rate through visual motivation cues
• Provides users with a sense of control and feedback
• Enhances engagement when paired with rewards (e.g., discounts, coupons)

Cons of A:

• Requires UI logic to dynamically track and display progress
• Design must adapt to both desktop and mobile breakpoints
• May encourage users to rush and skip thoughtful input if poorly calibrated

Pros of B:

• Simpler implementation
• Clean UI with fewer elements

Providing Real-Time Feedback

• A progress bar makes the process feel like "leveling up," enhancing engagement.

Cons of B:

• Higher drop-off due to lack of progress visibility
• No behavioral reinforcement from visible completion
• Users feel uncertain about how long the process will take

PM/Engineering Collaboration:

• Collaborated with PM to identify key drop-off points in the funnel and align on conversion goals
• Engineers validated the technical feasibility of a lightweight step-based progress bar using existing frontend libraries
• We aligned on a scalable structure that could adapt based on user flow and page length

Final Decision:

We implemented a step-based progress bar paired with contextual prompts like:
“You're 80% done—click next to unlock your free gift!”This design capitalized on user psychology and provided a clearer sense of progression. We also paired visual progress with micro-rewards, such as coupons or entry to lucky draws, at key thresholds (e.g., 50%, 100%).

Validation:

• Referenced behavioral science studies (e.g., goal-gradient hypothesis, sunk cost effect)
• Cited UX research from Nielsen Norman Group on real-time feedback and completion rates
• Similar patterns used in Duolingo, Typeform, and Mailchimp onboarding

2.3. Enhancing Privacy and Security Assurance

Why Choose Option A Over Option B?

Chosen (A):
Design with explicit privacy cues and user control over data
(e.g., displaying privacy policy, explaining data usage, providing edit/delete options)
Not Chosen (B):
Silent data collection with no explanation or visible control
(e.g., not telling users how their data is used or omitting privacy-related UI elements)

Rationale:

In today's digital environment, users are highly sensitive to how their personal data is handled. Without transparent communication, even routine information collection may lead to hesitation or drop-off. By proactively showing privacy policies, encryption assurances, and giving users control over their data, we reduce anxiety and build trust—ultimately increasing the chance that users will complete onboarding or provide additional information.

Trade-off:

Pros of A:

• Builds trust and reduces user anxiety
• Increases data submission and form completion rates
• Positions the brand as privacy-responsible
• Preemptively answers concerns before they become objections

Cons of A:

• Adds complexity to UI layout and copywriting
• May slightly slow down form flow due to added explanations
• Requires ongoing updates to privacy policy content for legal accuracy

Pros of B:

• Cleaner, faster UI experience
• Less design/copywriting overhead

Pros of B:

• Creates uncertainty and distrust, especially in privacy-aware users
• Increases drop-off when users feel unsure about how their data will be handled
• Higher likelihood of negative perception or complaint, especially in markets with strong data protection laws

PM / Engineering Collaboration:

• Worked with PM to define which data points are “sensitive” in user perception
• Engineers confirmed it was feasible to let users edit/delete their profile info from the frontend with minimal effort

Final Decision:

We included a simple, reassuring privacy section in key UI areas:

• During onboarding: “We do not share your data. Everything is encrypted.”
• On forms: “This information is only used to provide better recommendations.”
• In settings: “You can edit or delete your data anytime.”

This transparent, user-centric approach improves both trust and conversion.

Validation

• Industry best practices (e.g., Apple, Notion, and Plaid) show that privacy transparency improves user confidence and retention
• UX research (NN/g) indicates users are more likely to complete forms when privacy concerns are addressed up front
• Post-launch surveys showed increased perceived trustworthiness

2.4. Reducing Churn While Enhancing User Experience

Why Choose Option A Over Option B?

Chosen (A):
Designing a multi-step unsubscription flow with benefit reminders, retention offers, and feedback collection
(e.g., "Are you sure you want to leave? You’ll lose access to premium features like X and Y." + options like "Pause subscription" or a one-time discount)
Not Chosen (B):
Allowing immediate, single-click cancellation with no additional steps or information

Rationale:

While we respect the user’s freedom to unsubscribe, a frictionless one-click cancellation can lead to impulsive decisions and unnecessary churn. By gently guiding users through a short flow that reminds them of what they’re giving up, offering a reason to stay, and asking why they’re leaving, we create a moment of reflection. This both improves retention and provides valuable insight for product improvement—without feeling overly manipulative.

Trade-off:

Pros of A:

• Reduces churn by reminding users of value and offering alternatives (e.g., pause, discount)
• Collects exit feedback for continuous improvement
• Provides a respectful opportunity for users to reconsider
• Still allows cancellation, but through a considered process

Cons of A:

• Adds steps to the cancellation process (may annoy users seeking instant action)
• Requires UI content for benefit reminders and dynamic offer logic
• Needs backend support to trigger personalized retention offers

Pros of B:

• Simple, fast, user-controlled experience
• Reduces support burden from complaints about cancel flow complexity

Cons of B:

• Higher likelihood of emotional or impulse-based cancellations
• No opportunity to collect reasons for churn
• Loses chance to re-engage or retain users with a last-minute offer

PM / Engineering Collaboration:

• Collaborated with PM to define key benefits to surface in the cancel flow and identify viable retention strategies
• Engineers implemented conditional logic to display targeted offers (e.g., “Pause for 30 days” if user showed recent activity)
• Ensured that the final "Confirm Cancellation" step remains accessible without dark patterns

Final Decision:

We implemented a three-step cancel flow:

• Reminder of lost benefits
• Retention offer (pause, discount, or extended trial)
• Feedback form + final cancel button

Validation:

Benchmarked similar flows from platforms like Spotify, Netflix, and Duolingo, which all use multi-step cancel flows with soft retention nudges

3. Empowering users → Simplifying navigation for seamless purchase and subscription management.

Why Choose Option A Over Option B?

Chosen (A):
Provide a centralized Member Center that shows purchased products, subscription status, and payment history, using a card-based layout for future scalability
Not Chosen (B):
Keep navigation minimal and separate — place order details and subscription settings under different pages with less visual integration

Rationale:

We wanted to empower users by giving them clarity and control over their purchases and subscriptions. Instead of scattering information across multiple pages, we opted for a single, centralized member dashboard where users can track what they bought, view their next billing date, and manage their account. This not only reduces friction but also builds trust and improves retention.

Additionally, since the company plans to launch multiple card-based products, using this UI structure early makes future scaling easier.

Trade-off:

Pros of A:

• Improves transparency and user confidence
• Simplifies access to key purchase/subscription info
• Encourages re-engagement by making benefits and actions more visible
• Supports future product expansion with consistent card-style layout

Cons of A:

• Requires more design effort to create a cohesive dashboard experience
• More complex frontend integration (e.g., real-time subscription updates)
• Risk of slight information overload if not visually balanced

Pros of B:

• Easier to implement with minimal design/development effort
• Keeps pages lightweight and task-specific

Pros of B:

• Forces users to jump between pages to find info
• Harder for users to understand their full relationship with the service
• Poor scalability as the number of products or subscription tiers increases

PM / Engineering Collaboration:

• Worked with PM to define which user actions (e.g., renew, cancel, track orders) needed to be most accessible
• Harder for users to understand their full relationship Engineers ensured that the subscription and billing data could be dynamically surfaced on the dashboardwith the service
• Agreed to use modular card components so future product types can be easily added without major redesign

Business Constraints:

• Marketing required clear user visibility into billing dates and product usage to reduce support inquiries

Final Decision:

We launched a member center with a clean, card-based layout that includes:

• Product ownership status
• Subscription plan and next billing date
• Purchase/order history
  This layout supports future card-style products and creates a consistent, empowering user experience.

Final Decision:

Benchmarked against platforms like Notion, Netflix, and Adobe, where centralized dashboards improve transparency

4. Subscription system

Why Choose Option A Over Option B?

Chosen (A):
Display subscription status with a “Purchased” label and disabled button on product cards, using a card-based layout with supporting text for clarity and future scalability
Not Chosen (B):
Leave all buttons active regardless of purchase status, and use a basic list or single-module layout without visual feedback

Rationale:

To prevent users from accidentally making duplicate purchases, we chose to clearly display a "Purchased" status on already-subscribed items and disable their action buttons.

Additionally, anticipating future product expansion, we implemented a card-based layout with accompanying text, which makes it easier to accommodate additional items and maintain a unified user experience. This structure allows users to quickly identify what they’ve purchased and supports long-term scalability.

Trade-off:

Pros of A:

• Prevents accidental repurchases through clear status feedback
• Disabling action buttons reduces user confusion and complaints
• Card layout supports product expansion and consistent UI/UX
• Supplemental text helps users understand product details and current subscription state

Cons of A:

• Requires additional design and development for status states and UI behavior
• May lead to visual clutter if too many products are displayed
• May feel underutilized if only one or two products exist at launch

Pros of B:

• Quick and simple to implement, especially in early-stage MVP
• Minimal layout and fewer design components

Cons of B:

• Users may accidentally repurchase something they already own
• No visual cues make it harder to manage subscriptions
• Difficult to scale as more products are added later

Cons of PM / Engineering Collaboration:

• Worked with PM to define that avoiding duplicate purchases is a critical business goal
• Engineers confirmed that subscription status data is available and can be used to dynamically display the “Purchased” label and disable the button
• Card components were designed to be reusable for future product rollouts

Technical / Business Constraints:

• Layout had to account for future subscription types and varying product data
• Customer service team requested a visible indicator to reduce support tickets related to "I didn’t realize I already bought this"

Final Decision:

We implemented a modular card-based layout showing:

• Product ownership status
• Disabled buttons with “Purchased” labels
• Supporting text to guide user understanding

This solution helps users clearly see what they’ve already purchased and lays the foundation for future product integration.

Validation:

Referenced best practices from Apple, Adobe, and YouTube Premium, which all use visual purchase indicators and disabled buttons

Success Metrics

To evaluate the effectiveness and impact of the Account Center platform, we defined a set of key success metrics across product usage, user engagement, and business performance:

‍User Engagement

• Daily Active Users (DAU) and Monthly Active Users (MAU)
• Average session duration per use

Feature Adoption

• % of users actively using account management, security settings, and integration tools
• Completion rate of key user flows (e.g. login, profile update, permission setup)

Retention & Satisfaction

• 30-day and 90-day user retention rate
• Net Promoter Score (NPS)
• Customer Satisfaction Score (CSAT)

Operational Impact

• Reduction in support tickets related to account management
• Time saved per user through centralized account settings

Business Growth

• Increase in activated accounts linked across apps
• Upsell and cross-product engagement rate via Account Center

Design System

1. To foster smoother collaboration, it's crucial to build a culture of mutual trust and open communication before the project begins. Establishing alignment and seeking consensus early on helps avoid misunderstandings later. When differing opinions arise during the process, it's important to share ideas transparently and ensure our actions remain aligned with the overall goal. Effective cross-functional communication and coordination are also key to achieving mutually beneficial outcomes.
‍
2. Throughout the product development process, I proactively evaluate development cost, timeline, and impact. When appropriate, I explore open-source solutions like Lottie to streamline development without compromising quality.

3. In UI design, I aim to think systemically—beyond individual screens—to create scalable designs that support multilingual needs and responsive layouts. This approach not only ensures a consistent user experience but also enables engineers to implement the design more efficiently.

Related Digital Products