What? A user-friendly AI app that turns sketches and story ideas into professional comics, equipped with editing, customization, and publishing tools.
TaleVision
Challenge: Drawing comics and graphic novels is a time-consuming task that often conflicts with daily responsibilities, making it difficult for creatives to consistently bring their stories to life.
Project Vision for TaleVision: TaleVision revolutionizes comic creation by utilizing a supervised machine learning system that transforms user inputs—such as labeled images, sketches, and textual descriptions—into complete comics. This advanced AI seamlessly integrates with various file formats and industry-standard tools, simplifying the process for creatives to publish and share their stories across multiple platforms.
Problem Statement: The user is a passionate storyteller with a busy schedule who needs a creative AI app to help create their dream comic because they struggles to find time and energy outside of daily commitments.
Who? Creatives, including artists and storytellers.
When? Whenever they have free time, such as during weekends, vacations, or breaks.
Where? Any location with internet access, like homes, cafes, beaches, or parks.
Why? To streamline the process of comic creation, allowing creatives to balance their busy lives while advancing their careers and reaching wider audiences without disrupting their schedules.
Personas
Max, 19: A college student balancing a side job with his passion for art. Max runs a weekly web series, but his demanding schedule often conflicts with his ability to maintain consistent uploads.
Jake, 30: A school teacher and father whose time is mostly occupied by his responsibilities. Previously an amateur political cartoonist, Jake finds it increasingly challenging to continue his cartooning alongside his professional and parental duties.
Ana, 51: A busy doctor with a creative vision for an epic medical graphic novel. Although she has not yet developed her drawing skills, her demanding job significantly limits the time she has to pursue this artistic endeavor.
Competitive Analisys
Direct Competitors:​
-
ComicMaker.ai: Robust AI, intuitive but limited in customization.
-
StoryAI: Strong in story generation, lacks comic-specific features.
-
ComicGenius: Customizable and user-friendly, but weaker in AI capabilities.
Indirect Competitors:​
-
Canva and Adobe Spark: Easy-to-use graphic design tools suitable for comics.
-
DALLE: Enhances functionality with cloud storage and collaboration, but requires managing multiple tools.
TaleVision's Key Insights:​
-
User Focus: Success hinges on meeting the needs of creatives with limited time, prioritizing user-centric features.
-
Feature Enhancements: Opportunities lie in improving preview modes and storyboard integration.
-
Market Positioning: Differentiation through AI-driven creation and flexible customization sets us apart.
User Flow
Click to enlarge.
This user flow diagram outlines the intuitive navigation and user interactions within the TaleVision interface concept. It highlights my ability to design user-centered flows that create a positive and engaging television experience.
Site Map
Click to enlarge.
The TaleVision site map outlines the app's structure, showcasing key features like project management, character and background customization, community engagement, and account settings. It highlights tools for creating, editing, and sharing visual stories while offering flexible pricing plans and support resources.
Storyboards
Click the image to enlarge.
Storyboards
Big Picture Storyboard: Creative journey simplified follow a creator's journey from being overwhelmed to publishing their webcomic using TaleVision.
Close-Up Storyboard: Streamlined User Workflow see how TaleVision guides users from login to sharing their completed webcomic.
​
Wireframes
Click the image to enlarge.
Wireframes
Wireframe Pg. 1
It illustrates the user journey of starting a project, customizing formats, and adding characters and backgrounds with ease.
​
Wireframe Pg. 2
Showcases the streamlined process for users to review, adjust, and seamlessly export their comics.
Talevision Low-Fidelity Prototype
Click to enlarge.
This low-fidelity prototype reimagines the TaleVison interface, designed for intuitive navigation and seamless user experience. This project showcases my creative approach to solving user needs through thoughtful UX design.
Usability Testing
PROMPTS:
​
1. Log In and Start a New Project​
-
Log into TaleVision by clicking the avatar icon.
-
Start a new project and navigate using preselected options.
2. About and Style Setup
-
Fill in details in the 'About' section and select your preferences in 'Choose a Style' using the right arrow.
-
Click 'Next' to proceed to the 'Story Elements Menu.'
3. Add a Character and Background
-
Go to the 'Story Elements Menu' and add one new character and one background.
4. Create a Comic Page
-
In the 'Story Elements Menu,' select 'Sketch Window.'
-
Add scene details by clicking the '+' icon and render your page using 'AI Editor.'
5. Save and Download Your Comic
-
Save and proceed to download your comic.
Insights
Issues and Suggestions
​​
UI Confusion: Certain elements like the sketch window and character menus were unclear to users. They suggested clearer labeling and separating combined buttons (e.g., "Style and About") for improved interaction.
​
Font and Icon Size: Users noted the small text and icon sizes made navigation difficult, especially for those with visual impairments. Increasing both would enhance accessibility.
​
Tutorial Need: A short tutorial was recommended to help new users understand the layout and key functions from the start, easing the onboarding process.
​
Feature Requests:
​
-
Preview Option: Users requested the ability to preview stories across different devices (phones, tablets, web).
-
Character Upload Flexibility: Users wanted more control over character uploads, allowing them to bypass AI interpretations for more accurate design control.
General Satisfaction
​General Satisfaction: Users found the app easy to learn and use, with intuitive project flow being frequently praised.
Responsiveness: The app performed smoothly, with no significant delays, contributing to high user satisfaction.​
​
​
Adjustments
Click to enlarge.
UI Confusion: Added a stepper that provides users with a clear visual guide through the process, breaking tasks into manageable steps, improving navigation and reducing confusion for a more intuitive experience.
Click the image to magnify.
Font and Icon Size: The new font and icon sizes, combined with WebAIM-approved colors, improve readability and navigation for all users, addressing previous accessibility concerns with clarity and ease.
Click the image to enlarge.
Tutorial Need: Added a "Tutorials" section, featuring short videos and step-by-step guides that cover all key functions, helping users quickly understand TaleVision's layout and use the app to its full potential.
Click the image to enlarge.
Preview Option: Located within the red circle, the preview icon in TaleVision’s sketch window enables users to visualize their comics in various formats, including mobile, webcomic, graphic novel, and social media. To enhance focus, the background of the sketch window subtly darkens during the preview. The example below simulates the final appearance on a mobile screen, enhancing the user experience.
Click to enlarge.
Character Upload Flexibility: Enabled the ability for users to upload visual references alongside character information, allowing TaleVision's AI to create more accurate and consistent character designs based on the provided sketches. This functionality will also be applied to the backgrounds section, ensuring users have greater control over both character and environment designs.
Style Guide
Click the image to enlarge.
Comprehensive TaleVision Style Guide: Showcasing logo, typography, iconography, color palette, and UI components to ensure a cohesive and user-friendly design experience.
High-Fidelity Mockup
Click the image to magnify.
The high-fidelity mockup for TaleVision features a streamlined interface designed for ease of comic creation. It includes a sidebar for panel navigation, a detailed attribute panel for character information, and a central prompt box for composing actions and dialogue. The layout allows easy input of assets and real-time previews of how comics will appear on various devices. This intuitive design simplifies the visual storytelling process, accommodating users of all artistic skill levels.
Final Design
Click to enlarge.
This is the complete high-fidelity prototype of the TaleVision app, a smart comic maker designed to empower creative storytelling. The prototype illustrates a step-by-step user journey, including login, homepage navigation, comic creation tools, and the final publishing process. Each frame highlights the app's intuitive design and robust features that cater to both amateur and professional artists. With a focus on usability and aesthetic appeal, this layout showcases my ability to design complex user interfaces that are both functional and visually engaging. The TaleVision app combines advanced technology with user-friendly design, reflecting my commitment to enhancing creative productivity through thoughtful UX/UI design.
Takeaways
TaleVision, born from challenges in animation and storytelling, leverages a supervised learning AI to streamline comic creation. This system was developed in response to the limitations of existing artistic AI platforms that often faltered in consistency and interpreting detailed prompts.
Through extensive user testing, TaleVision demonstrated its appeal beyond seasoned artists to captivate non-artists eager to bring their stories to life visually, despite lacking traditional drawing skills. This feedback guided significant refinements in TaleVision’s development to improve accessibility and user-friendliness, ensuring the platform met the needs of a diverse user base.
Key developments included simplified navigation, enhanced support features, and maintaining artistic consistency, essential for gaining artists' trust. The evolution into a high-fidelity prototype incorporated these enhancements, along with comprehensive tutorials and accessible support, to assist even the least tech-savvy users.
The journey of TaleVision has highlighted the transformative impact of user feedback in developing technology, especially AI-driven tools for creative expression. It revealed the potential to expand into markets comprising non-traditional user groups and underscored the importance of adaptability in UX design.
As we move forward, developing a beta version will allow us to further test TaleVision’s effectiveness in real-world scenarios and refine its capability to blend AI with human creativity, aiming to democratize the art of storytelling.​​