Redesign Process: Taking Small Steps for a Better Website

Posted in Tips, Web Design4 years ago • Written by 19 Comments

This is experimental article, where you will see whole redesigning process behind the scenes and read different way of thinking. In this review you will be leaded through necessary steps needed to get successful redesign.

If responses and feedback will be positive, we will make this monthly or even weekly event analyzing also well known blog redesigns – showing pros and cons. I think real examples are the best way to show the point and teach something! Let’s start – we will be happy to hear your feedback! It will be exciting!

ReadyPhotoSite is a flash photo CMS created especially for photographers, painters, artists and people of art. The CMS is presented in 3 different packages that vary in functionality and a number of skins, so you can choose the design you like and then choose the website features.

We started working on this ReadyPhotoSite project on May 2009 together with Karen Myers who is presently the CEO of readyphotosite. But Karen is not only a partner, but also a good friend of mine so we were both into it.  By the time we started working on website design, the product (the CMS and the skins) was ready and our task was to launch a simple website as soon as possible, apply the changes and make the updates as we go. And so we did.

Starting with a simple website and the problems we faced


The website we have uploaded online consisted of the following main pages:

  • home page
  • products page
  • why buy
  • link to blog
  • contact page
  • links in the footer to Tutorials, TOS, Privacy, Tutorials and Hosting.

The home page had around 10 lines of text and a cool stylish intro in retro style in the middle – home page didn’t share almost no information about the product and thus was pretty useless. Besides it took around 30 seconds for the intro to load and we were loosing most of the people already in beginning process when they were visiting our home page.

Still the owners of the project insisted we should keep the intro as they spent a good amount of money on it and wanted to see it online no matter what.


As I have mentioned at the very beginning of the post, the ReadyPhotoSite websites are available in 3 packages:

  • basic,
  • advanced
  • ecommerce

Look above, there is the screenshot showing how this concept was presented on the website.

While the products page itself had the basic text info, the buttons in the header lead to almost identical pages of basic, advanced and ecommerce packages that had:

  • screenshots of design themes listed on them
  • the link to the preview
  • the buy button

All the pages had the list of the same theme’s screenshots which was obviously somewhat confusing for the website visitors as without visiting the features page they had no idea of the difference and they just saw that same designs.


The initial purchase process was even more complicated. The buy button next to the skin lead to a static html page with 2 options to choose from- “Host with ReadyPhotoSite” or “I already have hosting” and 2 separate links that took you further to the shopping cart page( the WHMCS shopping system allows creating only static product links). It was only later that we realized that the purchase process was a real nightmare with too many steps and no convenient option to choose other design or other package.

The other thing that we initially paid no special attention to was the skin preview page, that was simply opening the website in the new window and where we were loosing customers as well since there was no calls to action or some kind of info how to move forward.


The website required a serious work. In about 3 month after launch we were getting nice targeted traffic from search engines, photo forums and blogs, photo communities, template and CMS reviews websites, paid ads, social networks and our partners, but the website was not converting the traffic into sales. We had a tremendous bounce rate of about 50% and people were staying on the website for less than 30 seconds, getting lost and not sure what to order and how to order. So we have started on conversion rate optimization, creating a user friendly website step by step.

1) Moving the intro to the inside page.


The first step we made was the optimization of the website home page that was the main landing page and where we were loosing most of our clients because of the intro. We have replaced it with the large graphical collage explaining how to launch the website with ReadyPhotoSite CMS and huge buttons next to it: free trial, link to the admin area demo and the link to the page with the intro (requested by owners). Below we had a new keywords-rich text explaining the advantages of RPS and listing some of the main features.

2) Reworking the product pages.


The products pages and the ordering process was a real pain in the ass. We had 4 tasks to solve:

- reduce the number of steps before the purchase;
- give an easy option to get back to other products and packages;
- make the product structure understandable( the relation of skins and packages);
- inform the potential buyer about package features on the fly (so that they don’t go away from the purchase pages to the features page).

