Growth Hacking Your Ecommerce Conversion Funnel - Symphony Commerce

Check out the ecommerce engagement metrics I track in my Growth Hacking Your Ecommerce Conversion Funnel blog post on the Symphony Commerce blog.

"Anyone who runs a business knows that there are two key drivers for additional revenue: either increase conversions or increase customer engagement. Put another way, sell more to your existing customers and/or sell to new customers.

If your marketing efforts are bringing sufficient traffic to your web store, then conversion rate optimization is the key to unlock additional revenue. Are site navigation, searching, and filtering features helping customers find the right product? Are cross sells effective at showcasing more products to customers? Is your checkout flow encouraging or discouraging purchases?..."

Connected UX · An A List Apart Article

This is a great article on generating an actionable feedback and research library. It's very close to what I started doing at ClickTime in the past year. Give it a read. 

Now we need connections—a way to pull together disparate data points, qualitative and quantitative data, and long histories of research into a central clearinghouse that can be shared, searched, and maintained by different teams. After years on a research treadmill, that’s exactly what we’ve started doing at MailChimp—and far from being just a data solution, open access to this information has strengthened the connections between teams, and supported a general culture of inquiry.
— http://alistapart.com/article/connected-ux

Create Vector Icons in 8 Easy Steps

I created a series of link icons while working on usability improvements for ClickTime's help system.

Look at my icons!

Look at my icons!

Making icons proved so simple and effective that I immediately started replacing other stock ClickTime icons with my own.

Even more icons!

Even more icons!

And a gif!

And a gif!

My goal is create a completely custom icon set that seamlessly integrates with the rest of ClickTime and I can resize or remix should the need arise (like creating graphics for screens with different pixel densities).

I think you should try to create your own icon set. The following is a 6 minute screencast to teach you how.

Screencast

Illustrated Transcript

Introduction

Hello and welcome to the first screencast for StasSays.com. I’m Stas, and today I’ll teach you to make simple but pretty vector icons.

I’ll be using Fireworks, but you can use other vector graphic editors like Illustrator or Inkscape.

By the time you’re done, you’ll have a series of hammer icons that look like this.

hammer icon vectors.fw.png

Let’s get started!

1. Create a new document

Create a new document with a canvass 500px square with a resolution of 72px per inch and a light grey canvas color.

 

0 canvas.png

2. Draw a circle

Select your ellipse tool and draw a circle 128px in diameter. You’re starting with a large drawing because it’s easier to manage and scaling images down generally produces better results than scaling images up.

Select your circle and apply a radial gradient to it. Don’t worry about the color yet, you’ll be creating a color palette later.

Take the center of the gradient and move it to the Northwest edge of your circle and extend the gradient to the Southeast edge of your circle in a 45 degree angle. This doesn’t need to be exact.

1 gradient.png

3. Create a color palette

Draw three squares on the canvas. Select one of the squares and fill it with a relatively dark color such as #29313C, which is a muted blue. This is our parent color.

Next create a child color a shade lighter than the parent color. Select another square and fill it with the parent color (#29313C). Reopen your fill color selector and open your HSB (or HSL, depending your editor) color tool, which is Hue, Saturation, and Lightness, and one of the ways to represent and manipulate colors.

To make something lighter by a shade, increase the color’s lightness by about 37 points. This doesn’t need to be exact, but a change of 30 to 60 points will work well. #576B89 is our lighter shade.

Finally create child color a shade darker than the parent color. Select the final square, apply the parent color (#29313C), open the HSB tool, and reduce the color’s lightness by 37 points. In this case, it brings the color to a pure black (#000).

This is our color palette.

2 palette.png

4. Apply colors to gradient

Select the circle and open up the gradient properties. Apply the light color (#576B89) to the center of the gradient and the parent color (#29313C) to the edge of the gradient using the eyedropper and the color squares you just created.

3 colored gradient.png

5. Draw a shape inside the circle

Copy the circle, shrink its diameter to 100px, and change its background color to red.

Take the two circles and center them vertically and horizontally on each other.

 

4 red circle.png

 The red circle is a temporary tool that defines the outer boundaries of the shape you’re drawing.

Select your rounded rectangle tool, draw the hammer head, and fill it with white.

5 hammer head.png

 Draw the handle of your rectangle and fill it with white as well. Finally center the handle horizontally on the head and make small size and position adjustment until everything fits nicely within the red circle. 

6 hammer handle.png

Select the hammer head and handle and combine their paths with a union. They are now one shape.

7 combined path.png

Finally, using your transformation tools, rotate the hammer counterclockwise by 45 degrees to make it a little more interesting. If the rotation shifts the hammer a bit, position it back into the boundaries of the red circle.

8 rotation.png

Now that you've finished drawing the hammer, delete the red circle.

6. Apply an inner shadow to the hammer

Select the hammer and apply an inner shadow to it, creating an indentation effect. The shadow color is the darkest color in your palette (black in this case), it’s distance is 4px, it’s softness is 8px, and it’s transparency is 65%.

9 hammer shadow.png

7. Add an outline and a drop shadow to the circle

Select the circle and give it a white outline 6px wide.

10 circle outline.png

Apply a drop shadow to the circle that matches the properties of the hammer’s inner shadow. The drop shadow color is black, it’s distance is 4px, it’s softness is 8px, and it’s transparency is 65%.

11 circle shadow.png

8. You’re done! Scale and export!

Congratulations, you just created a pretty awesome icon. You can scale this icon to any size you need and use it as a template for a variety of future icons. You can download my sources and the compressed, web-ready 128px, 64px, 32px, and 16px hammer icons below. Feel free to use them directly or as templates for your own designs. Thanks for watching.

hammer icon vectors.fw.png

Bonus Round

Whenever you scale your icons I recommend digging into them and making a few tweaks to their effects. Something that looked distinct and elegant at 128px might get lost at 16px.

I recommend exporting your icons as 24bit PNGs and using tinypng.org to compress them. This will preserve transparencies (important for shadows), reduce compression artifacts, and create relatively small file sizes.

Downloads

Vectors and web-ready hammer icons 

 

Toggle Heading Blog Post on the ClickTime Blog

I just published Redesigning Resource Planning for the ClickTime blog. It adapts a lot of content from The Toggle Heading Pattern (or Making Your Pivot Tables Better) post I published here. Give it a read, here's an excerpt:

Over the past few months we made a lot of improvements to the Resource Planning module. One of the changes we are particularly proud of is a redesign of the Resource Planning spreadsheet headings, which makes understanding and manipulating rows and columns much easier.
What follows is a very design-heavy post about some of the challenges with creating spreadsheet applications, a review of the original compound menu headings, an introduction to the new, awesome toggle headings, and the advantages and disadvantages of both...