Vol. 1

A beginner’s guide to growing your design or development business

It’s where people go to shop, to find work, to communicate with their network — and to hire people to help them look good on the internet.

That’s where you come in. The market is rich with entrepreneurs, merchants, businesses small and large looking for assistance creating their online store. They might be tech-savvy, but they often have complicated customization requirements or simply not enough time to worry about it.

Your choice to become a web-based freelancer or small business is a great one. But now that you’ve made that decision...what’s next?

How do you brand yourself online to stand apart from the masses? How do you find your first customer? When you do find a prospect,

The lives we lead are increasingly carried out online.

how do you draft a killer proposal that will win them over? How do you decide what to charge? What the heck does a standard client contract look like? What about an invoice? What are the necessary steps you need to take before launching a store for a client?

These, among others, are the questions we will answer in this guide. We’ve reached out to some of the industry’s finest, who have been working with clients and navigating this online market for years. Ten different authors share 10 chapters full of insights and practical advice that you can take to build your business into something sustainable.

We include templates, checklists and recommendations for everything you’ll need to start your business.

Ready? Let’s get growing.

1 / Branding by Alex Hunter

2 / Marketing by Alex O’Byrne

3 / The Proposal by Ross Beyeler

4 / Value-Based Pricing by Ben Crudo

5 / The Contract by Ryan Foster

6 / Customer Service by Paul Boag

7 / Mobile by Galen King

8 / Invoicing and Payment by Kurt Elster

9 / Your Business Toolkit by Ben MacGowan

10 / Launch Checklist by Mat Mullen

11 / Shopify’s Partner Program

Contents

1 / Branding

Deciding what your company stands for

by Alex Hunter Alex Hunter is a company incubator, keynote speaker, angel investor, and branding expert. Alex most recently served as the Chief Executive of a venture-backed digital music company, steering it from pre-alpha to Series A financing, a successful international M&A deal, and multi-national growth.

1 / Branding

Brand. It’s one of those funny words that gets tossed around a lot without much care or discretion.

To really dive into what brand is, we need to spend some time talking about what brand isn’t. How many times have you heard something like this: “I really like their new brand” or “the packaging has the new branding on it”? Often, I’m sure. For a long time now we’ve laboured under the delusion that brand equals logo. Wrong. Or that brand equals corporate identity. Wrong again, Charlie. They are mere outputs of a much, much bigger concept that we need to get comfortable with before we move on to how you can cultivate and care for your own brand.

So let’s start by dismissing the idea that brand has anything to do with the visual identity of an organization. That’s putting the cart so far before the horse that the horse is looking at you like, “What...what am I supposed to be doing here...idiot.” And there’s no need to take abuse from a horse.

1 / Branding

Now that we’ve cleared up that little misconception about what brand means, let’s talk about what brand actually is. More importantly, let’s talk about what YOUR brand is.

If you’re reading this collection of articles, it’s clear that you’re committed to whatever it is you’re working on. That’s a great start. You may already have things in motion and are looking to take things to the next level. No matter where you are on the journey, I want you to ask yourself some important questions: Why are you doing what you’re doing? Why are you building this business? Why do you get up every morning, switch on the computer and create?

Now wait! Hear that? That answer, the one you just gave, THAT is your brand. That is your raison d’etre. That is your mission. That is your goal. And it should be reflected in every little thing that you do, everything you produce, every conversation you have with your customers or clients, online or offline. And we can neatly package all of that into one word. Brand. Brand is the manifestation of your reason for being. It must permeate every facet of what you do and be made real in everything you create, from your core product to an off-the-cuff note you write to a valued customer.

Comfortable with that? Good. But everyone that works with or for you has to be totally comfortable with why you do what you do, too. Brand is not built in the board room; it’s built on the shop floor — so include your team (if you have one) in any activities that involve your brand, its definition, its application, and its evolution.

1 / Branding

Once you and your crew are comfortable with this concept, it’s time to distill it into some practical applications.

It’s important (and fun) to find creative and engaging ways to communicate your brand to the wider world. It’s all fine and dandy to have a clear brand and a great product, but it doesn’t mean diddly if no one knows about it. So give your customers — even if there’s just one of them and it’s a friend or your mom — an opportunity and a reason to talk about you.

Create moments of delight. Create moments of personality. Create moments where they forget that you’re a service provider and they connect meaningfully with you as a person, even if it’s just for an instant. How? Follow up an order with a handwritten note just saying thanks for being a customer and inviting them to get in touch with any feedback or questions. Acknowledge that it’s not a business-to-consumer transaction, but a human-to-human transaction. And use what you already know about your customer to create that delight.

If a previous customer gets in touch, don’t act like it’s the first time you’ve ever met them; we wouldn’t do it to someone in the real world, so don’t do it in the business world. Even a “Hi Mr. Jones, great to hear from you, oh hey how is that sprocket working out for you?” is such a powerful tactic. By referencing a past interaction, we’ve moved beyond the realms of simple transaction — we’re now cultivating a relationship. And that is where we build long-term loyalty. Invest sensibly in that relationship, and you have a customer for life.

1 / Branding

So what about brand positioning? Branding can often try way too hard to make us appear to be something we’re not; bigger, smaller, more international, more local, etc. We think about it when we name our business (Jack Smith’s Agency vs. Smith Global Partners Inc.) or even how we refer to ourselves (e.g. I vs. We). But I’ll let you in on a little secret…It doesn’t have to be that hard.

If you clearly and honestly communicate who you are, you don’t have to spend the time and energy living a lie (and inevitably being caught). There will always be clients and customers that actively look for small, boutique businesses and shy away from HyperGlobalMegaCorp. As you grow, you’ll start to attract the type of customer who looks for a company with a bit more heritage and history. And that’s exactly what you’ll be when they come calling. But if you’re trying too hard to be something you’re not, you’ll alienate the people who actually want to work with who you really are. Besides, we all know boutique is where it’s at in 2015, right?

Now I know we don’t know each other that well (yet), but I want you to promise me something. I want you to promise me that you’ll give your brand the time and attention it deserves. When you’re a small business, there’s a lot to keep your eye on just to keep your head above water. And because of that, brand tends to be neglected in smaller businesses. But in return for your promise, I will make YOU a promise: I promise that if you invest emotionally, financially, and cognitively in your brand now, it will pay substantial dividends in the future. And now that you’ve got your eye on your brand, don’t lose sight of it for even one second. Not today, not tomorrow, and not in 10 years when I’m

1 / Branding

looking at you on the cover of a magazine. (Will we have magazines in 10 years? Who knows, but if we do, I expect to see you on their covers.)

Work hard. Stay positive. Build something. And to add some fuel to your creative fire, I want to leave you with a bushel of delicious branding nuggets that have tickled me over the last year or so.

• Pact Coffee, a subscription coffee company in the UK, tracked me down after an exchange on Twitter and sent me a box of coffee and a handwritten note referencing our online conversation. I am now totally in love with them.

• An online music community regularly sent out handwritten notes and stickers to some of its more active users and watched their already impressive engagement metrics skyrocket.

• An airline uses technology to enable their inflight service teams to identify frequent fliers and address them by first name. Sounds simple, but the use of a first name without looking at a piece of paper is a powerful gesture.

• A boutique hotel in NYC fills your room with your favourite snacks and drinks so you don’t feel so far away from home. Even better, they remember your selections so when you come back, even years later, the fridge is already stocked. They are investing in the relationship, not the transaction. They’re the hotel I’ll always stay in when I travel to the Big Apple.

2 / Marketing

Ways to find your first customer

by Alex O’Byrne Alex is a founder at WeMakeWebsites, one of the top ranked Shopify Experts in the UK. He speaks regularly on the topic of marketing and ecommerce. WeMakeWebsites builds beautiful and effective online stores for creative retail companies and produces weekly advice for their mailing list of 8,000 retailers.

2 / Marketing

Anyone that has push-started a car will know that the hardest part is the first bit of movement. Inertia as a new freelancer or agency is the same – the hardest clients to get are usually the first ones. Everything gets easier after that.

Here is a short guide on how to overcome this, based on how we got started and what we learned over the past 5 years.

What I don’t recommendWalking the streetsWhen we first got started, I literally walked around London, going into shops asking if people needed a new website. Sounds stupid, doesn’t it? It was! I only tried it a few of times, but it never worked. Perhaps I was doing something wrong, but I would not recommend this approach!

