It seems that I keep refining my interface design process for each new project that I work on.

In this article I’d like to share with you my process of designing a user interface from sketch through to the implemented design for Apricado Music.

Apricado is a service for independent musicians to sell their music online as a digital download.

Step 1 – Start with a sketch.

Reasons to start with a sketch:

• A sketchbook is a little more portable than a macbook and doesn’t run out of batteries.
• It’s perfect for getting ideas down, quickly.
• You can do 10 versions on paper, scrap (recycle) 9 of them and not feel that you just waisted a bunch of time.

Step 2 – Wireframes & Copywriting

By “wireframes”, I mean using a tool such as OmniGraffle or Visio (but really, go with OmniGraffle) to be able to rapidly set up chunks of information on the screen. The idea is to not worry about design details too much but to worry more about the flow of the screen. Position on the screen is important, aesthetics are not. Words and copywriting are crucial for me at this point but some may argue that even this is too much detail.

The process of moving ideas from sketch into wireframes gets my head into a different space. I love this phase because you start to get a glimpse of where the interface is going by using words and layout together to define the user experience.

Step 3 – Design Mockup

When you get into “design mode”, it’s nice to not have to worry about business logic or mocking up a design with Lorem ipsum text because all of that thinking has been done by the wireframing step. Now is the time to think about branding, color, gradients and rounded corners :)

Some feel that you should skip directly to HTML/CSS and sometimes you need to do that but I still love me a good Photoshop session from time to time. As long as you know what can and can’t be done in code and your inner designer can live with the web version not looking exactly like the mock-up version, you’ll do just great.

Step 4 – Ta-da!

It’s simple. Take your design, slice it up and glue it back together in HTML and CSS.

It’s really hard to mockup web-based text so this is where you get to bust out your sweet CSS skills on the text formatting front.

In each phase there is always room for improvement and this step is no exception. In the designs below you’ll notice certain last minute iterations that made all the difference.

The Apricado Signup Form

Sketch

Last year, I attended the Future of Web Apps in London and I spent a good few hours on my flight from Vancouver sketching out a user interface for a new project that would be later called “Apricado Music”. I had been thinking about this app for quite some time and now it was time to put pen to paper.

I really wanted to make setting up a store as easy as possible so that more indie musicians can start selling their music with little effort. I knew that this would be one of the biggest challenges so I started here.

The goal of the site is to get a musician’s music into a store so I decided to make this a priority in the signup process itself. After the song is uploaded – boom – it’s in the store and for sale. But what about all of the song information such as the song name and artist name? That would surely need to be included in the form. I started to wonder what is the least amount of information we needed to sign up a use.

Wireframe

As I mentioned before, I like to write all of the copy in my wireframes. This phase is all about information flow with little emphasis on design so this is the best time to think about words.

I also got thinking about how we can remove barriers for an artist to sign up. We know that iTunes and other music software use metadata to store things like artist name, album and song name so why not just pull that information out of an uploaded song file and make our best guess at pre-configuring their store? This brings the signup form to two fields: an email address and a file picker.

Design Mockup

I handed a friend of mine the wireframe and asked him to get is creative on. This enabled him to be free of making business decisions while also trying to make it look good. Andy kicked it up about 20 notches and presented the following photoshop mockup. I love this step because this is when it starts to look like a real web-app.

You’ll also notice that along the way we dropped the “Jam” and just went with “Apricado”.

In HTML and CSS

With each step provides an opportunity to iterate and improve on the design. Can you compare this to the mockup and spot the differences?

Artist’s Store

The other key piece of this is the checkout process. We really want to minimize barriers for people to be able to support the indie artists they love. I didn’t want to have the fan sign up for an account or go through a lengthly checkout process. By using smart user interface design with some Ajax tricks, we could keep the entire checkout process to one or two pages maximum.

Sketch

This is the first attempt at the public facing store that an artist would have their songs up for sale on – a single page shopping cart with credit card form. Press the submit button and see a page where you can download your music.

Wireframe

In HTML & CSS

We could make some inferences on branding from the marketing and signup pages so we skipped the mockup step and moved directly to HTML.

Store Administration

Wireframe

Mockup

In HTML & CSS

There’s Always Something

I’m interested in the process of making things better and the journey for Apricado is just beginning. It will be interesting to look back at these images in the coming years to see where Apricado got its start.

In addition to future design iterations there will also be plenty of business decisions that might make some of these early designs moot and that is totally ok. We’ll take it step by step and respond as appropriate as required to keep it looking and working great.

Thanks for following along.