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.
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.
When you play a game that doesn’t have a elaborate tutorial on how the mechanics work, they usually quickly show a subtle animation of a mouse or the keys you can press to use the game. I implemented the same effect on Heart of Gold to encourage users to try the new navigation and control systems.
I also changed the mechanic of jumping to the newest page to jumping to newest update, which resulted in people not having to go back several pages.
Being active on social media is a big part of Eli’s and Viv’s work in handling the promotion of the comic. They got most of their fans and following through it, which means there is also a big emphasis on making their social media profiles accessible and easy to find.
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.
First coded prototype for testing
My research led me to these 5 key elements:
A call to action for their patreon, since that is their main 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)
A menu on the bottom for the social links (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 once again showed a small animation after the page loaded to suggest doing that movement to navigate around.
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 position them in the top. I put an arrow next to the title to suggest that this element is going to slide open.
Mockup of the finished site
The site is now way more responsive, more comfortable and overall provides a smooth and nice reading experience.