And here’s what we did:

  1. Removed the buttons (and the pages) to advanced/creative/ecommerce packages from the menu.
  2. Replaced the text on the products page with the list of skins screenshots and added buy and preview buttons.

Now the problem was how and where do we actually link the buy and preview buttons (as there are 3 different previews for every skin (for basic, creative and ecommerce packages) and 6 buy links (as every package can be purchased with hosting or without it)).

The new buy page have solved all the tasks. Before reading this articles further I suggest to open this page online so that you check in real how it works. Click on any buy or preview button on this page http://www.readyphotosite.com/products.php and you’ll be taken to the buy page.

  • we combined the preview page with the purchase page and now we keep the visitor focused on the purchase;
  • the buy or preview button from the products page automatically loads the preview of the ecommerce package of the chosen theme (since it’s most expensive and we’re interested in more people buying it);


- on the first step you can browse between different themes and the preview will load below (to ensure better theme browsing we have added “hide panel” option at the very top of the page);
- having chosen the theme you can now choose the package on the step 2. Next to every package there’s the price and the list of features included;


- finally on the step 3 you can choose whether to host with ReadyPhotoSite or not. You will also be shown the pricing and the hosting details.

With the options for the 3 steps loaded you can still change the settings on that same page. You can choose the other theme or the other package or change your mind about hosting. Finally the buy button will take you to the purchase page with all the options you have taken.

3) The need in new pages.


Making the analysis of the keywords people were using to find our websites in search engines from Google Analytics we have decided that it makes sense to create the keyword oriented pages giving the same time valuable information about the product. Some of the keywords included:

* Photography Website Design
* Family Website Design
* Personal Website Design
* Wedding Website Design
* Maternity Photo Website Design
* ReadyPhotoSite review

While creating the pages we have faced another problem. The main website navigation allowed 5 buttons only and the footer was already crowded with the sub pages and we simply had no place to add the pages. In the next 2 points below I’ll be explaining how we addressed this problem.

4) Creating new home page.

Having tested the new home page for several months time we were still not satisfied with the results. We needed to push more people to the products pages and use the place on the home page in more efficient manner. Though the picture was good for people, the home page itself could not be called a good landing page.

1) First of all we decided to decrease the size of the header area, as it was nice but not functional so we reduced it by 40% or so.


2) We then decided to decrease the height of the collage on the home by 50% to give more place to content and other stuff.


3) To catch the user attention with the products right on the home page we added the big screen of the featured theme linked to the buy page.
4) We added pretty huge buttons linking to the products page, admin area demo, free trial and the buy button for the featured theme. Having all this main options in the center of the page the website visitor don’t even have to click on the menu to go to the main pages, it’s very intuitive and user-friendly.
5) Following point 3 (the need of the new pages) we added the links to the new pages and the section for
testimonials thus giving the website visitors the information they were looking for directly from the home page.

5) Reworking the blog pages


Writing lots of articles about photography, photo website design and promotion as well as just some fun posts, we were getting really good traffic both from social networks and search engines to our blog. For the first 2 months we were just attracting people by interesting and useful tips trying to get the reputation. In the new few months we have taken the following steps to make this traffic result into the product purchase

1) Added the banner to the left column offering to exchange old photography website to the new one with 20% discount.
2) Added the big buttons linking to the features page and free trial.
3) Finally we have replaced all that we have with the banner rotating the screenshots of our products, big button with the “free 7 day” website trial on it and the full list of product features. It was only this last update that has helped us to drive traffic from blog to the website features and product pages.

6) Reworking the menu structure and adding new pages

Viewing the entrance and the exit points of the website pages we were noticing that our visitors were not finding answers to the questions they were looking for. It was then when we decided to create the product guide section of the website that would contain all the info needed to make a decision.


