Volcano Car Entertainment

In-car Entertainment System Design around Digital Media Players
Team
    3 UX designers, 1 UI designer (me), Front & Back-end developers, UX Researchers, Industrial designers, and Content Strategists.
    Timeline
      Sept. 2021 - June 2022.
      Introduction
      Volcano Car Entertainment is a specific in-car entertainment software launched by ByteDance. It offers a comprehensive entertainment experience for passengers, integrating content from ByteDance’s most popular content discovery and video applications like TikTok, Xigua Video and Toutiao, which allows passengers capture and share their travel experiences in real-time, making the overall journey more enjoyable and memorable.
      Contribution
      Collaborating with product managers and engineers, I designed the standardized version of the In-car Entertainment System that showcase the software's features and functionality, including intuitive visualities and a collection of reusable components for further development.

      Demo

      Volcano Car Entertainment enhances the passenger experience by integrating content from content discovery and video applications like TikTok, Xigua Video and Toutiao.

      Basic Elements

      We tried to establish a design system by concluding basic elements and components, to deliver better and more consistent design solutions efficiently and provide clarity to engineers.

      Color Platte

      We selected colors that can work well in both dark and light modes. The red was used as the primary color, and others are supporting colors. The bright colors which highly contrast with background can improve readability and accessibility.

      Typeface

      We selected PingFang SC as our typeface due to its clean and elegant appearance. In addition, the typeface is multilingual support, including English, and Simplified Chinese, which could help construct a global design system.

      Hierarchy

      Spacing

      Responsive Grid System

      We audited widely-used screen size to ensure consistency across layouts. Then, we defined responsive grid systems that adapts to these screen sizes. The entire layout is based a flexible grid that allows for a variety of different widgets sizes.

      Components

      Design Patterns

      We created the visual representation of how the product will work and showcase clients a clear understanding of how the product will function.

      Homepage

      The homepage is curated to integrate TikTok, Xigua Video and Toutiao, inspiring users to explore and generate content. Here users can discover interesting video stories and listen to up-to-day news. Users can also create and share videos by easy-to-use video creation tools.

      Audio Contents & Player

      The Audio content enables drivers who need to keep their eyes on the road but still want to access news or other information. The platform provides various topics, ranging from sports and entertainment to agriculture and history. The filter on the left side help users to quickly find audios they are interested in.

      Video Player

      The Video players are designed consistently with their mobile applications. Users can browse and watch curated content uploaded by other users. They can also follow other users and receive updates. The platforms also support “like” and “comment” actions, which engage passengers with video content in a social and interactive way.

      Users' Profile

      The platform allows users to follow other creators and see their contents. Users can also see their own collected and liked videos on their profile page. Additionally, users can interact with other users' content by liking, collecting and following their videos.

      Search Engine

      The search engine can be accessed by tapping on the magnifying glass icon located on the top left of the homepage. From there, users can type in keywords or phrases to search for relevant videos, audios and users. The search engine also offers various filters and categories to help users refine their search results.

      Authorization

      The Sign-in process here is fast and comfortable. Users can quickly log in via their Tiktok accounts. Users can also log in with their phone number and verification code.

      Settings and Privacy

      Volcano entertainment system has several privacy and settings features that allow users to control their privacy and security. Users can choose to enable or disable accounts based on their personal preferences.

      Design Patterns

      Based users’ different preferences when it comes to reading text on screens, we designed both dark and light mode, and also  provided users with a choice in how they interact with the interfaces.

      What I learned

      Reflection

      • Simple and intuitive design.
        The Volcano Car Entertainment should be designed to be simple and intuitive. Design elements should be easy to understand and operate without taking the driver's attention away from driving.
      • Collaboration and Efficiency.
        I understand that creating a design system is not only helpful for ensuring a consistent and cohesive product, but also improves the efficiency of collaboration between designers, developers, and other internal stakeholders. The Common design patterns and a set of reusable components that can be easily applied to different products and services.

      Next Steps

      👀 Discover More of My Work
      Empowering Novice Admins to Set Up Robots Knowledgeably & Efficiently
      UX Design & Research  |  AI Robotics  |  B2B  |  Product Education
      Enhancing Brand Consistency & Accessibility For Aetna’s website
      UI Design  |  HealthCare  |  B2C  |   Desktop