iFan Entertainment

The “iFan Entertainment” project is leveraging voice synthesis technology (TTS ARS NLU) to enable real-time voice chat with celebrity avatars. Our work focuses on iteration in UI design and building a visual system, thus improving user conversion.

Project Affiliation: Baidu, Inc.

The APP V2.0 Home Page introduces new tab labels and a themed section, allowing users to browse celebrity news more easily and improving content visibility. The tab bar now highlights the “Theme” section with a circle dot indicator to show the current selection. The font size has been increased from 18pt to 24pt for better readability and visual clarity, enhancing the overall user experience.

The banner design guidelines for version 2.0 of the app focus on standardizing size, content, and layout for consistency and effectiveness. The banner size is 430x130 (750x1334 standard) and features key themes or events with images centered on celebrity upper-body shots. The color scheme should match the app’s youthful and vibrant design. The guidelines emphasize a 6:4 image-to-text ratio, placing important information on the left to align with users’ reading habits and using engaging visuals to attract attention during significant events. This creates a unified standard for commercial promotions and celebrity-related content.

The previous icons were not distinct, lacked entertainment value, and were hard for users to recognize. In the version 2.0 update, three design iterations were explored, with the third version being chosen. The new icons are more playful and recognizable, improving user experience and reflecting the app’s branding better. The third version features a balanced layout and appealing colors, making functionality clearer for users.

In the updated version, the layout was improved for a more cohesive and engaging experience by reducing gaps between blocks and increasing content density for easier browsing. The product team worked on aligning the blocks to make topics more visually appealing and accessible. The Hot Topics Engagement Flow shows how discussions attract users, increase visibility, and create controversy, fostering unique user-generated content (UGC) and boosting participation and engagement, which enhances user loyalty. The redesign aims to make the app more interactive and engaging.

The new version improves visual readability with vibrant colors like blue, green, and orange, matching the app’s theme. The updated card layout offers clearer content separation and distinct styles, keeping up with modern trends. Each card is better divided, enhancing visual hierarchy and making navigation easier in the chatroom. The design also uses a gradient color scheme and soft shadows for a more modern and appealing interface.

In the old version, users accessed the chat from the home page and were prompted to try a membership service for more features, along with basic text and speech-to-text support. The new version enhances visual appeal with brighter icons and adds engaging features like virtual gifts and random chats with celebrities. It also personalizes the chat experience with media sharing, such as celebrity photos and emotional sticker packs, allowing users to express their feelings visually. These updates make the chat more interactive and enjoyable.

Fan Community Improvements

Each celebrity has a dedicated fan group in the app, organized to attract and keep loyal fans. It combines user-generated content (UGC) activities with events, allowing fans to engage in tasks, check-ins, and discussions about their favorite celebrities. This encourages trending topics and deeper interactions, enhancing loyalty to the product. The platform focuses on motivation through interests and participation, aiming to maintain ongoing UGC creation and improve user retention, ultimately increasing the product’s value.

This page outlines the style and guidelines for the celebrity activity component, including label styles, sizes, and color systems based on celebrity roles and favorites. Font sizes vary (e.g., 24pt), and image sizes are standardized: rectangular images are 88pt and 56pt, while circular images are 56pt and 32pt. User interaction features like “Follow Celebrity” and “Like” have uniform sizes and styles to maintain a consistent interface.

In Version 2.0, we made important updates by removing shadows and reducing the size of header cards to make horizontal scrolling quicker. We added identity circle tags to improve user engagement, which was lacking in the previous version. We also adjusted the design for consistent icon styles, like the “like” button. The image upload layout was improved to allow users to upload between 1 and 9 images, creating a more dynamic and organized content presentation.

Visual Improvement of the Support Ranking

The changes we made for the support ranking system include strengthening color contrast to create a more immersive and engaging visual atmosphere, improving flow clarity to help users track rankings more easily, and enhancing the sense of pride and accomplishment by highlighting user achievements with vibrant colors and intuitive navigation.

Visual Improvements for the Task Center

The task center module underwent fundamental changes from version 1.0 to 1.5, including a refined color scheme to improve visual appeal and user engagement. User research showed that most users engage with the product between 8:00 and 12:00, creating day and night modes. The daytime mode has a blue background with complementary blue and orange colors, using orange to enhance contrast. The new interface also improves space utilization in the cards, creating a visual difference that highlights the task center’s atmosphere.

Task Center Flow Optimization

In Version 2.0 of the task center page, we focused on reducing the steps needed to complete tasks, which minimizes user actions and improves efficiency. Users can now interact directly from the current page without unnecessary transitions. For example, daily sign-ins are completed seamlessly within the interface, with pop-up confirmations and a simpler task center shown on the same page. These changes make interactions easier and enhance the overall user experience.