This case study was written by Stephen Ou, co-founder of the great, new, distraction-free WordPress publishing plugin, Artsy Editor.
Last month, Adii asked for volunteers to share their tips and tricks to the WooCommunity. I happened to be working on the marketing site of Artsy Editor. I think it will be an absolutely great opportunity to actually write about my process and share some of the things I learned along the way.
I am going to write about creating a product marketing site using WooThemes’ Simplicity, and how I took advantage of the turbo charged WooFramework to make the site super flexible. I hope you can learn something from it and build your marketing site using WooFramework!
Background & Goals
What is Artsy Editor?
Artsy Editor is a WordPress editor that helps you write more comfortably. Basically we minimize the usual hassle in WP’s editor (such as formatting, adding links, uploading & resizing images) so you can focus on writing.
We just launched this Monday and have a little giveaway for you guys. (See the bottom of this post.)
What are the goals of the website?
Just like any other product marketing site, the #1 goal is to convert as many visitors into customers as possible. To accomplish this, the site requires several important components:
- A clean, refreshing design that represents Artsy Editor’s style
- Provides crystal-clear information to visitors
- Demonstrates visual/interactive pieces of the plugin (screenshot, video, demo)
Process
Woo or not Woo?
I thought about building a custom website myself. But considering the time I have to focus on building the actual product, using with a WordPress theme is a no-brainer for me.
I’ve been a long-time WooThemes customer. Their theme quality has been well-known in WordPress community. And WooFramework, the engine that provides power to all the themes, has been the most flexible WordPress framework I’ve ever worked with. There aren’t any better options for me besides WooThemes.
What theme do I choose?
This is a tough choice, simply because WooThemes provides some many great themes that are suitable for a product site. I’ve looked at Apz, Biznizz, Delegate, Inspire, Optimize, and Simplicity. I eventually settled on Simplicity for the following 3 reasons:
- The amount of visuals on homepage. As I mentioned before, visuals of the product are crucial. Given how much space (full-width sliders, portfolio items) I can present screenshots of Artsy Editor, Simplicity is on the top of my list.
- The type of modules available on homepage. Mini-features, portfolio and testimonial modules are available. Those are perfect for any product sites. You can even use portfolio for a feature tour or some customer stories.
- The overall design. Well, the design just feels *right*.
Setting Up the Slider
Now I’ve chosen the theme, it’s time to build the site. The first thing I want to talk about is how I customized the slider.
Because the only difference between two slides is the headline and the screenshot, instead of entering the same content 5 times in WP admin, I decided to customize the slider template (includes/featured.php) a little bit.
I plugged in the title directly in h2′s and used the increment count to get the correct image source.
Setting Up Testimonials
I made 2 modifications to maximize the effects of our testimonials.
- Show multiple testimonials together. Instead of fading through one at a time, I wanted to show multiple testimonials at the same time to build up credibility. All I had to do was disable the innerfade script in theme-js.php and added some custom CSS.
- Use author’s Twitter profile image instead of standard quote icon, mainly to add visual appeals. In every testimonial post, I typed in author’s Twitter username as the tile, so I can utilize it in the template to produce its correspoding image tag.
Setting up the Pricing Area
This was the part where I put in the most work because there wasn’t a specific modules designed for it. But don’t worry, this is where custom templates and template parts come into play.
I hand-coded the HTML and stored it in includes/pricing.php as a template part. Then in index.php, I could simply call get_template_part(‘includes/pricing’); to include the pricing content.
If anyone is interested in the CSS style of these 3 pricing columns, you can take a look here.
Setting up the Call-to-Action
I personally think all buttons that come with WooFramework’s Shortcodes functionality are the ultimate time-savers. All buttons you see on our site were created using one line of shortcode. They come with beautiful pre-defined style at a variety of colors, sizes, and icons. I can guarantee it would take me 2+ hours to make them myself, probably less attractive.
Results
It’s still early to draw any conclusive data on whether the site is effective on selling the product. But given the positive feedback I’ve received from people, I am sure it will make a positive impact on Artsy Editor.
A Little Giveaway for WooCommunity
Since Artsy Editor is relevant tool for you designers and developers who built WordPress websites for clients, we have partnered with Artsy Editor to give away 10 developer licenses (normally worth $199) for free. Use the PunchTab widget below to enter the competition. 
38 Responses to “Case Study: Building a Product Site Using WooFramework”
Hmm… the PunchTab thingy says it’s over, yet the post just came out today.
Well, in case it counts, here’s my comment! I’d love to give it a shot.
I just tried the PunchTab (11:00AM CST GMT-6) and it says the contest is over?
Anyway, It looks really cool. Does it run on a WP network install (WPMU)?
Just updated that contest!
Yup – it works now and I “Like it”
Thx!
We didn’t do anything specific for WPMU. So I think it will work as long as you have license code for each site. But we will definitely work on some optimization for WPMU when the launch craziness is over.
Great “peek behind the curtain”. Thanks for sharing!
ArtsyEditor will easily encourage writing more posts.
It reduces the clutter and confusion created by the default WordPress editor (especially with regard to inserting images into a post).
Thanks Rob, definitely feel encouraged from comments like this.
Artsy Editor will definitely help me write more!
Its a nice friendly interface with big buttons – important feature for hip iPad users
Artsy Editor – accelerates the process for designing CMS websites with Worpdress.
Better copy, better functionality, better design.
It will definitely help me write more – effectively!
Well, I hope so ..
Pretty sure Artsy Editor will make my workflow more efficient. Looks great!
Less distractions while writing? Of course it will help me write more!
Looks interesting – would like to try it out!
cleaner layouts always help with writing and this would help for sure. I’m setting up a blog soon and this come in handy for sure.
I’m interested to see how my clients would use the product. I feel that something like this could make training many people that have never used an interface for writing outside of word much easier.
I hope
I don’t know if it will make me write more, but I think it might improve the writing experience.
I’d love to try this out and see of if it could help clients adopt wordpress more easily.
Write more? I’m not sure. It will definitely be a helpful tool when I begin writing long posts, though.
Very nice option for distraction free writing – I usually use WriteRoom and this may replace that!
To answer the question of whether it would help me write more, I have no idea, lol. I tried using the demo but found it kind of confusing (I didn’t realize the message that popped up at first was actually the editing window). Also, and maybe this is just due to being a demo, but in my latest version of Firefox for Windows, on a widescreen laptop, the button for adding images is pushed to the right too far and I can’t see it, not even with scrolling or zooming out to the point I can’t read the text anymore. All I can see is the beginning of a button that says “….Br” ?
Yeah, it is a known bug which we are fixing right now.
The button is “Browse” which lets you choose a file to upload.
Yes, I know less distractions will help me write more and more often, and it will help my clients, too. Thanks!
This is awesome. Artsy Editor is gonna help our blogging productivity. Also, it’d be handy for our clients who are totally new to WordPress. They can edit and style their posts/images much easier.
Q Do you think Artsy Editor will help you write more?
A Not really, but it may be a great tool for my clients. Wait and see.
So do these work with Woocodex ie shortcodes? and or is their any plan too?
Hi Muzza,
Artsy Editor essentially is an overlay on top of the normal posting screen. So you can simply click the X button on top left to get to what you normally need (Shortcode wizard, custom settings, categories, tags, etc.)
Not sure if it will help me write more, but possibly more efficiently.
I’m also not sure it would help me write more, but I do think it would help streamline the writing process for my clients.
artsy editor looks a lot like some of the minimalist editors out there designed to help writers write.
Do you think Artsy Editor will help you write more?
Of course! The WP interface is great but the writing in a periscope window hinders free typing. Can’t wait to try it out and show my clients too!
Yeah, I’ve been looking for plug-in like this!
Do you think Artsy Editor will help you write more?
I know I need a way to help me focus more on my writing. sometimes trying to write within WordPress is very distracting. After looking at how Artsy Editor works and looking at how simple it is I can def see myself writing better, more efficient, and creatively without my mind getting distracted by everything else that is within the WordPress Admin area.
Looks interesting… got to take it for a test run… I have been looking for a plugin like this.
This is great, thanks for sharing
Artsy looks great and great use of the Woo Framework too.
Is the punch tab giveaway over already…it says contest over.