Cold callingCold calling is not only the most painful approach to take, it is also the most annoying to be on the receiving end of. It’s also not very effective

2 / Marketing

for selling websites unless you have a lot of time to dedicate to it. We did get one good client out of cold calling, but this was out of many painful afternoons sitting, phone in hand, staring out the window.

Networking eventsI have spent many hours doing this and whilst it can work, it never seemed to offer a return on time invested. I had some good lunches and met some pleasant people, but in the end I felt I could better spend my time elsewhere.

With that said, we have some good agency relationships that came out of random emails and calls, with subsequent coffee meetings that ultimately led to us sharing business. I wouldn’t rely or focus on this too much though, as it takes a lot of time and the payoff is unpredictable.

Relying on word of mouthWord of mouth is great and something to be proud of; this is how most good agencies grow. However, we were frustrated with the passive nature of this approach, and felt we could speed it up. This wasn’t the case though — even offering incentives for referrals didn’t work. That’s why we turned to content marketing.

Building a predictable funnel

The approaches above rely on the customer being ready to buy at the point of interruption, but buying a new website is an expensive purchase and takes a great deal of consideration. Choosing a platform

2 / Marketing

is a big decision and for an established business, changing workflow and migrating content could require a great deal of effort.

What I recommend is nurturing your leads by educating them, establishing yourself as a trusted expert, and then being ready for them when they are ready to buy. Here is one way to do it.

1. Attract interestThe first step is to start building interest in your services. It goes without saying that you should have your own website to use as a platform for your brand. A portfolio is essential for an agency — so consider doing a couple of free jobs for friends or family so that you can show examples of your work. They don’t have to be the most elaborate projects, just show some of what you are capable of. This is infinitely better than nothing.

How do you get people to your site though? Here are some good channels to begin attracting good quality leads.

SHOPIFY EXPERTS

The best converting channel for us is the Shopify Experts Marketplace. We earned our spot here by bringing a few high quality clients to the platform. Leads arriving through Shopify Experts have already chosen Shopify as a platform and are just looking for the right person to do the work. They are at the buying stage and are set on Shopify — so it’s straight to making a sale.

Again, having an Experts profile with at least four examples of your

2 / Marketing

work will help. Make sure you have a persuasive introduction to your company and include testimonials as soon as possible.

BLOGGING

Create blog posts that answer questions businesses may have during the research stage of an ecommerce project. For example:

• Questions related to various ecommerce platforms

• Advice on how to write an ecommerce business plan

• An overview of good homepage design

• An example privacy policy

Don’t write posts for other freelancers on your company blog; try to make all your blog content appealing to potential retail clients.

Ensure your website has good SEO and share your best content on social media. Google will reward popular content with more search visibility.

PR

Another way of bringing people to your website is to begin a PR campaign. This doesn’t have to mean aiming at big publications — it could just mean trying to get other blogs to write about you or even writing the content for them, otherwise known as Guest Blogging. Write a few articles and send them to reputable blogs in the industry. Getting published raises your profile and also provides valuable links back to your website, which will raise you through the search rankings.

2 / Marketing

LANDING PAGES

If you are feeling confident on the SEO front, you could try to appear high on the first page for key terms like ‘Shopify designer [your area]’ or ‘[your area] web designer’. These keywords are often highly competitive, so this isn’t easy, but it’s something you can work towards improving over time.

MEETUP GROUPS

We started a meetup for Shopify in London and the response has been tremendous. This is a great way to meet potential clients that are considering Shopify as a platform or that are already on Shopify and are looking for a partner to help with future work.

Organizing an event requires a lot of effort both in terms of marketing and logistics. The main thing is to ensure you send regular email updates in the run-up to the event so you can increase awareness. A good list of talks will help draw the crowds. You’ll probably need to ploy people with free booze, so factor that into your costs. You don’t just need to limit your meetup to Shopify — why not create a fashion retail or designer-maker meetup in your city?

COWORKING SPACES

Coworking spaces are shared desk offices. Many of the newer ones are impressive to work in and are typically full of interesting people trying to build companies. This support network can be useful at the start for sharing advice and contacts. You may even find you get some business out of it. Join the mailing list and watch out for people looking for ecommerce help. Another advantage of joining a coworking space

2 / Marketing

is that it can make you look a bit more professional when those first clients want to come see you.

SOCIAL MEDIA

Social media can be a great way to show off your expertise and offer real value to prospective clients. Here are some tips:

Do:

• Choose one or two social networks to pay attention to. It’s hard to do all of them well and some work better for B2B, such as Twitter and LinkedIn.

• Use imagery where possible to liven up a post.

• Consider using a person as your avatar and profile name, even though this is your company account.

Don’t:

• Just show off your latest work all the time. You need to earn the attention of your followers by offering something of value beforehand, such as advice.

• Go off topic with your tweets — nobody wants to know what you’re eating for dinner.

• Do include links to your social media pages on your website, but don’t go overboard and put a feed directly on your website. If people have made it there, you want to keep them on your site!

2 / Marketing

CLASSIFIED LISTINGS

Some of our earliest clients arrived from Gumtree, a popular classifieds site in the UK. We simply posted an honest ad explaining that we were offering premium web design at a low cost so that we could build a portfolio, and out of a few enquiries came a lot of work.

2. Nurture prospectsIf the person is ready for a new project straight away, we skip straight to the next step. However, most people aren’t ready to buy right away. They are researching a potential project or they may have stumbled across your site for some other reason. If your conversion rate to enquiry is 2%, this means 98% of the people visiting your website are then disappearing!

How can we retain some of those visitors so that they come back?

What I’d suggest is creating a lead magnet that is irresistible to your target audience. Create a killer long-form article such as ‘5 ways to instantly attract more customers’ and ensure it is prominent within your website. You could even use a modal pop up. Ask for an email address in return for accessing the article; that way you can begin a mailing list of interested leads. Note that the ‘lead magnet’ has to be something that would be appealing to your target audience, to ensure the leads you get are relevant.

Even in the age of social media, email addresses are gold. They allow you direct access to your audience and over time you can build your brand by sending useful and informative content to your mailing list.

2 / Marketing

This type of content is great because it simultaneously builds your brand and provides utility to the prospective client.

Send out your best new blog content to your mailing list and you’ll notice the perception of your brand will improve. Best of all, you may even get people recommending you that haven’t met you, but are just reading your content! We actually individually email each new lead that downloads our lead magnet with the following:

Hi [name],

Thanks for downloading [lead magnet]. Are you considering a new ecommerce website? Our ecommerce websites feature:

• Mobile, tablet and laptop friendly design

• Easy to use admin screens

• Powerful selling features like personalized product recommendations

• Analytics and reporting

• Ongoing support

• SEO and paid ad management services if needed

• Point of sale (POS) terminals, if you need them

Please get in touch if this is of interest, the next stage is a free consultation from which we can prepare a proposal for your project. If you have a project in mind please email us and we can provide a quote.

2 / Marketing

You’ll often get replies and out of these a dialogue around a future project could begin.

3. Making a saleNow we arrive at a critical step! How do we convince this potential new client that we can deliver what they need? Once we have a bit of information on what they are trying to achieve, we send a proposal (see Chapter 3 on writing a killer one!).

Make sure you follow up a couple of weeks later. Website projects have a habit of slipping down the priority list for clients, until they become urgent! Stay in the loop with your leads and don’t worry if you don’t win every deal. If this happens, find out why you weren’t chosen and improve on it.

4. Repeat business and referralsYou’ve got your first client! Congratulations.

Don’t forget that the Lifetime Value of a client may be far more than the initial project. Once you’ve done an excellent job of delivering the project, catch up with the client on a regular basis to see how the website is performing.

Referrals are probably the easiest way to your grow your business, so think about how you can create a process that encourages clients to refer other leads to you. Most retailers will know others that could benefit from your services.

2 / Marketing

Measuring your successAlways measure your key activities. Create key metrics for each part of your funnel, such as how many new subscribers you have, what the click through rate of your emails are and which marketing channels your new projects are coming from. Then refine what marketing activities you’re doing by taking this into account.

Final thoughtsNever stop learning and improving. Finding your first customers will be a huge learning curve but it’s just the start. Good luck. Go forth and build your ecommerce consulting empire!

3 / The Proposal

How to write and present proposals that close deals

