Some more brand to build in banana tech company
Project
Summary some project will be done already
platform
Design website and responsive webs
My work to comeplete
My responsibility will be created some news project, other hand I need to improve UI/UX whole some feature. Base one data include quantitative (traffic, revenue, total …) and qualitative (feedback from customer services, ideas from stakeholder concern from user)
Completion time
1 year
overview
During my cases study, i will be focused on the experience of developing multinational environment, base on experience and study to build some projects, functionality including the process from design, ticket Jira for BA and Dev will be implemented on Document (US) and some design clearly consistency to create new significant product.
1. Introduce
1. Build new project
- Define and study some function complexity for the project, need to collaborate with stakeholder to enhance user flow, It doesn’t affect business cost and suitable ability Technical team.
- Build some complexity feature to improve UI/UX
3. optimize design file
- Organize component clearly, details and neatly
- Divide into separate main page include:
- Main page, sub page, process feature, validate …
2. Collaborate to work clear consistently, improve User story(AC) for BA
- Define and study some function complexity for the project, need to collaborate with stakeholder to enhance user flow, It doesn’t affect business cost and suitable ability Technical team.
- Build some complexity feature to improve UI/UX
4. Optimize design to base on data analytics
- Base 2 type of date evaluate to enhance production as:
- Qualitative data (received feedback from stakeholder, special for customer services, operator)
- Quantitative data (gather traffic, bounce rate, retention rate, turnover, total deposit, withdraw …)
2. Build new project
Some functionalities, when being conceptualized and defined, must be based on the project system’s conditions.
Email verification
- Email verification is relatively less complex
- we need to discuss with the backend (BE) team whether the server can handle cases where users spam verification requests. If an email verification attempt fails, users can request a new verification within 5 minutes.
Phone verification
- Phone verification is more complicated because the phone OTP process involves a third-party provider that returns API responses. If too many users spam OTP requests, the business may incur significant costs. The phone OTP system operates as follows:
- When a user requests an OTP, the code remains valid for one minute. Once the one-minute period expires, the OTP becomes invalid and can no longer be used.
- Within that minute, the user is allowed a maximum of three incorrect attempts. Each incorrect entry trigger one error message alert the user, such as “”You have 2 attempts left”, “You have 1 attempt left” and finally “Maximum number of incorrect verification code entries” f the user reaches the maximum number of incorrect attempts, they must request a new OTP.
Conclusion
=> It is crucial to balance functionality with cost-effectiveness to prevent excessive expenses due to high user demand. It is also essential to coordinate with the BE team to ensure they understand the logic and can provide insights to optimize the feature. Designing should not be done in isolation—stakeholder discussions are necessary to develop an efficient and well-functioning system.
Search Bar – Enhancing User Experience
- In market-related projects like e-commerce, the search bar is one of the most critical features. It plays a fundamental role in helping users quickly navigate through a vast product catalog. If a user is already interested in a particular item, a well-optimized search tool enhances their journey significantly. To improve usability, the search bar is designed to provide smart suggestions, making it easier for users to find relevant products.
- As shown in the example, after users type at least three characters, the system will automatically suggest products with matching names.
- Why require three or more characters? Without this limit, the search suggestions could become cluttered and inaccurate, leading to poor usability and frustration for users. Setting a minimum input threshold ensures more precise and relevant search results.
- 🔹 A well-designed search experience enables users to find what they need efficiently, improving engagement and satisfaction.
3. Collaborate to work clear consistently, improve User story(AC) for BA
Organize component clearly, details and neatly
Managing multiple projects requires a well-structured approach to organizing files, design components, and design systems for each brand. Properly arranging screens is also essential for maintaining clarity and efficiency. In addition, when building complex features or multi-layered pages with intricate user flows, it’s crucial to map out details clearly to avoid confusion. Given the high volume of brands in these projects, each brand should manage a shared component and design system rather than separate files. This approach ensures:
Easier updates across all assets.
Better consistency in design elements.
Reduced risk of file errors that could prevent updates.=> A well-structured file system enhances workflow efficiency, collaboration, and scalability across multiple projects.
Withdraw via Bank
- The bank withdrawal process is more complex as it requires secure measures to protect users and prevent unauthorized activities.
- To withdraw method, users must have at least one verified owner bank account registered in their name, matching their full name.
- A cognitive walkthrough approach will be applied to ensure a seamless user experience with appropriate scenarios.
- Happy case
- When users enter a valid withdrawal amount, the “Withdraw” button will switch from disabled to enable.
- Validation Cases:
- If the entered amount is outside the allowed range (minimum to maximum), a validation message will alert the user. Example: Withdrawal amount under 150,000 VND, or a specific threshold like 2,999,000 VND.
- If the entered amount exceeds the available balance, a warning message will notify the user.
4. Optimize design File Organization & Management
Organize component clearly, details and neatly
- Managing multiple projects requires a well-structured approach to organizing files, design components, and design systems for each brand. Properly arranging screens is also essential for maintaining clarity and efficiency. In addition, when building complex features or multi-layered pages with intricate user flows, it’s crucial to map out details clearly to avoid confusion. Given the high volume of brands in these projects, each brand should manage a shared component and design system rather than separate files. This approach ensures:
- Easier updates across all assets.
Better consistency in design elements.
Reduced risk of file errors that could prevent updates.
=> A well-structured file system enhances workflow efficiency, collaboration, and scalability across multiple projects.
The main pages are structured into separate sections:
- Each main page contains subpages, process flows, features, and validation rules.
- Example: The homepage includes all UI layouts along with components such as the search process, favorite products, and feature validation …
- To ensure the entire team understands the user flow, the design system is structured in a way that allows BA (Business Analysts), Developers, PMs, and other stakeholders to grasp the complete product flow and interactions within the project.
=> A well-structured design system enhances collaboration, consistency, and efficiency across teams.
4. Optimize design to base on data analytics
Meeting to discussing with the Marketing & Operations Teams
- Meeting with the Marketing & Operations Teams
- The meeting with the Marketing (MKT) and Operations teams aims to
- Understand Traffic Flow Analyze how traffic is being directed from ad channels to the platform.
- Discuss User Experience, user pain points related to operate to make trouble by users. Ex: key Issues Identified as:
- Slow deposit processing
- Complex and cumbersome interactions
- Important information (e.g., QR code) should be more prominent
Solution: The QR code should be larger and positioned at the top for better visibility.
=> Optimizing these aspects will enhance user experience and streamline the deposit flow.
Qualitative Feedback on Payment Optimization
- We received user feedback indicating that the deposit process within the payment system is not yet optimized.
- Slow deposit processing due to technical issues.
- UI-related concerns, as illustrated in the reference image.
- Concerns & Issues
- Bank Selection UI the current bank selection component is too large and not optimized. Suggestion: Use a dropdown menu to improve usability and reduce page clutter.
- Deposit Amount Input the suggested deposit amounts do not align with user behavior or deposit trends. Solution: Base suggested amounts on popular deposit values to increase user engagement.
Traffic Optimization & Data-Driven Enhancements
- Enhancing the product experience is based on data insights and user feedback from Marketing (MKT), Customer Service, and analytics tools. Data-Driven Approach.
- By analyzing Google Analytics data, we can identify which pages have the highest traffic and prioritize optimizations accordingly.
- Example focus on the top 5 high-traffic pages for immediate improvements:
- 🔹 Homepage
- 🔹 Deposit Page
- 🔹 Withdrawal Page
- 🔹 Transaction History Page
- 🔹 Other high-traffic pages that
- Device-Specific Optimization
- Analyze device usage patterns to determine where to prioritize design improvements.
- If mobile traffic is 10x higher than desktop and tablet, mobile-first design should take priority. Example:
- On mobile, optimizing specific screen sizes ensures better UI adaptation, rather than focusing on desktop enhancements with lower traffic impact.
=> A data-driven approach ensures a seamless user experience, increases engagement, and drives better conversion rates.
Data-Driven Product Enhancement Beyond Traffic
- In addition to using traffic data for product improvements, we can leverage other key metrics such as:
- ✅ Revenue & Profit
- ✅ Total Users & New Users
- ✅ Top-Selling Products & Key Product Categories
- By analyzing core product lines, we can determine whether to expand product offerings or increase provider options. This data-driven approach helps generate ideas for layout enhancements, prioritize high-value products, and refine product categories based on user demand.
=> As illustrated in the reference image, these insights guide better UX/UI optimizations for improved engagement and conversion.
Product Prioritization Based on User Preferences
- Based on user behavior, 60% of users show a higher interest in specific product categories, such as card games and lottery, compared to sports games.
- Prioritize these high-demand categories by placing them at the top of the product list.
- Organize products based on turnover for each game layout of category to increase user loyalty and enhance engagement, ensuring users can easily access their preferred games.
- For less popular products, either move them down the list or remove them entirely, allowing us to focus on enhancing detailed product pages for better user experience.
=> Prioritizing product categories based on user preferences and behavior leads to a more tailored and engaging UX/UI.
Product Prioritization Based on User Preferences
- Based on user behavior, 60% of users show a higher interest in specific product categories, such as card games and lottery, compared to sports games.
- Prioritize these high-demand categories by placing them at the top of the product list.
- Organize products based on turnover for each game layout of category to increase user loyalty and enhance engagement, ensuring users can easily access their preferred games.
- For less popular products, either move them down the list or remove them entirely, allowing us to focus on enhancing detailed product pages for better user experience.
=> Prioritizing product categories based on user preferences and behavior leads to a more tailored and engaging UX/UI.
5. Lesson learned
- I have gained a deep understanding of this domain, covering key features such as Authentication, Product, Games, and Payment Gateway.
- Experience as a BA has provided insight into how to organize and build designs that address all possible cases. Designs must be clear, complete, and consistent with the user stories (AC) written by the BA. This ensures that the documentation provided to the development team is thorough, enabling efficient implementation.
- When building complex systems, effective communication with the team is crucial. It’s not just about completing the design after defining it; it’s important to consider factors such as business costs, technical feasibility, and other constraints.
- Using Usability Inspections allows us to improve potential scenarios and validate system behavior to enhance the product experience.
- Best Practices for Design Process Effective file organization helps stakeholders quickly understand features, user flows, and ensures consistency with user stories (BA).
- Based on traffic and revenue statistics, we can develop solutions and provide data-driven evidence to improve the product, driving growth in revenue, profit, and traffic.
🔹 These lessons highlight the importance of cross-team collaboration, data analysis, and maintaining consistency to create optimized user experiences.
Previous
Next
