Lessons from my first 24h design challenge: Spotify for Windows

The challenge

Designing Spotify for Windows Store in 24 hours? - Why not. Those were my thoughts exactly yesterday afternoon where I spontaneously thought 'why not have a 24 hour app design challenge'.
Now 18 hours later (sleept for 8 hours) I realized that I've completely failed the challenge. 
I knew from the beginning that I couldn't design the entire app so my goal was some of the main screens. 
I wanted to push my self. Push the limits. See how far I could get and tweet about it as I progressed.
What did I actually create during the challenge? Why did I fail? What did I learn? That's what this post is all about.
This blogpost contains the result of 10 hours of designing. A dive into the process I used during the challenge and what I should have done instead. Finally an explanation of the dilemma I faced which ultimately led me to failure. But first.. The final result.

TL;DR: Designing an app in 24 hours is insane. If you want to do it make sure you start by sketching A LOT before you go into high fidelity designing.

 

The final result

Ultimately I failed because I realized I was porting the desktop version rather than creating a profound and beautiful experience in a Windows store environment. Porting a desktop application was never my intention and that led me to conclude that I failed the challenge.
This is the result of 10 hours of work.

Core design

Inspired by design principles for Windows 10 - or atleast what it looks like we'll see when the time comes - the design uses side panels along with vertical scroll. The player is visible at all times along with what comes next

 

Artist overview

For spotify users this should hopefully feel completely familiar. The truth is that the spotify design time has great job on showing a lot of content while keeping it simple. I tried to mimic the same look at feel.

 

Artist overview

A split content view with a bio text. The text and images is split into the content panel to limit the line length. The short line length along with the increased line spacing improves the readability. The ideal line length for readability is no longer than 50 to 60 characters . (E. Ruder)

 

Design challenge timeline in pictures

0 hours

1 hour

2 hours

2 hours

3 hours

4 hours

5 hours

6 hours

8 hours

 

The process

As a developer or designer you sometimes find yourself getting insanely excited about an idea or a concept. So excited that you can't wait to get started and you have to sit down and get started it right away. It's those excited moments time flies and before you know it hours has passed. 
I simply couldn't wait and I dug right into the challenge.
Here's a break down of how I spend my time. Can you spot the errors right away?:

  1. Create a single initial sketch using my surface pro 3 and Photoshop (15 minutes)
  2. Gather Spotify resources (45 minutes)
    1. Cover images
    2. Figure out which font spotify uses (Proxima Nova)
    3. Find existing Spotify icons
    4. Get spotify icon and symbol font from website
  3. Create moodboard with inspiration resources, great ideas and concept designs from my personal stash, behance and dribbble (30 minutes)
  4. Launch Photoshop and design screens (8,5 hours)
  5. Realized that I've failed due to breaking my own rules regarding creating great design. The design I was creating only would be B rated design - never a A+ design

My biggest mistake was that I focused on getting features done rather than thinking how I could do them right before I actually created them - the builder's dilemma. I neglected sketching and brainstorming and just started making pretty pictures in Photoshop. The fact that I only spend 15 minutes sketching is a clear indicator of trouble. It should have been around 2 hours. Going into Photoshop without any sketches means that I design what just comes to my mind which maybe isn't the best idea. It definately wasn't in this case.. Because I could look at the desktop and ended up unconsciously designing what I saw right there. Going down such path would give me the exact same experience as what the spotify team already have created. I simply didn't have a plan and just builded what seemed natural - what I already knew from the desktop.

 

The process as it should have been

If I could go back and redo do things I would invest way more time in thinking about how I wanted to it be. Which experience did I want to give to the users and how could it expressed. Focus on brainstorming and playing around with ideas rather than just shipping "something". If I could change the process here's a breakdown of it should been:

  1. Create moodboard with inspiration resources, great ideas and concept designs from my personal
  2. Sketching ideas (2 hours atleast)
    1. Create a single initial 5-10 sketches using my surface pro 3 of the mainpage
    2. Throw atleast half of the sketches away
    3. Create 3 new based on the ones you kept
    4. Draw a final sketch
  3. Gather resources
  4. Create a rough black / white wireframe (optional)
  5. Launch Photoshop and design high fidelity screens
  6. Publish something truly awesome

With UI design it's extremely important to sketch a lot before you dig into designing in programs such as Photoshop if you want to create something really really good. Designing in Photoshop will make it pretty and good looking but for prototyping it simply takes way too long. Pen and paper or pen input for drawing on a PC is just faster. When sketching esthetics doesn't matter. It's all a matter of getting the ideas out there and finding the very best of them. So sketch sketch sketch!

But be warned.. Even sketching doesn't make your ideas fool proof! I found myself sketching and drawing out ideas in Photoshop 4 times before finding the right design the fifth time when I was designing last years Microsoft build conference app.

Never be afraid going back to the drawing board if you're not completely happy about what you're working on. 

Summary

In this challenge I started building before I thought about what I was building and why. That led me to the builder's dilemma. Next time I've spend more time thinking about why I'm building, for who and how I'll build it before I dig into the final designing.
Overall designing an app in 24 hours is an insane task and you'll most like never end up with the ideal result such a short time. Designing apps takes weeks but doing what you can in 24 hour is a great and fun challenge that I'll hope I can do more offen. Next time I definately plan on challenging myself with spotify again. 

I hope you've learned something from this. I definately have. 
Happy New Year!
Deani

Please, if you have any comments, ideas or thoughts let me know in the comments below the post...


The builder's dilemma explained

Imagine if you're retiring and you were to build a magnificent and extraordinary house with all your life savings. A truly beauty near the water with a great view.
What would happen if you just got all excited and started putting up walls, windows ect... After months of work you call the best architects in town and say:
"Hey! I've built this amazing house. It got all the nice things that I want but it looks really really bad. Can you please make it the most beautiful house in world? One that would leave both my friends and neighbors  in awe." 

No respectful architect would ever take on such task. They would tell you to tear down the house and do it the right way. Even if the architect agreed to help and you had all the luck in the world (trust me you would need it) the house would most likely end up as mediocre. It would never be a true well-thoughtout beauty with a unique and extraordinary experience.
For the rest of your life you'd regret not calling the architects first - and then start building once you had the drawings ready.