25 Aug 08-09
Building The New Shopify Website
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.
Step 4:
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.
Conclusion:
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.
Comments
August 25, 2009 05:23PM EDT
I like the site a lot. I think its weird to go to Shopify and see it different. It looks like a lot of sites I have seen yet like nothing.
Love it guys. Oh and Mark, great name!
August 25, 2009 05:23PM EDT
Wow, well done guys, big improvement. Having gone through the trauma of finally re-designig our website this year I sympathise as its not an easy process but I reckon you’ve nailed it!
August 25, 2009 05:23PM EDT
Thanks Mark (your website also looks very sharp) and thank you Damien (loving “hand drawn” icons on your new redesign)
August 25, 2009 05:23PM EDT
Erik,
We have been developing our brochure page long before bigcommerce launched and we do have proof to back it up.
Looking at bigcommerce.com I don’t think there is much resemblance. The banner looks similar but the rest of both sites – especially the content – couldn’t be more different. And we have also been using a very similar banner like our current one two years ago.
August 25, 2009 05:23PM EDT
Did you just go to bigcommerce.com and rip the design from there? It’s awfully similar and they were around well before you launched your “new design”.
I’d be expecting a cease and decist notice from them any day now. Interspire doesn’t mess around.
August 25, 2009 05:23PM EDT
Thanks for the article, it was very interesting to read and see the thought process behind the design. I think the site looks very clear and clean. Is Shopify related to Spotify at all?
August 25, 2009 05:23PM EDT
What CMS did you use? Do you still use Mephisto?
August 25, 2009 05:23PM EDT
Thanks Mike! No there isn’t any relation – just a very similar sounding name :)
August 25, 2009 05:23PM EDT
@Bryan: We are using Radiant CMS. Our blog runs on Mephisto though.
@Tom: Thanks Tom! We are working on it.
August 25, 2009 05:23PM EDT
The site looks nothing like bigcommerce. Cease and Desist..uh no. FYI- There are some errors with Shopify News, Twitter, and Contact Us titles… They are jumping around a little. Still the best part of Shopify is how easy it is to create custom and how easy the backend is for non-tech savvy clients. Hope the new project works with even quicker customization features. (Crossing fingers.)
June 03, 2011 12:27PM EDT
I like the new site – its interesting to see the processes you undertook to create it – a lot of work went into it!
November 25, 2011 09:16AM EST
crotoulsomo, http://www.moslounge.com/ – sildenafil for sale It is bad enough that you have to go through ED and you don?t need them wondering what is wrong with the relationship. http://www.moslounge.com/ – generic viagra