Teraflex.biz revamp

The relationship with Teraflex started 3 years ago by designing and developing their first online shop on Magento coupled with WordPress. It was a success for both since their “online business steadily increased” over the years and the community got a place to participate with their feedback and content.

That was in 2008 and we just started with Magento who just turned to version 1.0, adapting to the platform, gathering experience and consuming large amounts of coffee. Before than, they had a simple static website.

Two years passed and the website changed many things in their business:

• Their website is used as a main catalog and a knowledge source for their products
• Magento itself got better and gained real momentum in e-commerce
• Teraflex gaines priceless information based on real website performance data

Those were all good signs telling us that we’re on the right track with choosing the platform for the client and our business. You can see the site at: http://www.teraflex.biz/

Why change if it works?

Initial Magento & WordPress integration worked great, looked great and did function great from a frontend perspective. However, no matter how it can seam good, those are two different system. We believe it would be better to move everything to Magento and make the system more scalable and more easy to maintain.

If WordPress was used only for blogging in previous version, we would have easy work. But it was used for news sections, image galleries, dealer manager and various of contact forms. The challenge was to improve Magento with a lot of features that were outside the box. Željko was always saying that we love challenges and especially when you need to make something better because, you know, you can always make it worse.

Let the revamp begin

Before the actual project started we defined the most important aspects of the new teraflex.biz and the starting points were:

• Lightweight and attractive visual design
• Seamless “Community” integration
• Downsize and enhance features

Site’s purpose remained the same:

• Brand awareness
• Connection with community
• Online sales

With all that input and clear direction we could start with the process of creating the site. First we created  the wireframes then the actual design and at last the development of the idea in a fully functional store.

I’ll just point out a few interesting things about each of the store creation phases and illustrate with actual images. Here is how the site looked like.

The Wire-framing

Meeting all of these points meant that extensive research had to be done in wire-framing the site. This part played a crucial role since the actual design and later development is based on it.

As usual design process started with our desiger, Renato Carvalho wire-framing the Home page. Here we would have all the global elements like header, footer and overall page grid defined and most importantly the menu system.

After several variations of the home page wire-frame we had an approved finished page in it’s raw, colorless and static state, like this:

What was accomplished here is a balance between the “Shop” and “Community” section of the site.  The slider below the menu for both shop and community related content, product slider and community section, all on one page. Later on we removed excess “call to action” buttons making the page easily readable and clutter free.

This main idea was applied on wire-frames of major areas like the product page, catalog page, community:

If you compare the actual designs next in the article, you’ll see some adjustments were made during the design process to make the best layout.

The Design

Once we had wire-frames ready and settled in the main theme for the site it was up to Renato to make the design “lightweight and attractive” following the first starting point.

He had to design site to be usable for the Jeep loving community and shopping experience, balancing those two main aspects constantly through the entire site.

Definitely not an easy task.

Home Page:

This was the final design presented to the client, with modifications to the menu layout and news display being simplified. Also the main menu behavior was applied to all elements  in form of the stylized drop-down menus:

Product Page:

Description, specifications of the product and the product image was placed to the right half of the page leaving the left half with a product name, short description, pricing and the only “Call to action” button on the page the “Buy now” button. This was in my opinion one of the best moves Tomislav and Renato made on teraflex.biz for showing only what’s needed and offering options to show more when asked for. Good page, sit 🙂

Here’ the final design:

You’ll notice, again, that there are some differences between the “live” site and this design. This was yet another intervention made with “take out unused, emphasize what’s really used” practice. Not a very catchy name but in reality it gets the job done, since we had the chance to remove the unused “Reviews” and highlight the SKU for people ordering by phone.

Development phase

By the time Renato finished the “Home page” our development team, meaning Ivan Lozancic, Ivica Tadic and me (Zeljko Prsa) started with the development of the overall look and feel along with the home page development.

Now, usually the development phase has its burdens applying the design. However, we already did most of the work with wire-framing and final design, so we removed all unpredictable issues that could seriously slow down development. Success was in engagement of developers at early wire-framing and later design process. Why was it important? Since the creative process was done by the book, it went smoothly which saved time and money.

We made a decision to start fresh with a new theme to be applied onto the existing site preserving all data about orders, products etc. This way we had a clean slate to work from.

Custom developed or adapted extensions:

• Seamless news publishing and Blog extension customization
• Gallery extension integration and customization
• Dealer plugin – brainchild of Branko
• Global “News”, “Product” and “Customer Rig” search
• Tabbed Contact Us page – fun and effective 🙂

Those were main custom features of the site visible on the front-end. My favorite is the search feature Ivica developed, making it easier to find what you’re looking for.

Besides making the site looking and behaving good in “Grade A” browsers, one challenge was to make this site ready for the future (IE9) and present (Every other modern browser except IE) by using latest technology available like CSS3PIE and CSS3 selectors. This allowed us to make the site future and present proof, and as a byproduct it uses a less server resources. Even the menu is made with pure CSS avoiding excessive JavaScript loading. Hooray!

What does the Google Analytics say?

All of this joint effort would be useless if we didn’t have any data about how the site works in reality. Will we get more page views, how much will visitors stay on the site, will the Jeep loving community embrace the changes and so on?

Although the revamped site is still too fresh for comparison we’re happy to say that by looking at the Google Analytics we have the following:

(Compared to the month before the new site launch)

• Pageviews are up for 14%
• Bounce rate dropped for 10%
• Definite increase in product page views

And this is the date just for the first few weeks the new site has been up. It will take some more time for a worthwhile comparison and e-commerce analytics.

Conclusion

We took a working site/online store that we built 3 years ago and made a revamp. It took a lot of effort from both sides to accomplish the goals we set but in the end we can conclude that both the client and us are very pleased with the result.

Looking back at the actual process while writing this post made me realize that even though these complete projects are time and resources challenging, they are most worth while for everyone involved. We get to consult the client on every aspect of the store creation process making the best of what we have for the client while learning about their business and bringing it back into the “Store creation” process.

Check the interview with Vinny Pratt, Website manager from Teraflex side about his experience with Magento and us.