The Goal


Eli and Viv are the creators behind the successful heart of gold comic. They have a big following online and publish their comic mostly through their website. They release 2-3 comic pages weekly.

The old website is slow, hard to use and not mobile friendly, although their site statistics show that many people access the site through their mobile phones.

You can find the finished result at heartofgoldcomic.com

The Research


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.

The Process


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

Main Elements


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:

Prototyping


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.

The Result


Mockup of the finished site

The site is now way more responsive, more comfortable and overall provides a smooth and nice reading experience.

The first version of the site launched in September 2019 at heartofgoldcomic.com