How ecommerce site Firebox made the move to responsive design

Gifts and gadgets e-tailer Firebox recently underwent a major site redesign as it joined the steady trickle of ecommerce players that have adopted responsive design.

Responsive design is generally seen as the best way of delivering a consistent user experience as the size and usability of internet enabled devices becomes ever more diverse, yet it's notable that smaller retailers have been much quicker to embrace the technology than big name brands.

So to find out more about why Firebox went responsive and the processes involved in making the move, I spoke to creative director Aaron Buckley...

1. Why did you decide to redesign the site? What were the main problems with the old version?

We loved our old site but it had become a little stagnant; it wasn't current or responsive. We really wanted to show more activity and movement on the homepage. 

With hundreds of products on the site it's easy to just focus on the new stuff and not highlight what customers are actually talking about and buying. 

The new homepage showcases new products, seasonal features, charting products (our Top 50), customer reviews and a live feed of what customers are buying and voting up.

We've also rebranded so we wanted the site to be a different beast. We want to show how established we are at finding the quirkiest, coolest products you wouldn't normally find or even expect to exist. 

2. What attracted you to responsive design ahead of a separate mobile site?

Websites need to work on multiple devices; we wanted to make sure users have the same great experience whatever they're browsing on. 

It's time intensive building two separate sites and also unnecessary – it's not what our customers want. 

3. I know its early days, but have you noticed any major differences in how people are interacting with the site, and specifically mobile visitors?

We've definitely noticed a sharp increase in mobile traffic. People are now browsing for longer on their mobile devices, and newsletter and social traffic is also converting better than previously from mobile devices. 

The homepage is much more engaging and is constantly changing which is an incentive for people to come back and check it out. 

We're more focused on our load times and touch points to make sure our customers can easily browse and buy. 

4. How long did it take to build the site, including the initial design phase?

We turned it around pretty fast. We started chatting about it in the middle of January, then wire framed it for a week before our tech team started working on it at the beginning of February. It was then launched on 13th March. 

This is a short amount of time when you take into account day-to-day design and tech work needed to keep the car running, but our passion and enthusiasm saw us through. It was a lot of fun to work on. 

5. How much did the redesign cost and did it come in on budget? Were there any unexpected costs?

The takeaway pizza we bought for late night work sessions ended up costing way more than we thought.

6. Did you work with any agencies? If not, where did you recruit your in-house team from and how many people worked on it?

It was all done in-house. We have a design team of four and three web developers from various backgrounds. 

But I can't say we're even nearly finished yet. If you saw our Basecamp you'd see a never-ending list of improvements we're working on. 

Customers are giving us feedback every day, each giving us ideas for improvement.

7. Which specific tools did you use find most useful during the design process (e.g. for wire framing, user testing)?

Definitely Basecamp. There's nothing more satisfying then ticking off your list of assigned actions and seeing the progress we were making. 

For the design process we went old school and wire framed with a Sharpie and some graph paper. 

                      

We'd done a lot of analytics work and our own in-house testing to see what was currently working and what we could improve on. We then mocked up our designs and style sheet in Photoshop. 

I always find the most helpful process is to concentrate on the style sheet as much as possible, otherwise when more than one techy is working on the project you tend to see slightly different sized buttons and header styles creeping in. No offence to our techies!

8. Which part of the site proved to be the biggest challenge in the move to responsive design (e.g. product pages, checkout)? 

The product pages were pretty tricky to make responsive but the hardest part has been our checkout. 

We've had to tackle the legacy code and the forms in general have been time consuming as there are so many individual elements that need to work together in every view.

9. Which part of the site are you most proud of? 

I'd have to go for the homepage; it's a merger - almost collaboration - between us and the customer. 

I love seeing what people are engaging with on the Live Feed, it's like looking into someone else's trolley in the supermarket.