Don't call me that

Colm Tuite: 

Everyone seems so eager to cling to an identity. UX designers, visual designers, motion designers, ruby developers etc. The list seems to be getting longer by the month. Each time a designer masters a new skill, they add it to their tagline like a trophy on a mantlepiece. So, instead of a UX/UI designer, now you’re a UX/UI/Visual designer. I understand it helps to give others some insight into what you do and recruiters must narrow the field somehow but why put yourself in a box? Why assume an identity that limits your productivity?

Tuite is a very insightful designer; for more, see his excellent top answers on Quora.

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


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.

Stockholm’s 10 Best Designed Startups: Part 1

This is part of a series of posts on Stockholm's best designed startups. Read more about the methodology here. art two has the top two best designed startups. (Update 2013-05-15: Thanks to Jonny Strömberg I've added Dribbble links to a couple of the designers of these sites).


Press release distribution service mynewsdesk bill themselves as "an integrated one-stop-solution news distribution service" that allows its users to create and distribute press releases. 

Mynewsdesk score well for their black, white and red colour palette, which works well with their chosen Helvetica for their typography. The designers have thoughtfully specified Helvetica Neue in their CSS too. Copy is simple, informative and to the point.

mynewsdesk 24
Imagery 5
Typography 6
Copy 7
Colour 6
Responsive 0

Mynewdesk could stand to improve their imagery, which on their homepage relies on user-uploaded pictures accompanying their press releases. On their product tour however, I liked their icons, which are drawn in a simple, bold, monolinear style that marries well with Helvetica. No responsive design from Mynewdesk, cruelly scoring them a zero in that category. Designer: Jonny Strömberg


9. Truecaller

truecaller.png

Truecaller is a collaborative global phone directory. The idea is that users upload their own contact details, which can then be searched by other users. It's a compelling idea, if reliant on the trust of its users, though Truecaller currently boast almost a billion numbers.

Truecaller score well on imagery, making good use of a set of hand-drawn illustrations reminiscent of Dropbox. The drawings are carried over to their video, maintaining a nice sense of brand continuity.

Truecaller 25
Imagery 6
Typography 5
Copy 3
Colour 5
Responsive 6

Truecaller could definitely improve their copy however, which is too long in places, particularly in their product tour. Nonetheless a decent responsive design scores them a 6. They drop a few points there due to a few issues with their typography which relies on some slightly anonymous Helvetica.


The ink has barely dried on Reupp's HTML yet they sneak in at number 8 on the list. Reupp's idea is that users can pledge a small donation to encourage the creators of their favourite shows to create another series. It's an interesting spin on the Kickstarter model. If the show returns, the creators receive your money; if not, it stays in Paypal until you decide otherwise.

(It's a shame naming isn't a category, because if it was, Reupp's implicit reference to The Wire would surely top the list).

Reupp 26
Imagery 7
Typography 7
Copy 6
Colour 6
Responsive 0

Reupp start off with a bright and inviting colour palette that is enhanced with a few dashes of yellow and green accents. They make good use of Helvetica at scale and dead ringer for Proxima Nova, Monserrat, for their typography, though the two faces are similar enough that one would do.

Copy at Reupp is perhaps a little short but otherwise effective. Sadly no responsive design from Reupp, which costs them a higher slot on the list. One to watch – no pun intended.


New hotness Tictail, the "Tumblr for ecommerce", allows anyone to quickly and easily set up an online store. Funded by among others Balderton Capital, Tictail have quickly grown to 10,000 users in 10 months and are enjoying a great reputation in the Stockholm scene. 

Tictail's colour palette is an Ikea-flavoured mix of yellow and blue, with a warm neutral base and green accents for their call-to-action. 

Tictail 28
Imagery 5
Typography 5
Copy 5
Colour 7
Responsive 6

Imagery is a little scant, save for a few carefully chosen screenshots and example stores, but the excellent design of their app comes across best in their video. Copy is short and emphasises Tictail's price – free – but perhaps at the expense of some desirable detail on the product. For typography we get Open Sans which could be improved with a more restricted range of sizes to better develop a hierarchy through the page. A good responsive  implementation rounds out the offering, though I miss some navigation – the "hamburger" icon kicks me down to the footer which is a little unexpected. Designer: Kaj Drobin


Social shopping site Helishopter aims to bring your friends into your purchasing decisions in a Pinterest-reminiscent interface. A mature colour palette of greys and slightly desaturated red works well and is distinctive. Helishopter make the best of Open Sans for their typography with a well-organised set of sizes and weights. Copy is descriptive and information rich, though could be tightened up and made shorter.

Helishopter 29
Imagery 7
Typography 8
Copy 6
Colour 8
Responsive 0

Helishopter score highly for imagery with a nice set of line-drawn illustrations adding texture and interest to their header image. The illustrations are carried over to their photography adding a distinctive touch. Sadly no responsive design from Helishopter which costs them a higher place on the list.

A lovely bit of UI worth highlighting on Helishopter is their "try it without logging in" feature – very user friendly. Don't miss their beautiful favicon either. Designer: Gustaf Zetterlund


Discussion app Kundo, with a focus on customer service, comes in right in the middle of the list. They benefit from a strong score in the other categories because I just can't get behind their childish display type, Umabold. There are certainly better alternatives, Omnes perhaps. 

Nonetheless, Kundo make good use of a range of illustrations for imagery. Their line-drawing figures are different enough from their flatter, less hand-drawn icons that together they avoid a clash.

Kundo 30
Imagery 6
Typography 4
Copy 5
Colour 7
Responsive 8

Copy is emotive and focuses on results, though I'd like to know a little more about what makes Kundo different from other discussion forum offerings. Kundo score well for their colour too, with a warm neutral ground making the most of their icons. (Don't miss the scrolling effect on the blimp in the header). Finally, an accomplished responsive design that retains the warm feel of the website scores them a very respectable 8.


