Part 3 of the design process

Putting initial designs to paper

From initial sketches to first prototypes ready for testing

Learn more

My simplified design process

Sketch out ideas with pen and paper

Turn into crude wireframes via any way possible

Polish UI with Sketch or Photoshop

Create a prototype to test, in this case HTML,CSS and JS

Sketch out initial ideas

Scattered collection of initial thoughts

The design process isn't as linear as described above but it is similar, it actually begins as soon as the task is set. Initial ideas are jotted and sketched down and either rejected or reinforced by the aforementioned research.

Discovery shouldn't finish on the artists page.

Video is king on the web, we should utilise it.

Make way! Phones are only getting bigger. Why limit ourselves to tiny boxes.

Draw out crude wire-frames

Connecting the dots

To ensure nothing has been missed from the initial design ideas all screens of the flow are sketched out to give a perspective of the userflow and the micro UI.

Shuffle artists button takes the suer to a random but related artist to keep the discovery happening.

Pinned area at header allows artists and brands highlight what matters to them most.

Use the artist profile page as the music player. Play, puase, skip and shuffle all from the header.

Polish the UI

Thinking about component design early on

Testing designs that are not high fidelity can sometimes taint the reliability of the test. Therefore I dive into Sketch or Photoshop early on to mock up more polished and beleivable wireframes. With a well worn styleguide, this process is often a lot quicker than creating wireframes.

The organised chaos for the project in Sketch

Screenshot of a WIP artboard in Sketch

Close up of the feedcard symbol

Create a working prototype

Transforming the polished flats into a believable connected system

Creating a working prototype is the best way to test design ideas on real users, with tools such as invision and Marvel it can easily done in minutes. In this case I decided to use HTML/CSS as to incorperate video and audio, key to the ideas success.

Coding in sublime

Hosting and deploying through netlify

Bug fixing and optimizing for all screen sizes

Check out the HTML prototype

Feedback from team

Whilst designs are progressing I ensure to get constant feedback from my team members (in this case I used my friends again)

"Love overlaying the video with the feed"

Nikki Anderton, Shazam user

"Quite hard to read the top bit"

Kaspar Iskjær, Shazam user

"Shuffle button is cool"

Drew Jackson, Shazam user

Up next

Part 4 of the design process: Test

After every step of design it is time to test in the real world, on users