Indie Aisle is a project I’ve been working on and off for a couple of years now. This past year however, I really got going with it, spending most of my available time outside of client work. Since the beginning the visual design for it has gone through quite a few iterations that I thought I would share some of here and talk a little about what I’ve learned during the process.

These are designs in their early stages from about a year ago (click for larger versions):

Compared to prototypes that I’m coding today of basically the same areas of the site:

While the overall style looks similar, the key difference is in the information architecture which has evolved as I more clearly defined the core goals of the app. Defining these goals and incorporating them into the design was one of the most important aspects of the project that took me a while to nail down and is probably the main reason why it’s taken over a year!

Once I had the goals, I realized that for the design to work, I had to understand every aspect of every component I included in each layout. This ended up leading to an extensive amount of research and notes that went beyond the visual design. From making sure I understood the audience I was targeting to how the backend of the app would be developed.

Only when I worked all this out did I feel like I was ready to put together a solid design that worked. At this point I used Ryan Singer’s patterns approach for all the components. The rest was details and refining the design and putting together HTML prototypes.

While the overall process has taken longer than I would have liked going into it, I’ve learned a lot and have even changed the way I do client work now. There is still more to be done getting the backend functionality developed, but having come this far I already have an idea of how to take that on as well which I’ll talk about in a future post.