During the past month Daniel and I (Mark) have been tinkering away at the new Shopify website. We thought it would be neat to share our design process with you.
Step 1: Evaluate the current website
We spent a day evaluating the current website, asking questions like “What do we want our clients to know about Shopify?”, “Does this element need to be here?”, and “What would new users find confusing?”.
Step 2: Inspiration Pool & Mood Board
We first talked about the essential things: fixed vs. flexible layout, interactivity, colors, navigation and flow. Then we looked at other websites and evaluated what we liked and disliked. Throughout this process we created an inspiration pool and collected various snapshots of other websites LittleSnapper
Step 3: Mock it up
We made a list of essential page elements (testimonials, example stores) and began pumping out more than a dozen mockups (some really crazy and unorthodox, some more traditional) in Photoshop. The primary goal for the mockups was to receive as much feedback as possible about the structure of the content not the aesthetics, so earlier mockups lacked any significant detail or color.
Multiple people would be working on the website's code, so we looked into CSS frameworks to try and streamline the process. Blueprint and 960 were both excellent frameworks, but we didn't need all the features and the column/gutter width just didn't feel right to us. So we built our own grid system. You can download the .psd or generate your own.
Step 5: Launch
Using Google Analytics and Google Website Optimizer we are monitoring the effectiveness of the new website. We are also mocking up new homepage banners and other elements on the frontpage to test which perform best.
Looking back, our written content should have been finalized much earlier. This would have allowed the graphics to compliment the words more effectively.
We would love to hear any feedback on the new site in the comments. As for us, we have already started on our next project, but you will have to follow us on twitter to get a sneak peek.