by Ross Beyeler Since 2008, Ross has run Growth Spark — an agency helping ecommerce companies design interfaces that convert visitors and streamline operations. Growth Spark has completed over 250 projects, with Ross named as one of BusinessWeek’s Top 25 Entrepreneurs under 25 in 2010.

3 / The Proposal

If you’ve spent any time running a freelance practice or web agency, you’ve likely been asked to present a proposal for your services. If you’re like many firms, you whip together a quick Word Doc with a list of the things your client told you they wanted in their website and how much it’s going to cost. Unfortunately, this method is likely to fail in producing a 100% close-rate. In this article, we take a look at best practices in crafting and presenting your proposal to help you increase your odds of winning a deal.

Why write a proposal?Will an awesome proposal win you a project by itself? Unfortunately, no. Could a crappy proposal lose you a project? Unfortunately, yes.

Not all sales opportunities will put you directly in front of the sole decision maker where just a call/meeting/email alone can close a deal. It’s very likely that you’ll need to submit some sort of proposal. It’s very likely that you’ll be competing against other agencies. It’s

3 / The Proposal

very likely that your proposal will be circulated around to other stakeholders that might not have met you and don’t have context/background on your company. Because of this, you’ll want to make sure you’re putting together and delivering your proposal in the best method possible.

What’s really the goal of a proposal?The first mistake I see other agencies making is rushing through the sales process so they can get to the proposal as quickly as possible. At its core, a proposal is a tool to help you express your understanding of your client’s problems and needs. If you don’t take the time to thoroughly identify those problems and needs, chances are your proposal will fall flat with clients.

Even if your process/deliverables are almost 99% the same for every client, you need to craft the proposal in a way that matches the language and perception your client has of their problem. You might suggest the same solution for each of the following problems:

• A client needs a better way to manage the content on their website.

• A client needs to integrate their ecommerce website with the other tools/software they use to run their business.

• A client needs a design that is more focused on conversion and helps drive sales.

In each of these cases above, you might still end up designing and developing a new custom Shopify theme, but the core problem you’re

3 / The Proposal

solving is actually quite different for each. You want to sell the ‘content management guy’ on the ease of product and page management with their chosen ecommerce platform, even if you need to build the same custom theme you would for the ‘platform integration guy’. It’s crucial to remember that the real goal of your proposal is to demonstrate your understanding of the client’s issues and reason for the project.

Getting to a proposalSo how do you properly assess the problems and needs of your client? Although this article isn’t meant to provide sales process strategies, here are some of the key steps that most agencies experience as they’re selling a potential client:

QualificationOnce you’ve received an inquiry or referral, your first step is to ‘qualify’ them and determine if they’ll be a good fit as a client. You’ll want to get a sense for the constraints/requirements they’re dealing with on the project regarding budget (how much cash do they have to solve this problem?), timeline (are there any driving deadlines for this project?), technical (what are the high-level features needed?) and partnership (are they looking for specific attributes in the partner they’re looking to work with on the project?).

Defining the problem and requirementsOnce you’ve determined they’re a good fit at a high level, you’ll need to dive into understanding what’s driving the project. You’ll want to figure out what business problems they’re facing, the magnitude and

3 / The Proposal

impact of those problems and why they’re choosing to do something about it right now. You’ll also want to dive into a full breakdown of all the technical requirements surrounding their problem.

Scope analysisOnce you understand the problem and requirements, you’ll need to draft some sort of solution. This solution might only need to be explained conceptually or as a list of defined requirements and not necessarily approached using any spec work (I highly recommend avoiding spec work at all costs). You’ll want to determine the process and methods by which you’ll be solving their problem once they’ve moved ahead with the project.

During each of these steps, I suggest having at least one interaction with the client either face-to-face (ideally) or via Skype/phone. Do not create a proposal for anyone not willing to communicate either in person or via phone. You won’t win any email-only deals.

What does a proposal look like?I’ve seen a variety of proposal structures, styles and formats. At the core, however, most proposals seem to focus on the following areas:

CompanyThis is your moment to brag and demonstrate why you’re the perfect fit. You’ll want to answer questions such as:

• What makes you an expert on this subject? What experience/accolades do you have that set you apart?

3 / The Proposal

• Who is on your team and more importantly, who will the client work with specifically?

• What philosophy/approach/secret sauce do you have that makes you a good fit for this project?

• What other case studies/references/testimonials do you have that can help instill trust?

ProblemThis is where you demonstrate your full grasp of the problem your client is trying to solve. You’ll want to answer questions such as:

• What are your client’s key business issues and objectives?

• How do you measure the impact of both solving or not solving those problems?

• Why are these problems being addressed now? What is the real motivation behind the project?

• What has the client said regarding the partnership requirements they have, and how do you meet them?

SolutionThis is where you want to demonstrate your insights and ideas (without giving too much away for free) on how you’ll solve the problem. You’ll want to answer questions such as:

• What are the business goals you’re trying to accomplish in solving this problem?

3 / The Proposal

• How will you measure success when looking at how you solve the problem?

• What constraints or limitations have been identified regarding how the problem could be solved?

• How do you differentiate between ‘mission-critical’ requirements and ‘nice-to-haves’? What are those requirements?

• What is the process or series of steps/phases you’ll take to solve the problem?

• What tangible deliverables will be produced while following your project’s process?

LogisticsIn this final section, you’ll want to get into the specifics on how the project will be executed. You’ll want to answer questions such as:

• What are the costs in fees, platforms, media and additional services in the project?

• What is the payment schedule and how does that correlate to time or deliverables within the project?

• What is the expected timeline for the project and what drives the ability to stick with that timeline?

• What will the communication policies/practices be like during the project?

• What other policies/contingencies/terms exist with this project?

3 / The Proposal

How do you present a proposal to a client?Despite all of the above, I look at a proposal as one of two things: a Presentation or an Artifact. A Proposal as a Presentation is one that must be presented in context (i.e. in-person or over the phone) and can’t simply be sent over in an email. These types of proposals are those that require your narration. There is a story to tell/sell and it must be presented as such.

A Proposal as an Artifact is really just one that articulates everything that has been already said and agreed upon during prior sales conversations. This method requires that you get almost full agreement from the client on the project before presenting them the proposal. In this instance, the proposal then serves as more of a reference/recap of what has already been discussed.

In either situation, there are a few tools I use that make crafting/presenting proposals a little easier:

Proposal managementI’ve used Tinderbox for years as my proposal management software. They allow you to create templates with dynamic variables such as client name, track analytics of how your client views the proposal, and manage team collaboration.

Sales presentationIf I can’t do it in person, I typically use a screen-sharing tool such as Zoom to walk the client through the document. I prefer to not send

3 / The Proposal

it to them directly and instead control the viewing experience from my computer. This prevents them from just jumping right down to ‘budget’ and making a quick decision.

Sales communicationIf you’ve ever doubted whether a potential client has received or read an email, check out Yesware. Yesware sits in your email client and provides email templates and analytics to help you more effectively manage your sales communication and process.

Sales managementThere are a ton of CRM solutions on the market with Salesforce as the notable leader. Personally, we’ve used PipelineDeals for years. It’s a far simpler interface and works perfectly for agencies who do project-based sales.

In the end, everyone is bound to take a slightly different approach to crafting their proposals. Regardless of your approach, there is one thing I’ve found crucial to remember. Don’t get too comfortable with your proposal templates. It’s easy to think that once you’ve built a great proposal you can go on ‘repeat’ with all new deals going forward. We work in an ever-changing industry and as such, your proposal needs to change often too. In addition, you need to make sure that each proposal speaks to the unique needs/problems your client has identified. You can’t assume your template speaks to those problems flawlessly with every prospect, so keep it fresh!

4 / Value-Based Pricing

Deciding how to charge your clients

by Ben Crudo After completing a B.Eng in Software Engineering, Ben started building websites and apps on Shopify, and today he is one of the top Shopify Partners. Ben is the principal solution architect at a consulting firm that bears his name, and leads a team of software developers on dozens of projects annually.

4 / Value-Based Pricing

Today Ben Crudo Consulting is an eight man (and counting) development shop. We didn’t start out that way though. As our name would imply, you only used to get Ben Crudo when you hired us.

When I began consulting, I took any job available in order to increase the size of my portfolio and help build up my reputation. In an effort to keep prices down, I would bill strictly by the feature. I found that it was a lot easier to make a deal with someone based on the delivery of a feature, since that’s ultimately what the customer is interested in.

