While looking at webcomics online, I realized most designs today are stuck in the 90s — not visually, but functionally. It was a tedious process to click through comic pages. When I did surveys with fans of the page, their biggest complaint was that the most recent comic page, which was always the landing page, would spoil the story. Some webcomics solved this by either starting at the beginning or by having a dedicated landing page where people can choose to go to “first” or “newest” page. Neither option is ideal.
Firstly, you frustrate a lot of people by making them click another button on the landing page to get into the comic. People are used to being immersed in the comic from the moment they enter the page. Most visitors of the site already are avid readers and don’t want to take that extra step everytime, since they are coming weekly for the new update.
The problem with showing the newest page right away that is that the creators always upload 2-3 pages per update. People firstly had to navigate 2-3 pages back to start where they left off. The problem with showing the first page at the landing is that way more people visiting the site come for the newest page and again have to take the extra step of pressing “newest”.
Even though I think the whole design process of webcomics is flawed, I wanted to introduce change thoughtfully and slowly. People are used to this layout and almost every webcomic I saw was modeled after those principles. I wanted to keep the old elements, but make the overall experience more practical and easy to use.
Some of the scribbles for the layout
First of all, I decided to make the current site the main element of the new layout. I wanted to make fixed menus, that are always accessible, on the sides of the site.
I also wanted to make the experience of the site more like browsing through a book. I implemented a (lazy load) slider that could be controlled with touch, left and right keys and the mouse. On your phone or tablet, you could swipe through the pages and on desktop you can drag the sites or use your keys to move through the pages. I also inserted arrows to move to the next or previous page that are always visible.
Another important part was to keep the discussion under the pages. Eli and Viv use Discord, so I implemented a script that reloaded the disqus thread every time the user accessed a new comic page.
Thankfully, Eli & Viv have a dedicated following on Patreon and other social media channels who were more than happy to test prototypes, so I already was able to implement and collect a lot of requests, changes and feedback. We are looking forward to keep listening to users and potential new interested ones after the site launch to continuously improve the site.
First coded prototype for testing
My research (talking to Eli and Viv about their past experiences with the old site, talking to current users and also to people who haven't read webcomics yet) led me to these 5 key elements:
A call to action for their patreon, since that is an important form of income which many people didn’t even knew the link of
A menu on the side with quick links to their chapters (fixed)
Another menu on the side with text about the comic and links for further information (fixed)
The starting page of the current update in the middle
When testing I quickly realized the great challenge of implementing all these elements on mobile. I still wanted the current comic page to be the main focus of the site, which is why I worked on reducing the menu items even further. I came to the conclusion that I'm going to implement the social media icons into the "about" section as well, losing another element on the bottom.
The arrows for jumping between the pages on mobile aren't fixed, while on desktop they are fixed on the site for quick access. Since on mobile user should be encouraged to use a swiping gesture, I am still working on animations to encourage users to swipe the pages.
In the beginning I wanted to put the "about" and "chapters" section at the bottom of the page on mobile. A touch would've opened them. But sadly, when opened in Safari, the Safari toolbar on the bottom was hiding these important menu items, which led me to leave them on the side. I had another version where I put them on top, but that wasn't very well received, while the version with the elements on the side led to better feedback.
Mockup of the finished site
The site is now way more responsive, more comfortable and overall provides a smooth and nice reading experience.