Hackathon project for the love of Comics
24hr design hack for all comic lovers.
--
It was hackathon time at Hike Messenger, and everyone was gearing up a few weeks before starting their 24hr hack projects. I started plotting my dream project with a fellow designer who had super cool character design and animation skills. We worked together in the sticker design team at that time, and both were incredibly passionate about all things anime, cartoons, and comics.
Team Members
- Murtuza Ali Hussainy
Character Art, Animation - Dhananjay Garg
Product Design (UI/UX)
Design Tools
- Sketch (Interface Design)
- Adobe AfterEffects (Animation & Sound)
- Adobe Illustrator (Iconography)
- Adobe Photoshop (Comic Panel Drawing)
Problem 🤔
The reading experience of web/mobile comics is pathetic. Comic viewing apps don’t optimize the reading experience for the user’s reading patterns. The Digital version of comics still looks like a scanned copy of the printed version with no additional experience enhancements.
Opportunity 💭
— But how does something like this fit into a messaging app in its core?
Hike Messenger has many stickers built into its platform, containing tons and tons of interesting character designs. By exploring these characters, users will relate better to the app’s core and spend more time in the app (since reading comics takes more time than just chatting with friends). Research showed that with more and more characters getting created for the app, users engage less with each of them.
Duration ⏰
- 24hrs
— We split the time into [2+9+4+9], which is 2hrs of brainstorming, discussion, and what needs to be done 💭, 9hrs of the actual creation of screens, wireframes, comic covers, and a few comic panels 🎨 , 4hrs of sleep 😴 , and the remaining 9hrs of just refining the presentation video 🎥 . - We kept the project's scope strict and achievable within the designated time — Make the reading experience easier for users in both landscape and portrait mode. Make the solution appealing for users as well as for fulfilling important business metrics.
Different Comic Types
We wanted to cover a few different comic types from Hike’s target audience perspective. After doing quick research and downloading a few comic and content apps, we decided to go with —
- Web Comics (single panel and easily snackable)
- Digitized Print Comics (multi-panel storyboards)
- Memes (Do memes qualify as comics? — with users spending so much time engaging on platforms like 9GAG, it made a big use case)
User Journey
Since the end-goal was a video presentation, we designed the user journey in a timeline of frames.
Artwork & Mockups
Keeping the user flow in mind, Murtuza created supporting artworks. We decided to design a one-panel comic and put all his cosmic energies into designing the panel by panel comic experience.
To not waste any time, I designed the mockups and combined his artworks into the mockups directly.
Stitching it all together
Stitching it all together in a single timeline involved tweaking screens' timing in aftereffects and putting everything in its rightful place. Mostly done in After Effects and found a stock sound on AudioJungle.
Result
The result (video) was cool and appealing for the viewers to engage in under 60 seconds.
We had 3 minutes to present our project. We split that into 1–2 minutes of helping everyone in the room understand the problem and business opportunity and 1 minute of the actual video as a solution.
We did win the best presentation award for our video, but unfortunately, the business ROI was not enough to get this idea baked into the product roadmap.
Give me a shout!
Thank you for reading this far! 😁
Let me know if you have any questions or comments on my design — or — If you’d like to have a chat about anything design-related, I’d love to hear from you!
Before you go…
👨🏻💻 Connect with me on LinkedIn, Twitter, and YouTube (Subscribe).
💭 Comment your thoughts, feedback, anything!
👋 Alternatively, you can also book a design mentorship session by sending a request on Calendly. If you want to learn more about design, check out my short 2–3 minute design education videos on AntWak.
