We've recently redone the Wagepoint website with a refreshing approach. I want to share the process we went through to get to our new design, which is now online at
Gist of it all
We needed a facelift for the obvious reasons. It had been over a year since our first site had been completed and in that year we've learned a lot. We learned what's excessive, what's annoying, difficult to develop, and tricky to maintain. We've also learned a lot of what works. Our older site worked in many ways. In fact it really wasn't too bad.
Where our older site felt weakest was in it's conversion rate. There was a lot of distractions to the user. At the time, we designed with a beautiful, fun experience in mind, rather than funneling traffic and creating a tool for sales. That's the biggest change now. Of course we kept some fun, too.
Content and story first, design to support.
By now you guys know I'm not the best writer so I'm going to try to keep it simple. I'll cover the Why, How, UX, Technical, and Design of it all. I think that'll work. I'll put visuals before its corresponding text.
But one more thing before i start, my general principles and philosophy on designing a website -- What is the point? If it doesn't have a point, then let's get rid of it. This is the general approach here. Everything on the page has a good use and purpose.
I talked about this a bit already. We wanted to redesign for the sake of a refresh. We've really hammered down our brand the past year and made a lot of decisions of how we want to look and present ourselves. Our site needs to mature with that goal. We also wanted to step into 2014 responsively, retina, all that jazz.
Statistically, conversions were low, but we were getting a lot of traffic. So we're pulling people in pretty well, the blog content is great and people love the product when they use it. So how do we get the traffic that's coming in to stick, and sign up?
Keep it simple. We were a bit intimidated to begin the redesign process because it seemed like doing all the pages would be overwhelming. But we realized, lets restart and keep it simple. We'll do each page with priority. Starting of course with the three most visited and crucial.
Home, About, Contact. These pages are a must. So we will release with those 3 and then go from there. At least this way we can plan our attack moving forward.
The benefit is that we can really focus on our story telling here. Focus on keeping the visitor engaged and moving down the page. Make the conversation easy to understand and fun to engage yourself with. Content first, design to support. No distractions if possible, while still keeping our branding present and making a beautiful and sometimes fun website.
Funnel traffic. Get them signing up with call to actions where we think its appropriate. No need to force it down their throat either. We want to educate about the product and then offer a chance to try it out. "Not sure yet? Ok read more about it and then we'll remind you you can sign up again in a bit." That's the idea!
It's important our users aren't confused when using the site. This is an area I struggled with on the first design. Teaching the user that orange/white is our primary action color. White/orange is our secondary. We inject green on important topics to keep it from being too dull but there won't be any clicking of green elements.
The earlier design wasn't awful, but I would just put what I thought was cool or looked best for that particular instance, forgetting about the experience as a whole.
It's important to carry these ideas through the whole online experience where applicable.
Once you start scrolling down the page, past the first CTA, we have a sticky header follow you -- Subtle but prominent. There's no question where to sign up at any given point down the page.
Don't give the user too many options. Make it easy to make the decision. This is why we took a one column approach, no sidebar, no two column split. One straight shot down the page.
Our header is simple and out of the way. Logo to remind you where you are, basic navigation. No need to distract the user with all kinds of links.
A big H1 and H2 to really sell the site. What is it that we're solving? How is it being solved?
Testimonial video. Videos are a great way for a lot of people. Some people won't bother and that's okay. We have written testimonials below it. But for the people that like videos, this is perfect. They click, watch and then hopefully sign up. If it's not enough to get them to sign up, no problem we keep moving down.
Big bold headings. We don't have any sidebars or anything like that. It's linear, no decisions to be made unless you want to sign up. Go to the next section. In this case it's testimonials with happy, human, real people faces. As much as I love illustrations, there are many points where faces are better. Especially since we're dealing with payroll.
The gimme features. We had a tough time deciding if we should put these before or after the 'main' features. We went with before. Let's get em out of the way. These are the features that are simple and easy to understand.
I decided to create all these uniform icons that are not quite full color illustrations, but not just simple glyphs either. I think they're very effective. We plan to animate them soon, too on hover. You've gotta have some fun, right? Again, green because there's no action to them, though they are a point of attention.
Main Features / Screenshots. One of the most important things when I'm signing up for new SaSS (software as a service) is seeing the app. I want to know what it looks like, how it feels. I can learn so much by just seeing it. Since we've recently face lifted the app a bit, we're happy to show it off. User can click the images to see the full app.
Pricing. Another thing where we could eliminate a whole page just for one slice of the home page (same as features page with the above) So we did.
Our pricing really is simple for a payroll company, but it still has a little bit of calculating to be had. So we came up with a simple but effective solution. No questions here how much it will be for your company, right? Works on a phone too!
We're dealing with money so security is important to us. Some people will want to see this and rightfully so. So we put it here. Plus shields are cool. Shout outs to Zelda.
Now in case the following header has been lost and forgotten as you scroll, we give you the last chance to sign up. You've see it all, you've read everything. We really hope you'll be sold. Time for you to sign up and get started. Big and up front. No missing it.
Our footer is simple as anything. A newsletter signup doesn't hurt. Notice white buttons orange text for secondary CTAs. I don't want to distract anyone with something more minor like this.
Contact and About are simple pages. Straight forward but much needed. Fun illustrations on each. If you hover faces you get illustrated versions and I made some fun icons to show where we're located. Again, these are straightforward pages that just work.
Thats it, that's our new site. We've got plenty of pages to integrate into this new look and feel but all in due time. It's time to promote this and really analyze how people use it. I have a feeling our conversions will jump significantly.
The goal for us as designers is to do as little work as possible. This is something I am taking a lot of pride on lately and finding to be very beneficial when it comes to web design.
I did all my designing in photoshop. Some people hate that idea, I would like to try some other programs sometime but it worked in this case magnificently. For the wireframes and mockups we used UXPin.
It was critical I design smart with my workflow in photoshop though. I want to deliver PSDs that my developer can make sense of immediately and easily. I also want him to be able to use plugins like css3.ps or csshat to get styles with no errors.
To do this I make sure I design non destructively. There is almost NO raster layers in my PSD. (besides the underline marks, I think)
I use as many layer styles as possible and avoid any layer styles that can't be replicated in CSS. That is, no blending modes (overlay, multiply, etc). All my round corner boxes are done with photoshops corner tool. This stuff makes for easy scaling and easy copy paste of CSS. All my icons are vector smart objects created in illustrator or with photoshop smart shapes. Easy editing and even easier exporting for retina.
I'm also using linked smart objects for the header and footer. This is interesting and new to me. I use the same wagepoint-2014-header.psd across all my PSDs. If I decided I want to bump my logo down a bit, I do it once and it updates across any PSD that contains that header. So much easier.
Swatches and layer styles. Things like buttons, typography, paragraph styles etc should all be created and saved for future use. No need to keep recreating.
Design smart. Measure twice cut once.
Technical Mumbo Jumbo
Our site was getting a bit dated in other ways too. It's important we keep up to date with nice happy clean lightweight code that google loves, as well as phones, tablets, desktop machines etc.
We made this site retina friendly with @2x graphics for the first time along with a responsive layout. It's still got some kinks to work out but for the most part we're not excluding any users finally, YAY! This is something I'm happy I was able to do.
We're using Bootstrap as a framework. It's based on a 12 column grid with 3 breakpoints and a fluid layout between these points. Nothing crazy fancy but it's pretty foolproof. Using this system helped me not have to design a million frames. One of my goals was to do as little photoshop work as possible and let it be very clear to the developers how the site will work. It worked great.
I plan to move to SVG graphics soon when we get some more time with png fallback. The less images the better anyway really. You'll notice things like avatars on the testimonial bit are just square photos with a bunch of CSS to make em pretty. I prefer this over images for accessibility. People may have zoomed in screens, retina displays, etc. This makes it easier for everyone.
Everything's in SASS and although it might not be using the most badass mixins etc, it is certainly convenient for further editing and keeping happy code! We've also got lightweight images thanks to kraken. Very helpful there. Highly recommended.
Well I'll share more later but so far our conversions have jumped a significant amount already. The site is a lot more exciting to send to people, and a heck of a lot easier to manage. So far, success.