A young but promising site, full of potential. Its true power apparent, we committed to helping it become all that it could be. This is a story of a great migration, tight deadlines and the rebirth of a hero.
Heroic Hollywood is an LA based movie news website founded by well known 'ace scooping' journalist Umberto Gonzalez. They cover the greatest heroes of the big and small screen, ranging from comic book legends to iconic characters in cinema. Their team of talented writers produce fresh write-ups, editorials, and break scoops daily.
Over the past decade comic book films have risen to dominate the box office worldwide. Umberto has been at the forefront of covering these films, often being first to publish breaking news and insider knowledge on what they call in the business 'genre properties'.
At the end of 2014 when LOUDD was just getting off the ground, we approached Umberto after coming across one of his stories by chance on social media. We could see the potential in the site and thought "why not? Let's drop him a line". The internet means time zones and geography are no barrier to working on projects you think you can add value to, and Umberto was very impressed with our initial ideas.
It turned out to be perfect timing for both parties. Heroic Hollywood was getting hundreds of thousands of visitors a month but the site, built and hosted on Squarespace, was creaking under the weight of the traffic. The design left a lot to be desired, too. We had fresh ideas for the site from the start, so after several consultations Umberto decided he wanted to go ahead and take his site to the next level.
After our initial conversations Umberto provided us with some examples of graphic and web design, comics and user interfaces that he liked for us to use as reference material. We combined this with our own notes and ideas that flowed from these conversations. We now had a clear direction and brief, and couldn’t wait to get started.
In short, our brief was to: design an aesthetically pleasing (comic-book influenced), user friendly, ad ready site which could handle multiple authors and any potential visitor growth. We also needed to migrate the couple of thousand existing posts on Heroic Hollywood from Squarespace to the new site hosted on our server.
Sounds simple, right? Little did we know what Squarespace had in store for us!
It was agreed very early into initial planning with Umberto that a bespoke, from the ground up Wordpress build would be the best solution to meet their needs. He had prior experience with the platform and given the nature of the site it seemed the obvious choice.
The initial designs were refined throughout the drafting process, as we took into account the requirements of other stakeholders in the project - including the site’s editorial staff and advertising provider. It became apparent that several aspects of the initial heavily comic-book inspired design we pitched were not going to work with the requirements of the advertising provider. A site like Heroic Hollywood relies on advertising for revenue, so of course this took precedent over the sites aesthetic features.
The next step in the development process was to produce wireframes based upon our initial design concepts and a proposed site map. Once these were agreed and signed off, our developers were able to begin building the site. At the same time our designers were able to focus on refining the graphic design further and creating a full brand aesthetic for Heroic Hollywood.
The suggestion of a full re-brand and logo re-design was ruled out early on by Umberto, on the grounds that fans of the site loved the existing logo and wordmark. Not an issue, however, we did re-build the logo anyway, simplifying the colour palette and making some minor adjustments for better clarity at smaller sizes.
Several design limitations were imposed by Heroic Hollywood’s advertising partner to ensure full compatibility with all available advert types. This included, amongst other things, a maximum site width of 1024 pixels. This strict limit meant we had to go back to the drawing board with our desktop layouts for the site, and re-think the structure to fit this defined playing field.
We put forward a design that retained some of the comic book inspired elements, without distracting visitors from the content. This included a custom carousel which was built to house the five latest stories, their titles displayed in white boxes with a black outline - reminiscent of the classic comic book format. Below that, more recent posts from all categories. Titles and post excerpts contained within pale yellow boxes, a colour frequently used in old comics.
Umberto was clear from the start that he wanted a continuous stream of posts on the front page. Meaning, as the user scrolls down the page more posts are loaded automatically, much like the news feed seen on Twitter and Facebook. This proved to be a great approach, and really keeps the user engaged with the website.
A ‘sticky’ sidebar would feature on all pages, with links to recent posts, popular posts, social links and a newsletter sign up box. Adding dynamism to the top of the site, we placed a trending bar to scroll through some of the most popular stories from the past 24 hours. A ‘sticky’ menu pinned to the top of the screen would aid navigation, and on desktop show drop down options allowing users to get to content quicker.
Umberto had his heart set on a banner for the top of the site featuring illustrations of characters from TV and film. For this task, we reached out to Tom Barton, a skilled young illustrator from the UK. He did a fantastic job, and his illustration really helps to give the site a unique look that distinguishes it from the competition.
As with any project of this size, development of the site threw up a few problems to solve. The largest of which, by quite a margin, was the task of migrating around two thousand posts from Squarespace to Wordpress. Our initial research into this showed that it could be done and shouldn't be too difficult.
On the contrary, migrating all those posts, retaining all images, categories, embedded content and remapping all URLs to fit the structure of the new site turned out to be a behemoth of a task. Squarespace does allow the exporting of posts, but gives extremely limited options, meaning our attempts to export were usually lacking some critical information. Adding to our woes, was the fact that the URL structure used on Squarespace was not consistent, meaning we could not easily remap and redirect the old URLs.
After trying numerous approaches, we had exhausted all methods we could find to achieve the migration successfully. We worked out that manually moving the images alone would involve 60+ hours of work. Faced with the stark reality of such a laborious and repetitive task, our lead developer jumped in with a plan to save the day, and quite possibly our sanity. He wrote a script that would fetch images from from the original site and place them in their correct positions on the end domain. We ran the script with baited breath, waiting for the results to come in. To our delight, it worked perfectly!
The redesign was received very well by the loyal Heroic Hollywood fanbase. Within two months of launching pageviews on the site had almost tripled, and visitor numbers were at double what they were prior to launch. We had succeeded in giving Heroic Hollywood a fresh, distinctive look. Creating a site with vastly improved visitor retention, page views, SEO performance, and advertising revenue.
Heroic Hollywood continues to go from strength to strength, with monthly pageviews in the millions. It has been a great pleasure to be part of this journey, and we look forward to seeing what the future holds for the brand.