We have replaced the Why Buy page in the main menu with the product-guide and created the sub pages that now contain most of the website/product info in the structured manner. We have also created the new samples page showing how of our clients customized the default themes and illustrating the changes that can be made from the admin area.

In conclusion

We’ve made a long way studying visitors behavior before the website started looking like this http://www.readyphotosite.com. I have learned that there is always place for improvement and that we are just on the start, not on the finish. We have tried different font sizes, buttons, graphical presentations, motos and texts. We still want to try Google Website Optimizer, add Google Translate, feedback form and some other cool features to make the website even more user-friendly and intuitive. You have to act to be on board. Below are some figures from the stats showing how successful the changes we performed has been so far:
- After second home page update and restructuring of the purchase process the views of the products and buy pages has increased by 50%;
- Thanks to rotating product screens about 10% of the blog visitors now visit the product pages;
- Adding new information and keyword-rich pages increase traffic from the search engines by 30%;
- Adding product guide increased the number of free trials by 30% and the number of general product inquiries by 25%.
Unfortunately I can’t share all the details with you, but overall it was worth the efforts and we’ll keep on working!

14 Written ArticlesWebsite

Project manager and usability specialist. Interested in SEO and marketing, friendly and always ready to discuss new opportunities. Now working in amazing SEO Company named WebPromoExpert.net and you are welcome to follow me and WebPromoExpert on Twitter

