2022.03 — 2022.07
The Account Center Website allows users to manage subscriptions and products, offering a personalized experience and streamlined navigation to improve engagement and customer satisfaction.
Enhance user retention and engagement through personalization, interactive features, and targeted promotions. Optimize business performance with data-driven insights to improve products, marketing, and reduce churn. Strengthen brand identity for a more familiar and trustworthy experience. Improve usability with intuitive navigation, clear information hierarchy, and seamless subscription management.
The company is transitioning from a point-based system to a subscription model and integrating all sound-related products into a unified membership center. Also, the previous interface lacked clarity, causing users to struggle with navigation and account management. The business goal is to improve user retention, self-service efficiency, and marketing effectiveness by making the membership center a seamless hub for product and subscription management.
Product Designer
User Flow
Wireframe
Design System
UI Design
Iterations
Figma
1 PM
1 Front-End Engineer
Get to know more about persona, user journey and their pain point
Define questions and problems
Figure out the solution
Validate ideas（Tracking data & User Interview & Usibility Test）
1. Lack of Personalization and Engagement Reduces User Retention
The membership center lacks personalized experiences and fails to recommend suitable products or services based on user behavior. There is no tailored promotion or notification system based on user preferences, reducing incentives for purchases and renewals. The absence of interactive features discourages users from revisiting the membership center, negatively impacting retention rates.
2. Insufficient Data Analysis Limits Business Growth Potential
The company struggles to effectively collect and analyze user behavior data, hindering product optimization and market decision-making.
Marketing strategies lack data-driven insights, leading to inefficient allocation of marketing resources.
The membership center fails to serve as a growth-driving tool, limiting potential revenue opportunities.
Furthermore, we lack insight into why users choose to discontinue using our product.
3. Lack of Brand Identity and the Cold Perception of Tech Products
Lack of brand recognition enhancement, and technology products are often abstract or overly technical, giving a cold and unfamiliar impression.
4. Disorganized Information Architecture Reduces Readability and Management Efficiency
The membership center's information architecture is disorganized, making it difficult for users to navigate and understand the content.
Key information (such as billing, subscription status, and product management) lacks a clear hierarchy, reducing readability.
After product integration, the existing system fails to effectively support all types of subscriptions and management functions.
5. Switching from a point system to a membership-based system.
In the user journey, after signing up, users are directed to the account center, where we introduce related products based on their audio processing needs, boosting revenue. The member center enhances interaction by sharing updates, promotions, and collecting feedback, strengthening customer loyalty.
1.2.1.Introduce products
As a newly established brand in the audio industry, the homepage showcases the company's latest products and marketing campaigns. It serves as a key channel for users to discover and explore related offerings.
1.2.2.Marketing and Promotion
To attract new members and promotes sales, the company can conduct marketing and promotional activities through the member center, such as offering exclusive coupons, discount codes, or special events for members. Also, use the mascot in the UI because it can enhance brand recognition, approachability, and engagement, creating a more enjoyable user experience.
Latest news
Since this is a new brand, some news reports (from third parties) help users understand the product, increase credibility, and make them more willing to try and eventually purchase it.
Run advertisements to inform users about available promotions with the mascot.
To encourage users to invite their friends, I implemented a Progress Bar that helps reduce drop-off rates, boost conversion, provide real-time feedback, enhance engagement, and minimize cognitive load.
Offer discounts in conjunction with marketing campaigns to encourage user purchase intent.
Inform users how much they save with each plan, reinforcing the "buy more, save more" mindset to encourage higher purchases.
2.1.Reducing Form-Filling Effort
If the process is too complicated, users are likely to abandon it.
To make it easier:
The order is as follows:
.png)
2.2. Main Purposes of Using a Progress Bar on a Marketing Page
.gif)
Why use Main Purposes of Using a Progress Bar on a Marketing Page:
Reducing Drop-off Rate
Increasing Conversion Rate
Providing Real-Time Feedback
Providing Real-Time Feedback
Reducing Cognitive Load
Users may have concerns about data security, so the UI design should convey a sense of safety:
.gif)
Hoping to minimize churn while ensuring a seamless and user-friendly experience that does not feel coercive.
Thus, creating an unsubscription flow that discourages users from canceling too easily. Before finalizing their cancellation, present compelling offers to incentivize them to stay. Clearly highlight the benefits they will lose if they unsubscribe, prompting them to reconsider. Additionally, collect feedback to understand their reasons for leaving.
On the homepage, allow users to easily track the products they have purchased.
Since the company will develop a series of products with a card-style design in the future, it has been designed this way for easier expansion.
Show the subscription status:
If already purchased, the button displays in a 'Disabled' state, and the wording shows Purchased, preventing users from making duplicate purchases.
Additionally, anticipating future product expansions, I designed a card-based layout to ensure easy scalability and seamless integration of new products while incorporating text elements to provide users with relevant information.
This app uses the Design system of Noise Eraser including button, input, header, footer, and radio button.
1. To facilitate smoother collaboration, it's essential to establish a culture of mutual trust and open communication before working together, and seeking consensus. When we have different opinions during the project, we should communicate our ideas in public and ensure that what we do is aligned with our goal. Also, interdepartmental communication and coordination, it is essential to ensure that mutually beneficial outcomes are achieved.
2. During the product, I should evaluate the development cost, time, and effectiveness, and consider using open-source resources such as Lottie. This can expedite the development process without compromising the outcome.
3. When working on UI design, I should be a systems-thinker and think beyond the pixels and design for scalability, language conversions and RWD so that engineers can work efficiently.
#AI Meeting Record ＃UX Design ＃UI Design #Design System ＃Ｂ2C ＃Ｂ2B ＃AI ＃APP
＃AI Denoise ＃Cross-platform design ＃Web ＃APP ＃Ｂ2C ＃Ｂ2B ＃User Research #Design System ＃UI Design ＃UX Design
#B2B #APP #iOS #Android #UI #UX #Design System #Recruitment
Line ID: hmc10116