Project Overview
Explore the product's second curve.
Category
UI/UXAppGraphic Design
Date
2022 ~ 2023
Team
Product Designer (Me) x 1PM x 2iOS Developer x 1Android Developer x 1
Although this project was nearing completion, it was ultimately paused due to company-wide strategic decision. Nevertheless, as a 0-1 product, the team gained valuable experience throughout the process. Additionally, this product pushed the boundaries of the original Dcard Guideline style, making it worth sharing as a case study.
Background
- Dcard's community products have been in Taiwan for over 10 years. In addition to continuously improving our core community products, Dcard has been enhancing its advertising offerings and e-commerce research lab functionalities.
- We aim to explore the second curve of our products alongside the development of our more mature products.
Goal & Challenge
- We are looking for a tool-based product that can integrate well with the Dcard community and gather feedback from Dcard users.
- Product Constraints:
- High-frequency usage (daily)
- Relevance to Dcard community, considering the "anonymous community" feature of Dcard.
- The new product will primarily target Gen Z, and we need to brainstorm various possibilities.
- Including:
- Gen Z demographics, their views on social communities.
- Social trends, trends in community products.
- Overcoming cold start in the early stages of the product is essential. It should provide a sense of achievement even when used by a single individual.
Project Time Line
- 2022/10 - Conceptualization
- 2022/11 - Concept validation, conducting surveys, interviews, iteratively adjusting, finalizing topics and directions.
- 2022/12 - Development
- 2023/01 - Launch, targeting existing markets (TW, HK, JP, Peru), fine-tuning (releasing updates every few days).
- 2023/02 - Ongoing adjustments
My Role
Research、Wireframe、Mockup、Visual、Prototype
Research
/w=3840,quality=80,fit=scale-down)
GenZ & Social Media
- Embrace individuality and "Be Yourself."
- Value authenticity.
- Communicate through visuals and images.
- Seek value alignment.
- Belong to the internet-native generation.
- Embrace the rise of short video content and belong to the group that prefers visual content over text.
/w=3840,quality=80,fit=scale-down)
As we reevaluate the current features and state of Dcard
- Anonymous Communities
- Text-Dominated Platform → We're exploring opportunities beyond pure text.
- User Gathering for Discussions, Expressing Emotions, Sharing Stories, and Seeking Resonance
Opportunities
- Text alone cannot precisely convey visual content, actions, expressions, and ambiance.
- The rise of short video content, and the division of attention across multiple social platforms. Gen Z's key 8 seconds of attention span is more crucial.
- Making storytelling simpler and more relatable for the audience.
We focus on "Dcard Users Sharing Their Stories"
Users on Dcard share their stories and experiences. Stories are the vessel for experiences, and people want to convey their feelings through these stories. To precisely convey these feelings, it's necessary to create the right atmosphere to immerse the viewers and enable them to experience what the storyteller felt.
"Creating Atmosphere and Conveying Feelings," "Pursuing Authenticity and Uniqueness," "Community Engagement and Content Feedback"
→ The product we want to try is a story video creation tool.
- Provide a variety of assets, including stickers, music, and photos. Users can also import photos and record audio. This allows users to showcase their unique styles, making each video unique.
- A user-friendly tool for combining images and videos using simple assets. Users can use these materials to convey their stories, even without recording video content on the spot.
/w=3840,quality=80,fit=scale-down)
Exploring Visual Style for a 0-1 Product
- In order to create a brand-new product, we also studied various products popular among Gen Z in Europe and the United States, such as Zenly, Yubo, GIPHY, Spotify, BeReal, paparazzi, etc., to observe their product styles.
Observations on Gen Z Style Preferences
- Each Gen Z individual has different style preferences, so it depends on their aesthetics and tastes.
- Gen Z seems to value uniqueness in attitude and personal style more than just visuals.
- We speculate that these apps align with what is considered the Gen Z style due to:
- Strong color contrasts or gradient usage
- The use of bold, flat fonts, and even italics (Zenly, Shuffle, Poparazzi)
- Visual 3D elements and an acidic, metallic style (Zenly)
- Frequent use of large, rounded buttons
- Emphasis on feedback, incorporating many interactive and fun elements
- Proficiency in using glitch art to make visuals more engaging
/w=3840,quality=80,fit=scale-down)
App「Dtell 」 Overview
The goal was to quickly launch a content generation tool, allowing the community to attract the first batch of users in new markets.
/w=3840,quality=80,fit=scale-down)
Features Mockup & UI Flow
Design Time: 2 months
Onboarding：
- To lower the user barrier, in addition to providing Google, email, and Apple login options, users can also use "Guest Login" without being forced to complete the registration process before experiencing the functionality.
- At the same time, we use a brief three-question questionnaire in the onboarding process to help us better understand this group of new users.
Homepage and Profile Page:
- In Phase 1, the primary action is centered around creating a new canvas, guiding users to edit their videos right from the homepage.
- We also incorporated a Feedback Banner on the homepage to serve as a quick way to collect feedback and iterate rapidly.
Inserting Materials:
- We observed the prevalence of GIFs in social media nowadays. People are skilled at using stickers to express emotions and enhance the impact.
- In addition to GIFs, users can also choose to add media from their own photo albums.
Editing Text Cards and Changing Background Colors:
- In the context of flexible material and media usage, addressing text color contrast is a crucial consideration for this feature.
- To ensure that text remains clearly visible on various backgrounds, we employed a specific adjustment methodology based on brightness values (HSB) across dozens of color options.
- Additionally, we incorporated various functions to enhance the user experience, including text input, alignment options (center, left, right), text background, text borders, text size adjustments, and more. These features provide users with greater flexibility in personalizing their content.
Context of dragging and positioning:
- We've carefully defined the touchscreen interactions on the canvas to make it user-friendly:
- Single-finger Drag: Allows users to move elements, and it triggers alignment guides when elements are close to being centered vertically or horizontally.
- Two-finger Drag: Provides the ability to rotate materials for added creativity.
- Long Press and Drag Up: This gesture is used to move the layer upwards.
- Long Press and Drag Down: Allows users to move the layer to a lower position, either up or down the layer stack.
These touchscreen gestures offer users precise control over the placement, rotation, and layering of materials, enhancing their creative freedom and ease of use in the app.
Regarding audio:
- Users have the option to record and import audio files to complement their video stories. We've ensured that the app provides clear and intuitive controls for adjusting audio elements.
- Audio integration is essential for enhancing the storytelling experience, giving users more ways to convey their messages effectively.
Output:
- The app allows users to save and share their created video stories with others.
Try Some Prototypes👇🏻
Phase 2
The paintbrush tool was deferred to Phase 2 due to development time constraints.
Brush Tool:
Vibration and Sound Effects:
Next Step
Although the project didn't go live due to the company's broader strategy, Dcard's community products are currently continuing to introduce new "image and video editing" tools and functionalities.
Many features have gradually made their way into Dcard's main product. For example, the text card workflow and color contrast guidelines are being applied. We hope that the experiences and lessons learned from this project will serve as valuable insights for future product development.
