Stories Change the World.

Toonsquare is an AI startup company that develops services to facilitate digital creative activities using artificial intelligence. A few months before my joining as a product designer, Toonsquare launched a beta version of their content creation service, 'Tooning'. During my tenure at Toonsquare, the company experienced rapid growth with the success of Tooning, eventually attracting Series A investment.

2021.04
Seed Funding

2022.07
Series A Funding

About ‘Tooning’

Tooning is an AI-driven SaaS webtoon creation platform that leverages text-to-image conversion technology. It enables users to easily create webtoon content without the need for any software installation. By utilizing Tooning, individuals of all backgrounds can effortlessly engage in the creative process of crafting their own webtoons.

What I did.

At Toonsquare, I established design systems and UX strategies, managed the template feature, and led an update to the AI function. I handled end-to-end design processes, including UX research, UI design, and prototyping. Additionally, I contributed to branding, marketing materials, and design templates, collaborating with cross-functional teams to enhance the user experience. I also took charge of planning for exhibition booths such as AI Expo and creating promotional materials.

Problem

We conducted beta version usability testing with former intern students from the company before AI Expo. During the usability test, a user asked us, "What sentence should I write down?" indicating confusion about the initial STT feature's UI. The UI lacked clarity on what actions users should take, and there was no equipped UX system to aid user-technology communication. As a result, there were insufficient sentence elements for the AI to analyze, leading to disappointing results for the user.

Furthermore, when the user was dissatisfied with the generated results, they had the option to retrain the AI for their desired scene. However, there was a lack of awareness and understanding regarding scene modification. Users either didn't know how to modify the scene or lacked motivation to explore this functionality. This highlights a need for improved user awareness and clearer instructions on how to modify the generated scenes.

Project Goal

Simplify and improve the user experience for intuitive usage of the feature without requiring technical knowledge.

Enable users to input all necessary sentence elements for AI to generate scenes.

Add features for the user to allow immediate user feedback and incorporate it when AI fails to meet user expectations.

Solution 1

We initially attempted to enhance user understanding by incorporating feature-related tutorials prior to users accessing the functionality pages. To ensure intuitiveness, we designed the initial prototypes with video and image files, creating a user-friendly interface.

Early concept testing

We conducted early concept usability testing among employees from different departments within our organization using prototypes. From the results, we discovered that users did not engage significantly with the feature-related tutorials. They quickly bypassed the tutorials using the 'skip' button and subsequently encountered difficulties in navigating the functionality pages. These findings were crucial in guiding us to reevaluate the tutorial approach and make necessary improvements to enhance user engagement and overall usability.

Key Insight

We learned that users need access to usage information while using the functionality. So, we decided to add easy-to-understand tutorial images directly in the feature pop-ups. During the design process, we focused on the issue that users struggled most with knowing how to write effective sentences to get accurate scene. To help them, we provided clearer guidelines by separating essential sentence elements and construction methods.

Hi-fi testing & findings

Additionally, we provided clearer character options for users to choose from. After conducting internal user testing again, the results were highly effective. Users were able to write sentences containing all the necessary elements for AI analysis, even without prior understanding of the technology. As a result, the accuracy of AI-generated suggestions significantly improved, leading to higher user satisfaction, despite the reduced user freedom.

Solution 2

Next, we focused on our project goal number 3 allow immediate user feedback and incorporating it when AI fails to meet user expectations. When the AI-generated results did not satisfy users, they wanted to customize the scenes according to their preferences. The challenge was that the target users of the Tooning service had no expertise in design or cartoon production. They desired visually appealing results but lacked knowledge about how to compose scenes and arrange elements effectively. To address this, we brainstormed and implemented features that would assist them in composing scenes more easily.

First Approach

We proposed a feature that allows users to customize scene layouts according to their preferences. To provide users with intuitive scene layout samples, we collected and symbolized common scene examples used in film techniques and web comic representations. Based on these visualizations, we discussed with the development team the feasibility and implementation timeline. Considering the development schedule, we limited the number of characters that could appear to two and accounted for various possible scenarios. We then turned the selected compositions into clear and concise buttons for users to easily choose from.

Final Icon Visual

We designed the scene icons themselves as interactive buttons to enable users to intuitively choose their desired scene layouts. The final design is as follows. Users can simply click on the layout buttons to select their preferred scene composition. After making their selection, they can confirm the chosen layout by clicking the "Confirm" button to apply it.

Final UI

The final UI design enables users to effortlessly create cartoon-style scene compositions with just a few clicks. By considering the product type, we ensured that all UI elements are responsive and compatible with both web and mobile formats. This guarantees a seamless and user-friendly experience across different devices and screen sizes.

Field Test

As the main host of the exhibition, I demonstrated the service and collected user feedback. During the field study, I collected individual user responses and assessed their comprehension and understanding of the service. The results were highly positive, as users were able to effectively write input sentences with all the necessary elements and expressed satisfaction with the AI-recommended scenes. They enthusiastically used the scene recommendation buttons to modify scenes, and the overall feedback was described as "fun" and "unbelievable." Many participants believed that children would particularly enjoy using the service.

Reflection

Throughout this project, I gained insights into the importance of providing users with clear guidance and options to enhance functional accessibility. Leaving users without proper guidance could lead to confusion and limited usage of the features. I realized that granting users appropriate control over the service and designing an intuitive interface to showcase the technology's potential were equally crucial aspects as the technology itself.

As the project progressed, Tooning aimed to expand the functionality to enable users to create multiple scenes simultaneously. Before leaving the company, I contributed to the design of an upgraded UI that allowed users to select more options to create accurate scenes efficiently.

Overall, this experience taught me valuable lessons in user-centric design and the significance of continuously improving and evolving products based on user feedback and needs.