Stockholm’s Best Designed Startups, Part 2

This is part of a series of posts on Stockholm's best designed startups. Read more about the methodology here, and find part 1 with startups 10 – 3 here. What's your favourite? Vote by replying to this tweet and see the results graphed at the bottom of this post.


Epidemic Sound manage a library of music tracks available to TV and film makers for unlimited use in return for a subscription. This takes away the hassle of managing royalties for TV makers, and music creators are paid a flat fee for each song they sell to Epidemic Sound. 

Epidemic Sound 42
Imagery 8
Typography 8
Copy 8
Colour 9
Responsive 9

Imagery

Epidemic Sound's header image looks great and is carefully laid out to allow space for the logo, tagline, intro and a clever widget that instantly plays music from the library according to the mood you want. Epidemic Sound have gone for a render to achieve this careful balance. It's nothing that couldn't have been photographed of course, which would have looked even better. Nonetheless Epidemic Sound are in good company, with for example Square using a similar strategy. 

Fig. 1

Fig. 1

Fig. 2

Fig. 2

A few points are lost for the somewhat childish illustration style used on their figures (fig. 1). There's nothing wrong with a childish style per se – as long as it is executed really well. The icons in their navigation, as with many picture-only navigations, just don't get across their meaning to the user (fig. 2). Nobody goes to a website looking for information that could be metaphorically described by a briefcase – they look for the word "Careers" or "Jobs". A text-based navigation would be better.

Typography

Epidemic Sound have chosen the venerable Trade Gothic for their display type, with Helvetica Condensed for body. Trade Gothic is a great choice with a sturdy feel that suits rock n' roll. Props also for going the extra mile for a custom-drawn script logo, though it isn't the most elegantly executed script in the world. Check out the joining stroke from the i to the c, and the o to the u for example (fig. 3). 

Fig. 3

Fig. 3

Fig. 4

Fig. 4

Copy

Epidemic Sound comes in with the highest score for copy across the whole ranking. I was really taken by their distinctive arrangements of copy. "Facts for the mind" and "Facts for the heart" is a great way of combining emotive reasons to use your product with the nitty gritty detail. I also loved their contrast between "The hard way" – a tangle of issues and problems – with "Our way" – five green checkmarks ticking off Epidemic Sound's solutions (fig. 4). This really works well, and I haven't seen anything like it elsewhere.

Colour

Epidemic Sound have achieved a distinctive colour palette, of natural warm neutrals with contrasting teal and deep red accents. They go a little crazy with their range of tones which means that they have ended up with one or two awkward pinks (see the "One stop shop" section), but overall the effect is impressive, memorable and very distinctive.

Responsive

Fig. 5

Fig. 5

Epidemic Sound have implemented a top-notch responsive design that really retains the full feel of their website, right down to mobile viewports. Even their complicated "flow chart" is replaced with an equally readable linear version. A lesser designer would just have scaled everything down and hoped that Retina screens would come to the rescue. 

On mobile we actually get a better, text-based navigation too which is much easier to use. The header image is cleverly reworked on mobile, losing the unnecessary desk and accessories. I'd prefer a better product screenshot on the iMac screen however, especially as it looks like the app screenshot is showing a smaller version of itself. Either way, the nature of the app isn't visible on screen, so that could be improved.


magine-overview.jpg

Magine call themselves "TV as it should be", and that's exactly right. You can watch live TV on all your devices – computer, iPhone, iPad – pausing and rewinding as well as watching shows that have already ended, browsing through a beautiful channel guide to find the channels and shows you want. 

Magine 43
Imagery 9
Typography 9
Copy 6
Colour 9
Responsive 10

Imagery

Magine have done a great job with their imagery. A simple demo of their iPad app in their header works particularly well. It's a video, but it's silent, plays automatically and doesn't have any visible controls – you just watch. A hand navigates the app, effortlessly showing you how it works (fig. 1). It's a really low-friction solution and one that many other app makers would do well to copy. (The first time I saw something similar was when Path launched v2 of their iPhone app). Interesting, the hand itself appears to be a still stock photo that is animated, rather than a video recording. If anything, the video could well loop to catch visitors who miss it the first time round.

Fig. 1

Fig. 1

Fig. 2 The devil is in the details: Magine have thoughtfully added glossy highlights over their screenshots to simulate the glass displays of the devices, but this highlight has strayed onto the aluminium bezel of the laptop.

Fig. 2 The devil is in the details: Magine have thoughtfully added glossy highlights over their screenshots to simulate the glass displays of the devices, but this highlight has strayed onto the aluminium bezel of the laptop.

Type

Magine relies on Proxima Nova with a little bit of its condensed variant thrown in. They make the best of the font, particularly in their headlines, set in Proxima Nova Light which is better suited to display sizes. Magine have also used a casual handwriting-style font but I feel there are some better options available (fig. 4).

Fig. 3

Fig. 3

Fig. 4

Fig. 4

Copy

Magine's lowest score comes from their copy. Their headers, in particular, while short and simple, don't actually tell me much about their product: "On your terms" and "Whenever you want" could apply to lots of startups on this list. That said, their body text is better: "Magine gives you access to all programs from your favorite channels live and recorded. Watch your favorite documentary from last night or that live game."

Colour

Magine have a mature palette dark grey with a cool neutral ground, as well as a rusty red that recalls their logo for their call-to-action, as well as a turquoise accent shown in small areas in their app, as well as in their drop-down channel selection (fig. 3).

The colours work well to show their hardware photography and app screenshots well, as they don't compete for attention.

Fig. 5

Fig. 5

Responsive

Magine have a particularly strong showing in their responsive category. Some of the pitfalls with responsive design today are either losing some of your brand identity in the mobile view, or ending up with a drably linear layout on desktop (often with ridiculous line-lengths). Magine avoid both in their layout. One particularly successful example is their second section. On desktop, we get the whole iPhone, nicely offset from the grey background. On mobile, the phone is cropped, while still showing Magine's app interface and a recognisable show in the screenshot, and even a subtle shadow to boot. This attention to detail really works well to score Magine the top points.


That's it! I'd love to hear what you think about my choices of startups and my criteria for evaluating them. Design is a commercial activity at the end of the day, and every business will have its own set of requirements that influence design just as much as the designer does. Let me know what you think Stockholm's best designed startup by replying to this tweet: