Hackathon project for the love of Comics

24hr design hack for all comic lovers.

Cover image for the article that has the logo and images of comic strips
Cx comics

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

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 💭

Stickers of different character designs from Hike Messenger. Poofy, Emoticon, Hikin and others.

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)
Process layout of converting print comic strip to a web comic strip
The journey from Print to a Web Comic

User Journey

Since the end-goal was a video presentation, we designed the user journey in a timeline of frames.

Flow chart of how a user might use Hike Comicx microapp

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.

Raw images of the artworks created for the Hackathon
CX Hikeathon images

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.

UI design screens of Hackathon Project — Hike Comix
Our design images

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dhananjay Garg

Dhananjay Garg

Product Designer who narrates stories. Love designing products that are accessible & usable. Connect on https://www.linkedin.com/in/djgarg/