Account Center

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:

User Perspective

Through internal observations and feedback from our customer support team, we found that users often felt disconnected from the brand and unaware of available benefits. New users didn’t know where to begin after signing up, while existing users had no visibility into referral or coupon status. The Member Center, in its prior state, felt passive and offered little reason to return.

These insights guided our decision to redesign the Member Center as an engagement-driven dashboard, making value offerings more visible, encouraging repeat visits, and supporting trust-building in early brand stages.

• 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:

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")

This makes savings tangible and nudges users toward committing to a longer-term plan.

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

Why Choose Option A Over Option B?

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

Not Chosen (B):  Early Form-Filling — Ask “How did you hear about us?” during sign-up

Rationale:

Asking non-critical questions too early can create unnecessary friction during sign-up, which is a sensitive conversion point. By deferring this question until the user has completed a meaningful action, we reduce perceived effort and improve the likelihood of a genuine response.

Although we did not conduct direct user interviews, our design approach was informed by established UX research and behavioral psychology. We recognized that during early onboarding—especially at the point of registration—users are often hesitant to commit too much effort upfront, particularly when it comes to filling out non-critical information like “How did you hear about us?”

To avoid unnecessary friction and reduce the risk of early abandonment, we chose to defer such questions until after users had completed a key action and begun to explore the product. At that point, trust has started to form, and users are more likely to respond.
We used lightweight, skippable prompts that feel conversational and non-intrusive, ensuring that the experience remains smooth while still allowing us to gather valuable marketing insights over time.

Minimize the number of fields and only ask what’s truly necessary at the beginning.”— Nielsen Norman Group, “Form Design Quick Fixes”

Key takeaways:

• The lower the entry barrier, the higher the completion rate.
• Asking too many questions during the initial sign-up can lead to user drop-off or hesitation.
• Users have very low tolerance for non-essential questions, especially during their first interaction with a product.

Trade-off:

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

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.

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).

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.

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.

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

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

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

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:

While we didn’t conduct formal user interviews, we reviewed internal feedback and inferred from common support queries that users often felt confused about what they had purchased, what they were subscribed to, and when their next billing date would be. The existing experience—where order and subscription details were scattered across multiple pages—made it difficult for users to get a clear picture of their account status.

To reduce this confusion and build user trust, we decided to design a centralized Member Center that offers a clear, visual summary of ownership, billing, and subscription data. By doing so, we aimed to make users feel more in control and less anxious about managing their account.

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:

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