Perhaps Stockholm's best known startup, Spotify have achieved an impressive set of negotiations with the record labels to now be available in 35 countries, from Andorra to New Zealand. The music service allows you to stream virtually any song, instantly. Spotify have a couple of different landing pages on the go, but the one I have evaluated here is the one you see above. 

Spotify 31
Imagery 7
Typography 6
Copy 5
Colour 6
Responsive 7

Spotify score highly for their imagery, particularly their idiosyncratic set of photographs. These focus on the sort of experiences that are enhanced by Spotify – relaxing on the couch, going for a hike and so on – instead of more explicit shots of the app itself. 

A somewhat hipster filter has been applied to the photos, making for a muted and mature colour palette. Spotify's brand green is effective and distinctive. Spotify's copy is good; that said, maybe everyone knows what Spotify does at this stage, but I would have liked to have seen a clearer presentation of Spotify's core streaming feature. Finally, a successful responsive design finishes us off.


Now we're getting close to the top of the list. Surftrain, as yet in private beta, allows its users to record their voices while browsing the web, creating a story that can be viewed by others. Examples on their site now include a trip through an ecommerce store, with the narrator describing the products and categories she likes.

Surftrain score highly for imagery, making very effective use of a dramatic city scape of Stockholm.

Surftrain 33
Imagery 8
Typography 7
Copy 6
Colour 6
Responsive 6

The image works well because of the copy space in the sky which Surftrain have used for their call to action. An intense filter defines a "milky coffee" colour palette. Copy is strong too, both brief and descriptive. Typography relies on the beautiful (and ubiquitous) Proxima Nova, and Surftrain could well add something more distinctive to their offering – perhaps even recalling their accomplished script logo. A responsive design scores Surftrain additional points, although they could improve the scaling and cropping of their photos on mobile viewports, which currently just leaves those coffee-coloured skies visible without any texture. Designer: Christer Lindgard


Stockholm’s 10 Best Designed Startups: Introduction

Scandinavia has a world-famous reputation for design. Shouldn't that extend to its startups, too? Indeed it does. I've been deeply impressed since moving back to Stockholm a couple of weeks ago by the all-round standard of online design, even in industries that I hadn't expected, like loan consolidation. So of course I couldn't resist a little friendly ranking. I've come up with my list of what I think are Stockholm's 10 best designed startups. Here on the blog, you'll get to see my list as well as my reasons for including each site. I'll go into even more detail for the best startups – as Charles Eames said: "The details are not the details. They make the design."

Methodology

All the startups listed on startuplocation.com/stockholm were considered. Of those, 20 were scored out of ten, in five categories, for a maximum possible score of 50:

  • Imagery including icons, illustrations, photographs and video
  • Typography font choices & typesetting
  • Copy clarity of meaning; informativeness; brevity
  • Colour distinctiveness; complementariness
  • Responsive fidelity across devices; functionality

Sites without a responsive design were scored zero in this category. This meant some rather cruel outcomes for sites without responsive design, but I think this reflects how important a responsive design is today. Of course, each business has its own set of metrics to take into account that I amn't privvy to. What do you think? Is responsive a must have today? Let me know in the comments.

Posts

Part 1, with startups 10 – 3 is available now. Part 2, with startups 2 & 1, is here.

Your favourite

Of course, I have left out your favourite startup. Which is it? Who do you think is breaking new ground in startup design? To join in, just reply to this Tweet. The mentions of each startup will be counted and graphed.