Re-designing busuu
One year as a Product Designer
Last month marked my one year anniversary at busuu; representing one 26th of my entire lifetime, and one 5th of my lifetime as a product designer. As a result of this monumental occasion, I would like to talk about the monumental task that I have been doing since I have been here; the redesign of both our mobile and web platforms, which has incidentally just gone out to 100% of all users.
We set out to create a new look so that we could reflect better the sophisticated and mature product that busuu has become. We went further than this — we built a design culture.
As ever, it is important to note that this article hasn’t been written as a conclusion; we will continue to test, to iterate, to re-test, and so on. What I want to talk about here is what we did, the lessons we learnt, and some of the key design principles we formed that will shape the future of design at busuu.
Design Principle One:
When in doubt — reduce
Prior to 2013, busuu had been around for 5 years, had employed 4 different design agencies, had over 30 million users, and had never employed a single in-house designer. To say that it was a mess is an understatement. Our CEO Bernhard Niesner can often be found quoting that the majority of the website was designed by him on PowerPoint; this is not a joke.
Initially we dealt with this by identifying busuu’s key activity areas and (from a design perspective) we tried to reduce them down as much as possible; massively limiting the colour palette, font faces, and moving towards a flatter, cleaner, more usable design. This re-skinning of key pages continued until we came up with an overall design aesthetic that we felt suited the busuu product.
Tip: Make (and use) a style guide even if you don’t know what your style is yet.
One of the key learnings for me was that we should have pushed for a style guide from day one. When you are in a big rush to get stuff done it is sometimes hard to prioritise work that will take time, but also save you time in the future. Style guides save time; they allow your developers to re-use their CSS, they force the whole website to be consistent without you spending hours doing design QA, and allow you to make design changes to the live site quickly, dynamically and with less risk of annoying your developers.
Believe me, it was difficult to explain why #3190d0 really, really needed to change to #61bcf9…
…and seeing these colours together here it is amazing to think about how much of change it made, however our switch to a lighter, brighter colour palette was actually one of the most successful design changes that we did in the last year; increasing conversion and massively improving busuu´s appearance of being fun and accessible.
Design Principle Two:
Pictures are better than words (and icons are better than pictures)
Busuu teaches people to learn foreign languages — and it’s good at it; since I have been working here our user base has grown by just over 10 million.
As a result of having such a large user base, we have to cater for multiple interface languages with dramatically varying text lengths. See below for an example of why this is difficult:
To get around this text-length problem we have made a huge effort to use icons as much as possible to support and (where possible) to replace text translations. This is most noticeable with our learning activities; which we have changed from photos to consistent, recognisable icons.
Tip: Use SVGs
Again — it seems easier to just do a sprite sheet for web, but having SVGs will save you heaps of time in the long run if you are redesigning your product and are susceptible to decisions changing around colour, size, etc. Following Joe Harrison’s excellent example, we are experimenting at the moment with having embedded icon variations for smaller views, and are even looking at changing our icons depending on our user’s locale and age, etc using SVG layering.
Design Principle Three:
Less steps good, more steps bad
Our users come to busuu to learn languages — so we have reduced the number of steps required before they can access a learning unit. This has meant removing our activity menu screen (which saw an immediate 27% rise in learning unit completion rates). We know that some of our users are more interested in certain learning activities than others (for instance, speaking not writing, and vice versa). We have therefore split our learning units up into smaller sections that are accessible right away from your dashboard.
Another thing we know is that our users who have friends to compete with are more active (and more active means you learn better). As result we have added a leader board that allows our users to immediately see how well they are progressing against their friends.
As well as this we have reduced the amount of forms we require users to fill in (in general, but mainly as part of the sign up process). This has been successful; our recent redesign of the sign up flow resulted in a 70% increase in sign ups. I cannot tell you how good it feels as a designer to see analytics like that.
Tip: Don’t get lost in product re-skins
The busuu product is huge; a re-skin of the whole thing was never going to be an easy or a fast task. Break it into parts, and don’t ignore obvious navigation, user flow and UX issues in favour of a re-skin unless you are going to be able to complete that re-skin VERY quickly; otherwise you’ll end up re-building bad designs with a new colour scheme, and not be able to go back and iterate on them until months after.
Design (Team) Principle Four:
Work fast
Like a lot of (design) teams, for a long time now we have suffered from a condition known as ‘too-many-projects-and-not-enough-time’. Just over a month ago our brilliant head designer Aftab Arab moved on and we didn’t have a replacement. In Jason Fried and David Heinemeier Hansson’s excellent book Rework they recommend not re-hiring straight away so that you can test how you function minus one person. For us, this experience enabled us to use our limited resources as a reason to better prioritise work, and to say no to design requests that weren’t vital. This is important; startups need to work faster than other companies. This isn’t accomplished in a literal sense (although on another note, always use the correct tools for the job). Working faster is accomplished by working smarter; weeding out tasks that don’t need to be there, prioritising work correctly, staying focussed on the overall goals and key product needs, and, sometimes, by saying no.
Conclusion:
Redesign your culture, not just your product
We think busuu will be around for a long time — and as a result I don’t like referring to the redesign project, as a project. A project suggests that it is something that will be finished; a design culture is something that will be constantly improved, added to and iterated on.
With this in mind, we have just completed constructing a dynamic style guide for design, branding, and copy. We are improving the tools we use to make us faster and better; Sketch for wire-framing, SVG icons and designs, Flinto and proto.io for prototyping, Photoshop and Illustrator for high-resolution design concepts. The best advice I can give you though, is to collaborate. Listen to your team, work with your colleagues, share ideas, swap seats with each-other, take pride in your collective work — build next level shit, and celebrate when you have achieved something good, even if there’s still a million other things you want to do (there always will be).
I am proud and honoured to be working with these guys on such a exciting product. If you’re interested in learning a language sign up and let me know what you think: @whebdesign