19 Comments Best Comments First
  • Thomas Craig Consulting

    Friday, March 12th, 2010 12:12

    1

    Nice article Anastasia, definitely recommend giving Google Optimizer a try and check out the heat map overlay to see where users are clicking.

    0
  • ophir prusak

    Friday, March 12th, 2010 17:59

    8

    Nice article.

    If you want to *really* see what users are doing on your site, you should try a session recording tool like clicktale.

    It’s not free, but you’ll get feedback and data that google analytics or google website optimizer on their own will never be able to supply.

    - Ophir

    0
  • jeprie

    Friday, March 12th, 2010 17:22

    5

    the design looks very nice, really retro. but not the function. The first time i saw it i cant see anything. my eyes stuck on that big ready icon. i cant even read the menu text. i have to force myself to scroll down and see the rest.

    i think the design is great for an artwork, sold as print, or wallpaper. but not for a website. however, that’s my personal oppinion. your client decide what’s best for them.

    0
    • jeprie

      Saturday, March 13th, 2010 06:07

      15

      the new button, (view design, try demo, free, …) doesn’t fit well with the retro style. there’s texture everywhere and suddenly a clean glossy button?

      0
    • Anastasia

      Friday, March 12th, 2010 17:36

      7

      Thanks for the feedback, it used to be even more overwhelming. It might be a good idea to rework the design concept in more corporate clean style, in case we decide to make it, I’ll be making a report on the effect the redesign had

      0
      • Saad Bassi

        Friday, March 12th, 2010 22:53

        9

        Totally agreed with Jeprie Here

        0
  • Anastasia

    Friday, March 12th, 2010 12:54

    2

    Thanks Thomas, yes, they are definitely worth a try!

    0
  • Simon Day

    Friday, March 12th, 2010 14:48

    3

    It is so refreshing to see someone who understands usability and visitor journey paths. It sometimes feels like I’m all along out there when it comes to this.

    I agree with everything you’ve said but there is just one minor point to raise: noscript is the number one downloaded add-on for FireFox and with it running I don’t get to see the flash with the journey options. There needs to be a no-script version or preferably a CSS or image only version. This is not only for PC’s without flash but also for other devices like iPhone’s which won’t run any flash files by default.

    I believe that by adding a core function like this in flash file you are reducing sales by quite a percentage.

    Apart from that excellent work!

    0
    • Anastasia

      Friday, March 12th, 2010 15:03

      4

      I absolutely agree with you, there should always be a no-flash option.
      Thanks for taking time to write a great comment!

      0
  • Ahmed Elmasry

    Friday, March 12th, 2010 16:09

    10

    Very useful post, thanks for sharing

    0
  • Amberly | Web Designer

    Friday, March 12th, 2010 17:00

    11

    @ Thomas. I agree with you . Google Map overlay is the best tool for check the visitors interests. Very useful for optimizing our sites

    0
    • Anastasia

      Friday, March 12th, 2010 17:23

      6

      the only problem about it is if you have several same links on the page- for example products in the menu and banner in the text linked to products t it’ll show the same data for both as it tracks it based on the URL

      0
  • Emma

    Wednesday, March 17th, 2010 14:03

    18

    I use clicktail, it helps me know what is happening on my site and its heatmaps and videos show me i can increase my conversions

    0
  • InteractiveLogic

    Saturday, March 20th, 2010 01:06

    19

    good suggestions and food for thought. thanks!

    0
  • Duane

    Saturday, March 13th, 2010 00:05

    16

    Thanks for the insight.
    I also recommend that you check out the heat map – It can be a very useful tool.

    0
  • Murlu

    Saturday, March 13th, 2010 00:48

    12

    I really like the design and congrats on the improvements.

    The only thing that I don’t really like on the site is the text. So many different elements fit the design so well but then the blocks of text are very smushed.

    Besides that, I really like everything :)

    0
  • Terri Lockerridge

    Saturday, March 13th, 2010 04:05

    13

    What you have accomplished wit really only taking away a few unnecessary options to speed up the loading of the website is the greatest of the advantages you used. I am not really impatient, but I will only wait so long before I click the back button to my search page. You have many options to cover when your searching and I won’t wait very long, time is valuable to everyone, and this will help you greatly, in my opinion.

    I love the design and think you will continue to do well, as all the options load quickly, and you do not try to put so many options onto the page, that confusion on making a choice and remembering which one it was is not a risk here.

    There is only one thing I do not like and it is not in your website.. it is here in this article.. the popups when you mouse over the words is one thing I detest in any place in a site! I spend more time trying to get rid of the popups so I can see the article, than reading the article. It is distracting in an enormous and annoying way.. let me put it this way.. I won’t stay on a site that uses them. I leave and don’t look back. They remind me of a fly that just won’t leave me alone! ;o)

    That is just my pet peeve and probably not the general opinion of them.. but there are that few of us out here who hold that opinion and it is just a tip I am passing on to you.. it is worth what you paid for it.. and they do not even have a category for it on EBay.. so it is not worth much! :OP

    0
  • Lava360

    Friday, March 12th, 2010 21:52

    14

    very nice step by step explanation. very useful tips

    0
  • InteractiveLogic

    Saturday, March 20th, 2010 01:06

    19

    good suggestions and food for thought. thanks!

    0
  • Emma

    Wednesday, March 17th, 2010 14:03

    18

    I use clicktail, it helps me know what is happening on my site and its heatmaps and videos show me i can increase my conversions

    0
  • Duane

    Saturday, March 13th, 2010 00:05

    16

    Thanks for the insight.
    I also recommend that you check out the heat map – It can be a very useful tool.

    0
  • Lava360

    Friday, March 12th, 2010 21:52

    14

    very nice step by step explanation. very useful tips

    0
  • Terri Lockerridge

    Saturday, March 13th, 2010 04:05

    13

    What you have accomplished wit really only taking away a few unnecessary options to speed up the loading of the website is the greatest of the advantages you used. I am not really impatient, but I will only wait so long before I click the back button to my search page. You have many options to cover when your searching and I won’t wait very long, time is valuable to everyone, and this will help you greatly, in my opinion.

    I love the design and think you will continue to do well, as all the options load quickly, and you do not try to put so many options onto the page, that confusion on making a choice and remembering which one it was is not a risk here.

    There is only one thing I do not like and it is not in your website.. it is here in this article.. the popups when you mouse over the words is one thing I detest in any place in a site! I spend more time trying to get rid of the popups so I can see the article, than reading the article. It is distracting in an enormous and annoying way.. let me put it this way.. I won’t stay on a site that uses them. I leave and don’t look back. They remind me of a fly that just won’t leave me alone! ;o)

    That is just my pet peeve and probably not the general opinion of them.. but there are that few of us out here who hold that opinion and it is just a tip I am passing on to you.. it is worth what you paid for it.. and they do not even have a category for it on EBay.. so it is not worth much! :OP

    0
  • Murlu

    Saturday, March 13th, 2010 00:48

    12

    I really like the design and congrats on the improvements.

    The only thing that I don’t really like on the site is the text. So many different elements fit the design so well but then the blocks of text are very smushed.

    Besides that, I really like everything :)

    0
  • Amberly | Web Designer

    Friday, March 12th, 2010 17:00

    11

    @ Thomas. I agree with you . Google Map overlay is the best tool for check the visitors interests. Very useful for optimizing our sites

    0
    • Anastasia

      Friday, March 12th, 2010 17:23

      6

      the only problem about it is if you have several same links on the page- for example products in the menu and banner in the text linked to products t it’ll show the same data for both as it tracks it based on the URL

      0
  • Ahmed Elmasry

    Friday, March 12th, 2010 16:09

    10

    Very useful post, thanks for sharing

    0
  • ophir prusak

    Friday, March 12th, 2010 17:59

    8

    Nice article.

    If you want to *really* see what users are doing on your site, you should try a session recording tool like clicktale.

    It’s not free, but you’ll get feedback and data that google analytics or google website optimizer on their own will never be able to supply.

    - Ophir

    0
  • jeprie

    Friday, March 12th, 2010 17:22

    5

    the design looks very nice, really retro. but not the function. The first time i saw it i cant see anything. my eyes stuck on that big ready icon. i cant even read the menu text. i have to force myself to scroll down and see the rest.

    i think the design is great for an artwork, sold as print, or wallpaper. but not for a website. however, that’s my personal oppinion. your client decide what’s best for them.

    0
    • Anastasia

      Friday, March 12th, 2010 17:36

      7

      Thanks for the feedback, it used to be even more overwhelming. It might be a good idea to rework the design concept in more corporate clean style, in case we decide to make it, I’ll be making a report on the effect the redesign had

      0
      • Saad Bassi

        Friday, March 12th, 2010 22:53

        9

        Totally agreed with Jeprie Here

        0
    • jeprie

      Saturday, March 13th, 2010 06:07

      15

      the new button, (view design, try demo, free, …) doesn’t fit well with the retro style. there’s texture everywhere and suddenly a clean glossy button?

      0
  • Simon Day

    Friday, March 12th, 2010 14:48

    3

    It is so refreshing to see someone who understands usability and visitor journey paths. It sometimes feels like I’m all along out there when it comes to this.

    I agree with everything you’ve said but there is just one minor point to raise: noscript is the number one downloaded add-on for FireFox and with it running I don’t get to see the flash with the journey options. There needs to be a no-script version or preferably a CSS or image only version. This is not only for PC’s without flash but also for other devices like iPhone’s which won’t run any flash files by default.

    I believe that by adding a core function like this in flash file you are reducing sales by quite a percentage.

    Apart from that excellent work!

    0
    • Anastasia

      Friday, March 12th, 2010 15:03

      4

      I absolutely agree with you, there should always be a no-flash option.
      Thanks for taking time to write a great comment!

      0
  • Anastasia

    Friday, March 12th, 2010 12:54

    2

    Thanks Thomas, yes, they are definitely worth a try!

    0
  • Thomas Craig Consulting

    Friday, March 12th, 2010 12:12

    1

    Nice article Anastasia, definitely recommend giving Google Optimizer a try and check out the heat map overlay to see where users are clicking.

    0

Comments are closed.

23.20.112.161 - unknown - unknown - US