You have to be careful when making contracts with clients based on features though — this can be a double-edged sword. Things can easily go awry if you don’t scope out the requests in enough detail and ensure that the customer has the same understanding of the project as you. Since the customer is always right, you might be forced to repeat the implementation a few times to make them happy, which can be quite costly for you.

4 / Value-Based Pricing

To protect myself from scope creep and errors in estimation, I always provide a small range of costs in my proposals. Estimating the effort involved in completing a software project is extremely difficult in general, but it can be even more complicated if you’ve missed the mark with your implementation. Maintaining a little wiggle room with your pricing can make the difference between winning and losing on a contract.

Trust is hard to come by in the software consulting business. Developers are often compared to mechanics because they speak in cryptic foreign languages, like HTML, JavaScript and Ruby, about concepts lay people don’t understand. Making sure that you and your customer share a mutual understanding about what you’re going to develop is one of the most important things to do on a project.

As a matter of principle, no one likes to be told that they need to pay more for something they’ve already negotiated for. That’s why as a company policy we guarantee our clients that their bill will not change so long as the mandate remains the same. This means that as long as we are effective at eliciting requirements from our customers in the first place, we’ll be able to estimate the workloads effectively and keep them satisfied.

Unfortunately, like many things in life, this is much easier said than done. Gathering requirements for a software project is an extremely difficult task to complete accurately. To make things more difficult, often times customers aren’t able to articulate their needs precisely, making it even harder to craft a solution to suit their problem. Sadly

4 / Value-Based Pricing

for developers, software is so fickle that even the slightest change in requirements could spell a lot more work on a given task.

In the context of doing contracts on a set budget, the details really matter. Whatever you can do to make sure that the customer understands what you’re delivering, the better off you’ll be. I would suggest leveraging every tool at your disposal to clearly define the functionality you’ll be providing to the client. Wireframes, mock-ups, UML and user stories all play important roles in specking out a software project. Each document type you produce should describe a unique aspect of the project. This demonstrates to your clients that you have all of the bases covered and acts as a good start to your implementation and project plans. It can also come in handy when a customer comes back to you after six months with a signed proposal that you may have already forgotten about.

Changing your pricing strategy from feature-based to project-based happens naturally over time. At first my projects were just single features, so it was relatively easy to price them out. Once the projects started increasing in size and complexity, customers demanded that we provide them with more comprehensive quotes. Unfortunately again for consultants, it’s much more difficult to estimate a larger project than a smaller one.

The number of deliverables you provide acts as a baseline for the number of potential mistakes you can make. As it turns out, experience is the best way to minimize the mistakes in estimation. Once you’ve done everything at least once, you learn to recognize the

4 / Value-Based Pricing

common pitfalls and will be much better at identifying sources of risk in your projects.

Apart from making every mistake at least once, it’s a good idea to have lots of documentation to guide you through the sales and development process. The bottom line is that the better you are at understanding your customer’s needs, and the more experienced you are at solving similar problems, the better you’ll be at costing your projects and making sure you come out ahead every time.

5 / The Contract

How to draw up a client contract

by Ryan Foster Ryan Foster is the owner of RyanFosterDesign, a digital agency specializing in ecommerce. He creates custom Shopify Themes and private Shopify Apps for emerging and fast growing brands around the world. He works with high-profile clients including Pebble and DODOcase.

5 / The Contract

A clearly written contract is an essential element of onboarding a new client. Contracts don’t have to be long, scary legal documents — I deliberately use a document that is written in plain, easy to understand language — but they should clearly explain what both parties are agreeing to.

Keeping the contract short, focussed and easy to understand helps reduce friction, allowing you to start the project quicker (and get your deposit invoice paid sooner!). Without a contract, your client may not clearly understand what they are paying for. You risk scope creep (clients asking for more features without paying for the extra work), late payment (or even non-payment) and confusion over ownership, requirements and deadlines.

What to include and whyIf you have provided your client with a project estimate/quote, then you have already written half your contract. A lot of the information your contract should include will probably be in that estimate.

5 / The Contract

1. Overview Briefly describe who the contract is between (include company names and addresses of both parties), summarize the project (“We will design and build a bespoke Shopify Theme”) and the associated cost (“...for the estimated total price of $$$”).

2. ResponsibilitiesDescribe what both parties agree to (e.g. client confirms they have the authority to enter into the contract, will review work and provide feedback in a timely manner, will stick to the payment plan… you will endeavour to meet deadlines and maintain client confidentiality, etc.).

3. Scope Detail all the project deliverables. This is really important because it explains to the client what they are getting for their budget. If you are providing design mockups, explain how many mockups you will include (“1 main design concept and up to 3 rounds of design revisions”). Explain what browsers and devices you will support (you are testing your pages in Safari 5 on Windows right?).

Describe how user acceptance will work so everyone is clear how deliverables will be approved as you work through the different project stages. This will help the project progress smoothly. As well as describing what is included in the project scope, describe what is not included (“We are not responsible for inputting product, blog or page content to your store”). This will help to avoid the awkward “Really? I thought that would be included...” conversation at the end of the project.

5 / The Contract

4. ChangesInevitably, things change so you should describe how you will manage this change throughout the project (“The design stage includes three rounds of design revisions. Additional rounds of design will be charged at our standard hourly rate of $$$. All changes should be requested in writing via email or Basecamp”).

5. OwnershipDescribe how the rights to the work produced are assigned on completion of the project. Do all ownership rights transfer to the client? Are you handing over source code? Make sure you include a sentence about reserving the right to showcase the project in your portfolio.

