Tagged: Design

I want to extend the idea of playfulness as an underutilized concept in user experience and product design.

Let’s take a second to think back to the days when we were all just getting introduced to the world of computers, Windows 95:

Doesn’t that just look – not fun? Not playful?

I use Windows 95 as an archetype for the non-playful. Analyzing it, we can identify several elements that make this product particularly non-playful:

Functionally oriented – the best software is going to do what you want it to, but it appears that Windows 95 developers were primarily concerned with what the software does not how it does, let alone how beautifully or how playfully it does so

Boxy design – the design is regimented and recalls notions of standardization, functional orientation, and even autocracy: everything is laid out in ordered, neat boxes

Straightforward – features and applications are included when they have a strict utilitarian purpose for the user, rarely as flourishes for the user to view

On the other hand, some software is simply a delight to use. Games can be addicting in this way, and hence we use the term playful.

What makes this software so playful? By analyzing the attributes, we can hopefully begin to incorporate playfulness in our software as well:

Experience oriented – there may not have been a user specification to make the software fun or have memorable identifiers for distinct anonymous contributors, but instead of stick with ‘Anonymous A, Anonymous B,…’ or ‘User 1, User 2,…’ the team behind drive thought about the experience of having funny, identifiable anonymous contributors

Modern design – the look of the images and the use of the latest design concepts, including flat design and simple conceptual design (see iOS 7, twitter redesign), makes the feature very appealing to the eye

Funny – both the names and images are done with an attention to humor; one does not expect to think about chupacabras or axolotls after 12, but their appearance out of context makes them quite funny

So, I encourage all of us to be experience oriented, use modern design, and be funny. In our mockups, wireframes, and flows, we can think a little bit less about the functional requirements and more about the playful experience, taking after the definition of play itself:

verb

engage in activity for enjoyment and recreation rather than a serious or practical purpose.

Doing so, we can improve all of our software.

Note: this post was originally published to Medium and is included here for visitors of my personal website.

We have just submitted to Apple a major upgrade: a completely new interface (along with a few little changes like better offline functionality). I wanted to use this space to walk through some of the new design features that should go live as soon as Apple accepts them.

We went through several iterations before reaching this final design, essentially a dark denim texture theme. The first iteration of our theme was intended to be a leathery texture with cloth “sewed on.” But that did not turn out so well. The second iteration of our theme was intended to be a dark, futuristic take on a music player. But that also did not turn out so well. After a few more iterations, changing the colors and textures, we ultimately decided this interface was the best of the bunch we created:

We could see a few iterations of making this better, perhaps changing the colors of the button and title patches and fraying the edges further, but we will try to A/B test those landing pages now that the App is available in the App Store.

An interesting roadblock we had throughout the design was what background texture to use. After consulting various design resources, we were ultimately able to decide on the final texture, the dark denim, by looking at how the second most visited page in the app would look:

We really liked the contrasting colors on this page. Once we had the home and studio pages complete, the final large design hurdle was the icon. There is no shortage of advice on how to make a great icon, and we tended to agree with most of it. So, ultimately, we decided to make a no-text image that fits with our overall theme and conveys the functionality of the app. The stitching from the other pages is there, and then we have a very low opacity silhoutte of a dread-locked female singing on a microphone and pointing to the sky:

This iteration of the Rap To Beats design was a great workout for my Photoshop skills, and I look forward to further development as we get feedback from YOU! Indeed, any comments at all are appreciated.