Tagged: Design

Software Designers, Let’s be more playful!

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:

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.

Here’s one of my favorite recent examples of playfulness, Google Drive’s feature for simultaneous massive editing. It uses cute icons and names to identify people, like Anonymous Chupacabra:

Playfulness in Action

Aren’t those icons just a joy? Doesn’t that name make you laugh?

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
  1. 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.

New Design for Rap to Beats

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:

This is the new home page for the redesigned Rap to Beats

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:

This is the completely redesigned studio page for Rap to Beats, my iPhone App

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:

The new Rap to Beats Icon, v 1.1

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.

Cheers!