Home Services Projects Our Team The Lab Blog Contact Jobs
Minutehack Logo
Minutehack homepage screenshot Minutehack internal page screenshot minutehack alternative page screenshot

The Challenge

Last year we worked on version one of Minutehack. The focus of the company was to create short, sharp one minute reads across the topic entrepreneurial business. The site adopted a mobile first approach to cater for the time stricken business person looking to quickly digest news off the press.

The Challenge

When Minutehack approached us to create version two of the platform, we jumped at the prospect of re-inventing the site to provide more in-depth reads. Having previously created heavy content based websites for the likes of Raconteur in London, we were very experienced to take the site forwards.

Minutehack wanted to achieve increased user engagement and larger traffic volumes. With a talented team of writers at their disposal, the articles were going to be topical, thought provoking reads. Our challenge was to produce a website that readers would instantly connect with for its design and tone. This project had a large focus on the user experience which was part of the discovery phase.

Discovery

At the beginning of the project, our UX team spent time reviewing Minutehack’s previous 12 months’ worth of analytics to provide key metrics and data about the existing readership and their behaviour. During the stakeholder meetings expectations were set, briefs received and ideas communicated. Sitemaps, user flows and personas were produced to help gain a deeper understanding of users and the way they would interact with the content. Competitor benchmarking was undertaken to help determine relevant successes and failures of related industry websites. Although most were considerably more established, there was still a lot to be learned. We then reviewed all the research to help inform the design decisions throughout the project.

Taking into consideration all findings during the discovery phase, the team sketched and created digital wireframes to help define the way Minutehack readers would move from page to page. This was demonstrated to the client via interactive prototypes.

Taking pen to paper to sketch layout ideas

Taking pen to paper to sketch layout ideas for the key pages.

Translating sketches into digital wireframes

Translated sketches into digital wireframes to form part of the interactive prototype.

Visual Direction

As part of the design phase our UI designers incorporated a number of processes to help inform the visual language. This included the creation of style tiles, serious focus around typography using Typecast and visual inspiration boards of UI elements that set a direction for Minutehack’s new style.

Typography exploration

Exploration around the visual language and typography.

Creating the UI

Minutehack’s sole focus was its content. The guys at Minutehack were happy to take a step back and let the design team at Si digital do their thing. They had referenced sites that they enjoyed during the discovery phase as part of the competitor benchmarking process. The design required clarity, white space and comfortable readability. The landing page needed to provide an impactful overview of what Minutehack had to offer including the broad range of article types. Content was broken up with the use of hierarchy and breakouts such as ‘Most Read’ articles and ‘Top Contributors’.

Extra focus was given to article pages, with the creation of two contrasting layouts suitable for different article types. A perfect 'words per line' length was strived for at every breakpoint to increase engagement and readability on every device and screen size. The vision was for articles to become a place where readers could lose themselves in the content.

Article template

An example article template which formed one of two options for different story types.

Sponsors Vs Adverts

During stakeholder meetings a contentious talking point was adverts. Their boldness can often damage the visual tone of a website, however with a revenue model that had this at its heart, other options were researched. In various indie magazines, new approaches to advertising can be witnessed. They often take a more personal approach to promoting brands using a consistent, minimal style. Initially the decision was made to run with Sponsors on the site. This featured the company logo and description promoting their product. It was a bold move and one which only an open minded client such as Minutehack could make. As part of the post-live support, Si digital analyse and report back on data. The impressions received by Sponsors will be high on the list in the first report when feeding back to the client.

Example of a Minutehack sponsor

A minimal approach to advertising. An example of a sponsor and a typical square advert.

In Summary

The outcome of the Minutehack website was a clearer, more informative design that helped the great articles written by the MH Team sing. Working with a client who has total confidence in you allows designers and developers to excel. Since launch, the site has seen significantly improved traffic and social media engagement.