6. Payment planInclude a payment plan with payments associated with different project milestones. I always ask for an initial project deposit (to book the work into our production schedule and secure a project start date — this ensures both parties are serious about the project) and then staged payments (e.g. payment #2 upon completion of design stage, payment #3 on completion of build stage). Make sure you assign a dollar amount to each of these staged payments in your contract and then clearly set out your payment terms (otherwise you could be waiting 30 days before you get paid).

7. WarrantiesOnce you have completed the project, you have been paid and the website is live, how long will you troubleshoot issues and fix errors?

5 / The Contract

What happens when this period is over — does the client have to pay for your time? Detailing your warranty period will ensure your project has a clearly defined end, and will prevent an overly long and painful project handover.

8. TerminationIf things are not working out, describe how the contract can be cancelled (“At the end of the design stage if you are not happy with our work, you will pay us in full for everything produced to that point and cancel this contract”).

9. SignaturesThat’s it! Both parties should sign the contract (it’s not binding if both parties do not sign — just sending the contract to your client is not enough) and keep a copy for their records.

Contract etiquetteIt’s important to create a contract that is appropriate to the size of the project. At the start of the article, I recommended keeping the contract short and focussed. But in reality, the size of the contract will probably relate to the size and complexity of the project. I think the important thing is not to scare off a potential new client with an intimidating and overly long contract! Keep things accessible.

Personally I believe it is more important to clearly explain what both parties agree to in an easy to understand format, as opposed to creating a 50-page document that will be water-tight and stand up in

5 / The Contract

any court of the land.

If you are terminating a contract, it is important to do so in a professional manner that maintains the reputation of your business. If you just send an email, it is easy to misinterpret or come across badly — make a call, explain why the business relationship is not working, and follow up in writing with an email.

Templates and other resourcesThere are a lot of open source contract resources available on the web, but here is a selection I have found useful:

Docracy.comAn open source collection of legal contracts. The website includes tools for e-signing and all documents are free to download, customize, store and e-sign.

• AIGA Standard Agreement for design services

• Sample designer contract by Speider Schneider

• Contract for Design Works by Dan Wong

SuperFriendly agreementExample agreement used by SuperFriendly, a US-based design studio. Simple and easy to read, you can use this example as a starting point to create your own agreement document.

5 / The Contract

Contract Killer Contact Killer is a popular open source contract for web designers, by Andy Clarke. Another easy to read, plain English agreement with no jargon or legalise.

e-SignaturesDon’t want to scan, sign and email back a PDF? Here is a selection of e-signing services you can try instead:

• Adobe Echosign

• DocuSign

• HelloSign

• Right Signature

Is an e-Signature legal? According to Wikipedia, yes — but it depends on your country: “In many countries, including the United States, the European Union, India, Brazil and Australia, electronic signatures (when recognised under the law of each jurisdiction) have the same legal consequences as the more traditional forms of executing of documents.”

Each of the e-signing services linked above include information about how their service is legally binding. Docusign outlines the appropriate legislation for the United States, United Kingdom and European Union.

5 / The Contract

F*ck You, Pay MeA favorite video in our office. Mike Monteiro, Design Director and co-founder of Mule Design Studio talks about the importance of contracts at a Creative Mornings event.

And finally...Over the last 15 years, 99% of client projects have run smoothly. But when they haven’t, a clearly written contract has helped to clarify issues and smooth out payment problems. The contract provides peace of mind and protection for both parties…so don’t start a project without one!

Important: I am not? a legal advisor. While my company is happy to use a modified contract template, this approach may not be appropriate for you! Nothing in this article should be considered legal advice. Consult a solicitor/lawyer to if you want to address the particulars of your specific situation.

6 / Customer Service

The key to winning work

by Paul Boag Paul Boag is the author of Digital Adaptation and a leader in digital strategy with over 20 years experience. Through consultancy, speaking, writing, training and mentoring, he passionately promotes digital best practice.

6 / Customer Service

As web designers, we like to talk about the importance of providing an amazing user experience. Yet we often fail to apply these high standards to our own users: our clients.

Neglecting the experience of our customers is a mistake. Our sector is being squeezed with everybody forced into the middle. At the bottom end of the market, automated tools such as Squarespace are forcing web designers to look for larger clients. At the top end of the market, companies are bringing the web in-house. This is forcing larger agencies to take smaller projects.

Providing great customer service is one of the best ways of differentiat-ing yourself in a busy marketplace.

Why customer service mattersWhen a market becomes oversaturated, as we are seeing in web design, it is not the best that survive. Instead, it is those who have the

6 / Customer Service

best reputation. Providing outstanding customer service builds that reputation.

If your customers have a good experience working with you, they’re more likely to recommend you to others. This word-of-mouth recommendation is invaluable because it lowers your marketing costs and increases profitability.

They won’t just recommend you to colleagues and acquaintances, they will become excellent references. They will also be willing to provide testimonials you can use in promotional material.

Happy customers also lead to more repeat business. Repeat business is important because it is easier to win and that lowers your cost of sale. Again, this increases your profitability and allows you to remain competitive.

Providing excellent customer service also establishes a better working relationship with your customers. This means they are easier to work with, thus increasing your profit margin on design and development work.

In short, customer service matters because it brings in new work and makes you more profitable as a company. The question then becomes: how do you provide outstanding customer service? It begins by understanding which parts of the experience could do with improvement.

6 / Customer Service

Identifying points of improvementFortunately, as web designers, we are familiar with improving the experience of our users. We even have a range of tools and techniques to help us achieve this aim. One such tool is the customer journey map. As the name implies, a customer journey map seeks to understand the customer’s interactions with a company. It is a timeline of these interactions which reveals what the user is trying to do and how they are feeling through the process.

We can use this technique to map the experience of our customers and look for opportunities to make things better.

Our customer journey map starts with our client researching web designers, and ends with a post-project debrief. Along the way, they have many interactions with us. Each one is an opportunity to create a better experience. But to achieve that we need to understand at each touchpoint what the user is thinking, feeling, and doing.

Let’s begin by looking at the customer’s experience of finding and selecting a web designer.

Impressing in the sales processThe customer’s experience begins with the realization that they need to hire a web designer. Customer service comes into play even at this early stage. By providing good customer service to our existing clients, they may well recommend us to a new customer.

6 / Customer Service

But our new customer will also be doing their own research. If we are giving away useful advice and information, we immediately make a good impression. Use your blog, newsletter and social media to help potential customers find the right web designer for them. We shouldn’t focus on promoting our products, but on answering their questions. Give them advice on running their website or support them in any other way you can think of. Don’t just see them as a cash cow you can make money from. Instead, be there to serve them from the beginning.

But don’t stop there. There is much you can do when they ask you to pitch for work as well. Don’t use the tendering process to do whatever it takes to win the work. Instead, be willing to challenge, give good advice and encourage them in the right direction. Tell them if you are not a good fit, because they may well come back to you another day or recommend you to a colleague. Consider the challenges that they face in selecting a supplier. Think about how they feel and the questions that they have. Make sure you address these through your documentation and presentations.

Even once they have offered you the job, consider their needs as you negotiate the contract. If they need to spend their budget before the end of the financial year, arrange early payment terms. Equally, if they have a cash flow issue, talk to them about spreading the payment.

Examine every step of the sales process and look for ways to improve. This will go a long way to making a good first impression — an impression that will help shape the relationship through the production phase of the project.

6 / Customer Service

Customer service in productionOnce you have won the project and production is underway, we often forget the client’s needs as we focus on delivering. Unfortunately, this is where we can often damage the relationship. We need to once again look at each step and ask ourselves what questions the client may have and how they are feeling about the process.

Take for example the initial kick-off meeting. Many clients have not done a web design project before and do not know what to expect. Even if they have, they have not worked with you and so are unfamiliar with your approach.

They are nervous about the project and uncomfortable that they do not know what is going on. It is our job to reassure them and give them confidence in our ability to deliver. If we fail to do that, the client will start micromanaging and that will damage the relationship.

Another key touchpoint where customer service is crucial is when we come to the design sign-off. Unlike ourselves, clients are not experts in design and yet we ask them to approve work.

With no experience in design and the pressure to get it right, it is unsurprising that customers ask colleagues. That, or fall back on their personal opinions. Once again they are uncertain and nervous, yet too often we do nothing to reassure them. Instead we get frustrated because we do not like their feedback.

6 / Customer Service

Once production is underway there are often extended periods of time when we have our heads down. Our minds are busy fighting with Internet Explorer or wrangling jQuery. At these moments, the furthest thing from our mind is customer service. We focus on delivering, but we cannot forget how the customer is feeling.

We need to keep communicating with our client throughout this production period. When they do not hear from us they can only presume we are not working on their project. They have no perception that progress is happening. As a result, they become more nervous about delivery. If we are going to prioritize the customer experience, we need to keep customers informed. We need to communicate at least weekly. We need to reassure them that the project is in hand and progressing.

There are many other touchpoints like these through the production process; points where we can provide a better customer experience, from helping the client with content to guiding them through launching the site. We need to always be aware of their needs and feelings. But customer service should not end when the project is complete. We should always be providing outstanding service.

Providing post-project supportHow we end the project is as important as how we run it if we wish to provide a great customer experience. Even if we did a great job on the website, a client can go away unhappy if we abandon them. A project debrief meeting is a great way of drawing the project to a close. It’s an opportunity for the customer to express any questions or concerns

6 / Customer Service

they have. It’s also an opportunity for you to show that you value their feedback and wish to continue working with them over the long term. You can discuss ideas that both you and the client had during production that were outside the scope. You can also give them advice about managing their website over the long term.

But even after the debrief meeting, you need to continue to offer outstanding customer service. Their experience with you will fade over time if you do not continue to be there for them. This means they will be less likely to recommend you or act as a reference. Make sure you check in with them often. Let them know about any new innovations that may be applicable to them and ask how things are going. Keep them informed through email newsletters and blog posts. It is your job to make them feel they are up to date with the web. If this is sounding a bit touchy-feely to you, then you might be misunderstanding what it means to be a web designer.

More than building websitesMany web designers see their job as delivering a product. We build and launch websites. This would make us part of the manufacturing sector. But in truth, we are part of the service industry.

When you go to a restaurant, you are not just going for the food. You can make food at home. You go for the service and the atmosphere. The experience matters as much as the final deliverable (the food).That is how customers experience working with us. The final deliverable is important, but so is the experience that goes around

6 / Customer Service

it. We need to put as much attention into shaping the customer’s experience as we do into shaping the user’s experience on our websites.

By using tools and techniques such as customer journey maps, we can better understand our customers. This allows us to start enhancing their experience. Yes, this kind of planning takes time and effort. But it is still more cost-effective than having to deal with unhappy clients and being forced to seek out new ones.

7 / Mobile

How to optimize clients’ stores for mobile

by Galen King Galen is founder and Creative Director of Lucid, a design and development studio based in New Zealand. Lucid specializes in graphic design and branding, as well as web design and development. Lucid is a leading Shopify Expert and has been designing, building and developing ecommerce sites on Shopify since 2006.

7 / Mobile

When designing and developing online shops, it is increasingly important to consider what devices your clients’ customers will be using — not only to view the site, but to order, check out and pay.

We can see in the stats from one of our client’s shops that mobile traffic now accounts for 50% of the visits. But what’s interesting is that, in terms of revenue, only 35% of visitors made a purchase on a mobile device vs. 54% on a desktop.

What does this tell us? Well, it may indicate a number of things: perhaps more people tend to just browse on their phones; or maybe the ordering, checkout and payment flow is not as highly optimized as it could be for mobile users.

So, how can we optimize our clients’ shops for the best browsing and ordering experience on all devices?

7 / Mobile

The first thing to consider is whether you intend to build a completely customized mobile experience — separate from the desktop site — or whether you will simply “optimize” the mobile experience. The latter is referred to as “responsive” design — because we are developing the site to “respond” to the different screen resolutions.

I’d prefer not to get into the debate over the pros and cons of responsive vs. dedicated mobile sites, but the trend for most small to medium-sized sites is to go with responsive design. This is definitely our preference at Lucid, and the focus of this article.

Things to consider when developing a responsive siteDo you need a totally unique experience on mobile devices? Or is it enough to simply tweak the layout for smaller screens? If you feel you need a totally different workflow for mobile, think carefully about whether responsive will in fact work for you. Or rethink your workflow. Keep it simple. Keep it intuitive. Small UX and UI modifications are often sufficient and perhaps you can rework certain areas of the desktop interfaces to better accommodate the mobile experience. If the site is so complex it won’t adapt to mobile, maybe it’s time for a refresh overall.

Might you need to eliminate some of the content on smaller devices to simplify the experience? If you do this, bear in mind you need to be careful not to remove anything that is vital to the overall experience and brand story. It’s

7 / Mobile

also worth considering whether your content is too heavy in the first place — even for larger screens. It’s important to have consistency, and “dumbing down” your content for mobile might not be in the end-users’ best interest — especially if they might eventually view the site on both mobile and desktop devices.

How will your navigation work on different devices? If you have a complex menu structure, perhaps with multiple levels of nested items, consider going back to your content strategy and working out a better way to simplify it overall. Regardless of whether the site is for mobile or desktop, we always try to avoid having more than one level of nested content — it’s easier to build and it’s definitely easier and more intuitive for users.

Are clickable elements easily tappable? A finger is larger than a mouse pointer and the element being tapped on will be obscured by the finger. Be sure elements that need to be interacted with are big enough and have adequate spacing on small screens.

How will you handle layout of grids and images on different devices? It’s common to change the number of columns depending on the screen size. But something important to consider is how this might change the layout and balance — try to avoid having “widow” thumbnails on smaller devices because the number of columns doesn’t divide evenly into the total number of items. This isn’t always possible, of course.

7 / Mobile

Are you using vector icons or icon fonts? If you’re not, you probably should be.

Are your images beautiful and crisp on retina screens? This is no longer the domain solely of iPhones and mobile phones, as retina is fast becoming standard on new laptops and desktops.

Definitely consider the impact on bandwidth and speed of large, retina-resolution images. This is tricky and there are no industry-standards or best-practices yet, but it appears that the srcset attribute may be emerging as the best way to handle this. The lazy way is to always serve the largest image you will require, but this causes unnecessarily overweight pages — which is especially hard on mobile data users.

Do you have big, bold, beautiful banner images or sliders? How will they look on a small screen? If they have words overlaid, consider rendering the type using HTML and CSS rather than embedding in the image so you can then optimize the text for different screen resolutions. Text “embedded” in the image could well be unreadable on small devices. On some of our themes, we actually move the text off the banner image on small devices and display it below so it can be large and bold without obscuring the image.

Does the site have a complex header, large logo, sidebar or information-filled footer? How will you strip this down and simplify it on smaller screens?

7 / Mobile

What can be hidden or collapsed into the “hamburger” menu? If you have important call-to-action buttons on the desktop site, does the functionality get significantly diminished if you hide this button by default? Should it live outside the collapsed menu?

Do you have hover effects on links or buttons? If these are vital to the user-experience, be sure to consider how this will work on touch devices that don’t have hover. Better yet, don’t rely on hover effects for key functionality and reserve for subtle enhancements only.

Are sliders and popups/modals optimized for small screens and touch devices? Even if your sliders have left/right arrows, it’s worth considering whether you can optimize these to work with swipes as it’s a nicer experience for mobile users — and navigation arrows can obscure the image on smaller screens.

Are forms optimized for use on small devices? Are field labels still visible and does the user-view zoom in appropriately when the user taps on a field to enter text? What about field types? Are the appropriate device keyboards triggered for each field — i.e., numbers, URLs, email address, text, etc.?

Is the add to cart, checkout, and payment workflow optimized for different screen sizes? This is crucial. If the customer can happily and intuitively browse the website but can’t easily add products to their cart and check out,

7 / Mobile

chances are conversions will suffer. Make sure you spend time going through the entire ordering workflow (right through to payment) to be sure it works beautifully on all devices.

Recommended readingAll the books by A Book Apart are excellent and highly recommended. But, in particular, we recommend reading Responsive Web Design by Ethan Marcote and Responsible Responsive Design by Scott Jehl. And, if you’re working in or running a creative studio (in fact, if you only read one A Book Apart book) definitely read Design is a Job by Mike Monteiro!

8 / Invoicing and Payment

How to make sure you get paid

by Kurt Elster Kurt Elster is a co-founder at Ethercycle and a passionate designer with an obsession for growing businesses. Chicago-based Ethercycle has expertise in both design skills and business acumen, specializing in high-end responsive websites. Last year, the websites they designed received over 12 million visitors and $10 million in revenue.

8 / Invoicing and Payment

I have a confession: I think invoices are exciting. I know, it seems like accounting drudgery, right? Let me open your eyes to the wonderful world of sexy invoicing. Yes, I said sexy. Invoices aren’t accounting nonsense, they’re a powerful tool that can demonstrate professionalism to your customers and most importantly: get you paid!

In the U.S., there are no laws around what has to be on your invoice. I recommend some standard things to start:

1. Your logo2. Your contact information3. The date the invoice was first sent4. When the invoice is due5. What the invoice is for, broken down into line items if necessary6. How to pay you7. Who it’s for

8 / Invoicing and Payment

I go one step further and include my business’s Tax ID to make record keeping easier for the client and reduce any potential delay in payment by having them ask.

If you’re a designer, you probably want to design your invoices and send them as one-off illustrator documents. If you send one invoice a month, that’s fine, but if you’re sending them weekly or daily, fight the urge to reinvent the wheel and use a cloud invoice software to save yourself a ton of time.

I personally use and love Hiveage, but Freshbooks is equally good, and Harvest is powerful, especially if you’re doing time-based billing in teams. Of the three, there’s no wrong choice. There’s more than just those three of course, but I’m only recommending the ones I’ve personally used.

As for payment options, you want to make it as easy as possible for clients to give you money so offer three payment options: Credit Card, PayPal, or check by mail. Your clients will likely pay in that respective order too. I love getting paid via credit card because it means the least amount of effort for me; Hiveage let’s me know I’ve been paid, and Stripe deposits the money in my checking account. Boom.

Alright, that’s the technical stuff. Now how about the fun stuff like email templates?

Here are the templates I use every day with my business invoices:

8 / Invoicing and Payment

New invoice notification

Account Alert: Invoice [invoice-number] is now available for payment — Hi [primary-contact-first-name],

Your invoice for [invoice-summary] is now available. To pay your invoice now, visit: [invoice-url]

If you need anything, or have any questions at all, we’re here to help. Just reply to this email. Thank you!

Payment receipt

Account Alert: A payment was received — Hey [primary-contact-first-name],

Thank you for your payment! Details below...

• Date Received: [paid-date]

• Payment Amount: [paid-total]

• Receipt: [receipt-url]

If you have any questions or comments, just reply to this email. Thanks again! In order to maintain the high quality of our work (and to provide valuable feedback), we ask that you fill out this short review form.

8 / Invoicing and Payment

Payment reminder #1

Account Alert: Your payment is due today. [Invoice [in-voice-number]] — [primary-contact-first-name], the payment date for your invoice is today. To keep [business-name] in good standing, please pay by end of day.

To make a payment now (and avoid service interruption,) please visit: [invoice-url]

Thanks for being a valued client!

Payment reminder #2

Account Alert: Payment reminder for overdue invoice [in-voice-number] — [primary-contact-first-name], the payment date for your in-voice has past.

To keep [business-name] in good standing (and avoid service interruption,) please pay now at: [invoice-url]

Let’s talk about an uncomfortable truth: overdue invoices. I send my invoices with net-15 terms. That means customers have 15 days to pay before the invoice becomes overdue. A client not paying is a risk we

8 / Invoicing and Payment

take as freelancers, but we can minimize risk. I never work without a minimum of a 50% deposit, and I always offer a 10% discount for clients who will pay 100% upfront (and at least half pay upfront.)

Here are some notes you may want to include with the invoice depending on the situation:

• “Once your deposit is paid, your next steps are to invite us to your Shopify store. Here’s instructions…”

• “Know someone else who could benefit from our service? Referrals are the best compliment you can give us.”

• “Want the latest news on improving your Shopify store? Sign up for our exclusive client-only newsletter…”

Do you see what we’ve built here? It’s more than just invoicing, it’s a semi-automated system that gets you paid with the highest level of customer service and professionalism. And that’s why I love invoicing.

9 / Your Business Toolkit

Recommended apps and tools

by Ben MacGowan Ben is the UI Evangelist for UK-based agency Creative Jar, with a passion for front-end technology, standards and process. Ben brings user interfaces to life using the best cutting-edge tools the web has to offer. He’s the organizer of Breaking Borders meetup and ConfConf — a conference about running conferences.

9 / Your Business Toolkit

Making sure you have the right toolkit at your disposal can make a whole world of difference in the final product. We are going to take a gander at an array of tools and services which could find a place in your virtual toolkit — all the way from concept to launch, and even a bit beyond.

CommunicationWhether you are working on your own, in a large team or with a client, communication is key in any project. It’s important to create a space to let your ideas and progress be documented and shared, so they can evolve and benefit from feedback. Be sure to pick a communication tool at the start of your project and stick with it throughout.

Basecamp Basecamp has been around since 2004 and had a big overhaul in 2012, which saw a whole heap of new features and a beautiful new interface introduced.

9 / Your Business Toolkit

With Basecamp you can invite your whole project team, start discussions, share assets and assign tasks with due dates. With access available via browsers, native applications on Android and iOS, and email support, it’s available when you need it to be. This tool will be a natural fit in your working day. And if it’s good enough for NASA, it’s good enough for your store — right?

SlackFor times when more rapid discussion and collaboration is required, there is a relatively new kid on the block which is picking up a lot of momentum. Slack is “team communication for the 21st century.”

Once set up, you can create channels for your teams to be a part of: projects, groups, topics, even products that are part of your product line. Channels include the ability to send messages (as you would expect from a chat platform), but also files, inline images and video, and integration with everyday services such as Twitter and Google Drive. This makes it the perfect tool for quickly sharing ideas, sparking debate and getting feedback throughout the development of your store.

InVisionAt some point during the production of your store, there is going to come a time when you have static visuals you need to store, share and invite people to give feedback on. Whilst the other services I mentioned already allow you to do this, InVision takes it further by allowing you to create interactive prototypes — setting up hotspots on the files that you upload.

9 / Your Business Toolkit

Invited users and team members can then leave design feedback directly on the design and create a conversation. This process allows for more rapid feedback response, but also collates it into a single location for your consumption.

WireframingBefore you put pen to paper (or in this case, start to decide on the colour palette and font combinations to use on your store), it is recommended that you spend some time making sure you lay out all your content first.

This is important not only to make sure that the hierarchy of information is correct, but also that the interface is usable for your users. At the end of the day, you want to make your customer’s purchasing experience as easy as possible so that they may come back again to purchase in the future.

BalsamiqBalsamiq is a rapid wireframing tool with both a desktop and web version. Create interactive prototypes and develop an idea of what your interface could look like quickly with handy tools. You can even drag and drop common UI elements from the Balsamiq User Interface Library.

Once you have created your wireframes, you can export them to share, collaborate and test with your clients and customers.

9 / Your Business Toolkit

There are of course many alternatives out there, but Balsamiq ticks the box of allowing you to quickly make your ideas come to life, iterate and move further down the line of creating your store.

DesigningDesigning is obviously one of the more crucial points within the production of your (or your client’s) store. It’s when you take your previously created wireframes and begin to bring them to life.

The industry is pretty dominated at the moment with two main options of web design software: Adobe Photoshop or Sketch. The likelihood is that you’ve already chosen which you will be going with (and it may be something different than these two), so we won’t go into these much more.

However, it is worth looking at the extensions and plugins which are available to improve your workflow when designing and moving into the development stages of producing your store.

Photoshop

• Font Awesome PS: Font Awesome icons, again right inside Photoshop for quick and easy access and use within your designs.

• Subtle Patterns: A library of subtle patterns fed directly into Photoshop for you to use.

• GuideGuide: Quickly generate guides based on your grid set-up and selection.

9 / Your Business Toolkit

• Duplllicator: Clone layers or groups and shift them horizontally or vertically easily with this extension.

Sketch

• Sketch-Button-Smith: Quickly generate buttons from text layers.

• Style Inventory for Sketch: Create an inventory of text styles (as you later would in your CSS) to keep consistency across your interface.

• Scale half/Scale double: Scale the currently selected object in half/to double its size. Handy for creating retina assets for your store.

DevelopmentDue to the open nature of Shopify and its development process, there aren’t many restrictions as to the development software of choice — and in this industry there are far too many for us to go into in this article.

Coda, Sublime Text, TextMate and Visual Studio are amongst some of the more popular options available. If you haven’t already got your weapon of choice, I would recommend checking those out first.

Shopify’s templating language of choice is Liquid, therefore it is handy looking for an editor which supports (or has an extension which adds support) syntax highlighting — this will ensure easier development and debugging on your part during the development process.

9 / Your Business Toolkit

• Liquid support for Sublime Text: Does exactly what it says on the tin.

• Django Template Language: The recommended mode for the best Liquid syntax support in Coda.

Back in 2012, Shopify released its very own Desktop Theme Editor to create the perfect companion to your code editor of choice. This app allows you to work on files locally and automatically keep them in sync with your Shopify store.

Compression and optimizationThroughout the development process, it is also important to think about the final output and performance of your web store. Studies have found that improving the performance of a website can increase customer purchases and conversions, so here are a few tips to help you with this.

Your store is all about your products, so most likely the interface you are producing features a lot of product imagery. This is fantastic; you should show your customers what they are buying. But this can also be one of the main causes of a poor performing website — large, unoptimized images can cause a lot of the unnecessary download times your customers are experiencing.

Using an image optimizer such as ImageOptim can heavily reduce the weight of your images by lowering the quality to an acceptable level (ever-so-slightly) and removing unnecessary meta data. Remember

9 / Your Business Toolkit

though, don’t just optimize your images during the initial development of your store — do this regularly, as over time you may add more images to your store which need to be treated as well.

Carrying on the theme of reducing the weight of your store’s assets, CSS pre-processors such as LESS and Sass are a hot topic at the moment. Not only do tools such as these make CSS a more colorful and functional language, the output is often compressed to aid performance.

Processors such as these can run directly from your Command Line, or there are a number of GUI applications such as Scout out there if you are not comfortable.

GruntFor the more advanced developers out there, look into Grunt tasks to compress and optimize your store’s template assets. Here are some to add to your tool kit:

Minify your CSS

grunt-contrib-cssmin

Minify your JavaScript

grunt-contrib-uglify

9 / Your Business Toolkit

Optimize png and jpg images

grunt-img

Minify SVG

grunt-svgmin

MixtureIf you are looking for something which simply does all of the above, with little set up and great results, then I recommend looking at Mixture. This Windows and Mac application is a great all-around tool with many features to aid you in your front-end development, some of those being JavaScript compression, CSS processing, and image optimization which we discussed above.

TestingThere is nothing more frustrating for your customers than trying to purchase a product through an interface which is broken on their device. Therefore, once you’ve got your store to a certain point within the development stage, it’s always a good idea to test your work across a number of different browsers and devices.

We encourage people to test in real-world testing environments rather than emulators — I personally lost count quite early on in my career of

9 / Your Business Toolkit

the number of times that things looked perfect within emulators and screenshots, but were not functionally working in the real-world.

BrowserstackBrowserstack is a great service which gives you instant access to all desktop browsers across a number of different operating systems. This removes the requirement for you to maintain a whole host of virtual machines.

As an added bonus, if you are already using Mixture then you can easily load your project and Browserstack directly from the tool.

Whilst Browserstack also provides access to a number of mobile browsers through emulators, it is always great to see if you can get your hands on physical devices. This can be a large expenditure for anyone, but there are services such as Open Device Lab which make accessing devices to test that much easier.

LaunchCongratulations! At this point, you should now be in a position to launch your client’s online store. By using some of the tools we’ve looked at above, the process should have been simpler and seamless.

One last recommendation though. As designers and developers, we should always be looking to improve the stores and interfaces that we ship (and your client will love you more for it). A lot of online commerce is providing a seamless experience even past the ‘Add to

9 / Your Business Toolkit

basket’ button.

Implement Google Analytics and Google Tag Manager throughout your interface to make sure you’re tracking user journeys, goals, and clicks on key call to actions. This will give you great analytical data about your design decisions and suggest ways of improving your customer journey all the way through to the point of order confirmation.

10 / Launch Checklist

Things to do before the site goes live

by Mat Mullen Based in San Francisco, Mat Mullen has been designing Shopify stores for the past four years and has plenty of experience working with small businesses that need help setting up their stores. During the day, he works as a Product Manager of Slack and sits on the board at The San Francisco Social.

10 / Launch Checklist

Preparing to launch a new site is typically the most exciting part of a project but it can also be the most stressful. It took a while to really get a good feel for all the potential things that could go wrong during a launch and try to anticipate them ahead of time. After working on close to 100 Shopify stores over the past few years, I’ve come up with a pretty good launch checklist that I use towards the end of each project.

I work with a mix of clients. Some are brand new to Shopify and are selling something for the first time, and others have existing stores that just want an updated theme. Depending on the situation, I have slightly different product launch checklists.

Here’s what I try to do before and right after I launch a new site. It doesn’t always follow the same pattern, but it’s a decent checklist of some of the more common things I try to take care of before a launch.

10 / Launch Checklist

First off, has the primary domain already been added to the site? If not, I need to make sure my client sends over their registrar info so I can easily login when the time is right and add the CNAME and A Records. I always try to make sure this happens a week before the launch date of the site because for some reason or another, registrar logins always seem to be forgotten.

Next, it’s time to QA the site to make sure that all the media queries are working and the site looks good on an iPad and iPhone. It’s one of the first things that a client notices so might as well make sure everything looks good ahead of time. It can be tedious, but clients love to send out their new site to friends and family, so better make sure it’s going to look good. Chrome Inspector is a great tool to help debug any issues you might encounter as you test your site.

If you’re building a new theme on top of an existing Shopify store, you’ll want to make sure all the navigation links are pointing to the proper places. This can be tricky when you’re previewing a theme because there’s only one master navigation section, so sometimes this needs to happen immediately after the site has been published.

Sometimes when I’m building a site, I’ll create custom page templates which don’t automatically get applied when the theme is published. It’s something I have forgotten in the past, so don’t forget to update the pages to the right collection, product or page templates.

Don’t forget to do a test transaction to make sure everything is working as planned with accepting payments and confirmation emails. With

10 / Launch Checklist

Shopify’s new responsive checkout layout, you’ll want to make sure that you’ve selected the “show storefront logo” option.

Want to impress your client with better looking notification emails? The default email styles for the Shopify confirmation emails are pretty bland, so I like to use the free Email Template Creator app to create better looking templates that are on brand with the store.

Once the store has launched, I always make a point of exporting the finished theme and saving it to a Dropbox folder just in case something happens to it down the line. I also recommend cloning the theme in the store so that there’s always an easy fallback if something goes wrong with the main theme.

Last but not least, I look through the original proposal that I sent over to make sure everything we discussed has been completed. Every now and then, you have to remind a client that some of the work they’ve requested wasn’t included in the original proposal, so it’s helpful to refer back to the original from time to time.

An important thing that I try not to forget is that my business has grown because of the positive reviews I’ve received. To make sure my clients are happy at the end of the project, I always try to make a point of making sure every client feels empowered to update their own site once it launches.

Once a site has launched, I schedule some time to either meet with a client in person or through a screenshare to make sure they’re

10 / Launch Checklist

comfortable updating their site going forward. I always make myself available to help with more complicated updates or changes, but I like to leave the product updates up to the client.

Once you’re all set and done, don’t forget to send over a request for a review! A good customer review is worth its weight in gold.

P.S. I’ve come to rely on a few helpful apps that I use during most projects. Maybe some of these will help you.

Recordit Recordit is a great app for taking quick video screencasts that you can send to your clients. It’s a super simple app to use and it’s free!

DropboxDropbox is my go-to file sharing service. It’s great for passing photos and mock-ups along and keeps everything in sync.

11 / Shopify's Partner Program

Working with Shopify

The Shopify Partners Team We help freelancers and agencies grow their business by building client stores, or by building apps and themes on Shopify’s platform.

11 / Shopify's Partner Program

One of the major decisions you’ll make as a web-based freelancer is the ecommerce platform you choose to work with. The decision will be different for everyone, and maybe you’ll even work with a handful.

Perhaps we’re biased, but a strong contender to consider is Shopify — currently used by more than 150,000 merchants around the world. We’ve built a network of thousands of professionals just like you in our Shopify Partner Program.

What’s that? It’s a team of international designers, developers and marketers working to make commerce better, and using Shopify’s platform to do it. We enable freelancers and agencies to build viable businesses around Shopify by giving them all the tools they need to succeed.

Our Partner Program is free to join. As a Shopify Partner, you’ll get access to our in-depth documentation, workshops and webinars,

11 / Shopify's Partner Program

marketing materials, private discussion forums, and early insights about Shopify’s roadmap and upcoming features. You’ll also have the opportunity to become a Shopify Expert where you’ll be listed in a marketplace where we send merchants who need help with design, development or marketing.

When you sign up, you’ll have access to 24/7 Partner Support, and you’ll be able to open up unlimited test shops to fiddle around with the platform, build a theme or app, or prepare your client’s site before it goes live. You can open up unlimited test shops to fiddle around with the platform, build a theme or app, or prepare your client’s site before it goes live.

Plus, you’ll earn revenue share for each client you bring onto Shopify (or each app or theme you sell). On top of the contract price you’ll earn from a client you bring onto Shopify, you’ll receive 20% of what they pay us monthly for as long as they remain on Shopify. For apps and themes you develop, you’ll earn 80% and 70% respectively from each sale.

Shopify’s platform is fully customizable and built using HTML, CSS and our Liquid templating language which is easy to learn (we’ve got lots of tutorials to help you out). You can sign up for our free Partner Program at shopify.com/partners. We would love to have you.

We’ve given you a lot of information here — hope you can use it!

When Shopify launched in 2006, we set out to democratize ecommerce. Along the way, we’ve expanded our mandate — our goal is to help people grow successful and lasting businesses on Shopify.

That doesn’t only include merchants. That includes the designers and developers who have built their entire businesses around Shopify, bringing us quality merchants but also building a sustainable career for themselves.

We’re amazed by the talented partners we’ve met along the way. They constantly expand the boundaries of what’s possible on our platform, and challenge us to continually improve and innovate.

Thank you to the authors who contributed to this book. Your industry intelligence is invaluable to us. We know a lot of newcomers will learn from your expertise, so thanks for sharing it with us.

The Shopify Partners Team is made up of a bunch of people who are passionate about the work they do and the people they do it with. From us to you: commerce isn’t going anywhere, so let’s enjoy the ride.

Thank you

Copyright © 2015 by Shopify

shopify.com/grow@shopifypartners

grow. Vol. 1

No part of this book may be used or reproduced in any matter without written permission from the publisher, except in the context of reviews.

Every reasonable attempt has been made to identify owners of copyright. Errors or omissions will be corrected in subsequent editions.

Copy editors: Keir Whitaker, Dan Eveleigh, Courtney Symons, and the Shopify Partners Team

Designers: Travis Hines and Serena Ngai

Printed and bound:Flash Reproductions, TorontoTaylor Brothers, Bristol

Hustle and hustle hard. You’ve got this.

This guide has been lovingly assembled to help you grow your freelance design or development company by building ecommerce websites for your clients.

shopify.com/grow