If there is one thing I have discovered about myself in the last couple of years, it must be that when I really commit to mastering a certain skill, even getting obsessed over it, I know nothing is impossible. Learning something new is probably one of the most inspiring things I can think of.
For the development of previous websites I hired people for almost everything, except for the visual design. From the wire-framing to the front-end development and from the HTML to the SEO, I used to outsource it all. To make sure the people you hire will do a great job, you need to get really involved, just to be able to check if they are giving you the best of their abilities. I’m a perfectionist and that is exactly what I demand from the people I work with. Having this kind of control feels good to me but it can also be very time consuming and therefore, very costly.
Ever since the existence of Dutchicon I‘ve picked up quite a few skills left and right and I’ve asked myself:“Is it possible for me to create this new website from scratch all by myself?”. The answer: “Let’s see how far I can go”.
This post is not meant to be a guide on how anyone should build a website from scratch. It is more like a case study; the choices I made, the skills I applied and the lessons I learned while I was creating the new website for dutchicon.com.
Wireframes
In the beginning of a website development you need to quickly visualize your ideas without wasting any time on design issues. I started with sketching out a structure of the pages I would need. It is very important that you have a general idea of what your goal is with a website. My goal was, and is, to focus on two things.
The first is to tell people I am a custom icon designer whom you should hire for your next icon project. The second goal is that I want to tell people they can purchase large icon sets for a very reasonable price. I’ve been using this hybrid model for years, but on my previous site it was more about the icon sets you could purchase, rather than my client portfolio.
I decided to show both the custom work and the icon sets right from the homepage. You will be able to navigate to these sections in both the header and in the sidebar navigation. Easy peasy to find, a visitor will instantly learn what this site is all about. That was the general idea. Now I had to create all these pages to tell my story and explain what dutchicon.com has to offer.
Obviously, as an icon designer, I’m accustomed to working with Adobe Creative Cloud, especially Adobe Illustrator. In the past I have used Illustrator for wireframing; not ideal, but a no-brainer for when you use Illustrator on a daily basis. You just create your pages on artboards and export the artboards as separate PDF files. Then drop all exported PDFs together in Adobe Acrobat and create the in-page linking. Easy. One main disadvantage though, is that every time I made changes to the Illustrator file I had to relink all the pages in Acrobat again.
Having the Creative Cloud subscription made it an obvious choice to try out Adobe XD to create these pages and links. The website experience would be emulated with no hassle and the links would remain after adjustments in the main design document.
When I create wireframes I try not to ignore the design altogether. In the wireframing I already make rough decisions about the layout and the font size for example. Nothing final yet, but for the general idea I feel the rough layout is indispensable, because you need to know if the content will fit in your page and match your desired user experience.
Webflow
About a year ago I discovered Webflow, a drag and drop website builder. Webflow is awesome. The first site I created with Webflow was hemmo.nl. This was a bit of an experiment on how to create such a website, how it handles SEO and I needed to know if the CMS was user-friendly enough. It became a one-pager, but a perfect project to learn all kinds of new stuff.
Normally a visual designer can’t wait to jump into Sketch, Photoshop, or in my case, Illustrator to create the pixel perfect visual designs for the website. Because I already had a good layout in my wireframes I decided to start in Webflow immediately and create a good prototype and probably the website itself. I wouldn’t recommend this working method to others, unless you are just like me, solely responsible for the Visual Design, the Front-end Development and the User Experience.
As a visual designer I have always been insecure about learning to code in HTML and CSS. Although Webflow is a drag and drop platform, I learned that it has a similar coding logic as programming in HTML and CSS. It’s pretty straightforward to implement custom code as well, so my fear of coding started to diminish.
Buy-button
Webflow has a lot of tutorial videos, also about including a buy-button from Foxycart or Shopify. Because I completely transferred the Webflow prototype into a fully designed and functional website, the Buy-Button seemed the only thing still missing.
Foxycart seems more suitable for the hardcore coder, you can customize about anything, provided that you know exactly what you are doing. The Shopify buy-button has more limitations in the looks and feel department, but the sidecart looks amazing. Another buy-button I have considered was Selz, which really looked good and had great functionality. One of the main factors to consider in choosing the right buy-button for me was the ability to have the option for VAT exemption available. This is indispensable to European companies like Dutchicon. Selz had not rolled out this option yet. Bummer.
Besides being too complex for me, Foxycart seemed not as secure as Shopify for instance. I asked a developer friend to take a look at Foxycart and he was able to adjust the pricing in the HTML and paid nothing for my icon sets. WTF! Finally I decided to go with Shopify, also for the numerous apps and integrations.
Shopify
I still had to deal with the Shopify buy-button limitations. I couldn’t upload my own web fonts or adjust the design of the sidecart and the VAT exemption app wouldn’t work properly.
There were three things I could do: 1. Have peace with the buy-button limitations; 2. Ignore all the design work done in Webflow and start over by choosing a Shopify theme; or 3. Let someone create a customized Shopify theme.
The third option was by far the most expensive option, but I believed not too expensive. It was the perfectionist in me who decided to go for the customized theme.
I even considered switching to Wordpress for the same reasons I chose Shopify eventually: lots of options, integrations and tutorials. I already invested quite a bit of my precious time in both Webflow and Shopify. To start over again with another platform was a bridge too far and I stuck to Shopify.
With mastering Shopify I would be able to realize one of my other ambitions one day: easily start a new website selling physical products like posters, T-Shirts and whatnot containing my icon designs. Not now, but maybe somewhere down the road.
Outsourcing
Although I understood the basics, I considered myself too much of a newb when it came down to HTML, CSS and other programming languages. I started searching for Shopify experts on Upwork and found Expert Village Media with a 96% customer satisfaction, the highest available. I interviewed a guy, Amit from India, living in New York City, and he described to me exactly what his approach to this project would be. I went for it and it turned out to be more complex than he anticipated. The reason for that was mainly my own perfection and determination to get what we agreed upon. I also knew it could take forever to keep Amit and his colleagues adjusting the site until it would match the Webflow prototype exactly. I decided to take a crash course in HTML and CSS to save these guys some work. I don’t think I could completely create a website from scratch, but I understand the code exactly when I read it and I am able to adjust accordingly. It is SO much fun. The main thing I liked about Amit and his company is the fact he took pride in the project and would do anything to satisfy his client. Kudos to Amit and the other developers.
Shopify apps
Besides a proper working platform to sell your products you will need some extensions to improve the functionality of your website. You need to capture emails, insert extra metafields, implement the VAT exempt option, have multiple currencies on the product pages, and perhaps a referral program or an Instagram feed. Thousands of options to choose from, everything at a cost of course, so don’t go overboard with this.
Emailings
For Dutch Icon Unlimited, another website I own, we have been using Mailchimp and Mandrill for a couple of years now. Although I really think Mailchimp looks great and you have a lot of options to enable you to create emailings which will match your brand’s design, I feel this platform is far too complex for me. Automations are especially difficult to get a grip on. Once I discovered Campaign Monitor I knew that was exactly what I needed from an Email Service Provider. A great and intuitive user experience and you can easily create your own email templates, but more importantly, it is very easy to set automated emails and connect to your audience that way. You can even create transactional emails if you like. Most apps from the Shopify App store will integrate with both Mailchimp and Campaign Monitor.
Creating products
There is no need for a Shopify website if you don’t have any products to sell. Dutchicon sells icon sets which are available as digital downloads. Yay, there is no shipping involved, which will simplify things tremendously. Selling digital products can present other complexities though. When I created the licensing model for this website, I was inspired by a different field in design; Font Design. In my opinion there are a lot of similarities between selling fonts and selling icon sets. The main similarity might be the fact that you are selling to the same group of people. People who really care about the quality of their visual design and user experience know that high-end design elements will make their projects look smart and professional.
Sites like fontshop.com, myfonts.com and fonts.com (notice the Pika styled icons in their user interface) all have multi-user licensing models in place; probably a little more complex than Dutchicon's, but the idea is the same: you pay more when more users benefit from your product. This only seems fair, so I decided to implement such a model myself.
On my other website, unlimited.dutchicon.com, we only offer SVG downloads because it makes things simpler. Obviously we get a lot of questions and requests about offering other formats as well, but generally most people are fine with using SVG files. What we also learned is that our client base consists mainly of high-end user experience designers.
In order to make Dutchicon.com appeal to a wider audience, I have chosen to offer 10 different file formats, namely: Sketch, Ai, PSD, SVG, PDF, EPS, PNG, CSH, Icon Font (CSS, EOT, WOFF, TTF and SVG) and IconJar files. You can probably imagine that it took quite a while to create all these files, but it was definitely worth it. Dutchicon has something to offer for all workflows. Marketeers can drop PDF icons in their Powerpoint slides; developers will be able to implement inline SVG icons or the icon font; and visual designers can drop icons in their Sketch documents.
Dutchicon offers two different icon packs for each icon set: 1. the Supreme Pack, which contains all the previously mentioned formats; and 2. the basic pack, which contains the design essentials Sketch, Ai, PSD and SVG files. I also created a free sample, which is like the Basic Pack but with only 60 icons.
Eventually every icon set got two types of packs and 5 types of licenses. Plus the free sample. In Shopify I installed the Digital Downloads app to make the files available after payment. The major annoyance was that I had to upload the same zip files for all these license options separately. Weird stuff but at least the app is free. I have considered using SendOwl for its ability to appoint license keys, but it’s not for free, the checkout journey is completely different and I had to manually upload all products to my SendOwl account for some reason. No, let’s stick with the free app for now.
Creating more content
Besides creating the main content, which are the products obviously, I also made all these product images, custom icon project images, home images, unique headers and body copy and, as you probably have noticed, a couple of blog posts. I really think writing blog posts gives you the opportunity to connect with your audience and learn from them. Obviously, it should be very useful in attracting all kinds of visitors and therefore in generating more traffic to your site as well. In my previous Dutchicon website we had written a couple of articles, about 5 I think, but pretty soon we just stopped writing. So before I decided to start writing blog posts again I was very hesitant and wondered if I could do it, and more importantly, if I could keep doing it.
There are several people in this icon design niche who are blogging about our field of expertise. Scott Lewis for instance once interviewed me for the IconFinder blog, which was fun. But when you take a closer look at the IconFinder blog posts, it consists mainly of product reviews and a lot of design inspirations; images pulled from their contributors’ accounts or Dribbble. Another Blogger in the field I really like is Justas from IconUtopia. Great resource for the beginner icon designer. I like to read his stuff but most of his posts start with an apology for the fact it has been too long after his last post. There are also a lot of 'best icons of the week’ posts, just containing images. The conclusion I draw from this is that it’s hard to stay focused and disciplined enough to burst out a useful blog post about icon design every week.
So I really had to think about how frequently I would publish and what I should blog about exactly. Is it about product reviews and interviews, filled up with icon image posts, or will I position myself as a teacher, like Justas?
On the Smart Passive Income blog Pat Flynn wrote: “Don’t write about what you want to say, write about exactly what your target audience wants to read.”
I’ve tried that before and so do the other icon design bloggers I suppose, but for me that just doesn’t work.
It is really fun to write, but only if I can write what I WANT to write. It’s either a blog with exactly that or no blog at all I’m afraid.
Launch
Launching a new website can be a very stressful moment, or actually it is more like a period of time. You have been busy developing your ideal platform for your customers to visit and to buy your products. Intuitively, once the development of the website is finished for the first release, you just want to relax for a moment and do nothing for a while. Well, you can’t.
I have a lot of things on my mind so I have to keep things simple. After I make sure the online SEO is up to par, there first will be a soft launch. Some DNS records will be added to the dutchicon.com domain so the domain will point to the Shopify website. When it’s live, the extensive testing begins. Does everything work as it is supposed to? The email signup, automated emailings, buying a product, the payment gateway, discount codes, all the pages and links. Test, test, test and test again. When all seems to work you can ask a couple of people you know, preferably from different parts of the world to download some or all of your products. Make sure to include a discount code with 95% off if you really want them to actually help you out or promise to refund afterwards.
Ok, so everything worked fine. Now I had to prepare for the hard launch. I have read several blogs about launching a new website. Again, I want to keep it simple. I used How to Get The Most Out of a New Website Launch Announcement by Tim Brown on Noupe.com as a simple guide.
1. Write a press release.
Press Release Jet seems pretty good to spread the word for your cleverly written press release. Mainly for backlinks though, because I realized for a niche site like Dutchicon.com I shouldn't have the illusion that TechCrunch will pick up the great news. So I have to manage expectations.
2. Send an email to your current customers and fans.
Email is one of your best tools to reach out to people, way more effective than social media for instance. I already had collected a list of a couple of thousand emails, so I made sure the list was clean (I used BriteVerify) and wrote the email.
3. Write posts for social media.
Facebook, Twitter, Pinterest and Dribbble are the most important channels for Dutchicon right now, so let’s focus on those. First thing to explore more after the launch will be Instagram, because it is very popular and visually oriented.
4. Write a blog post announcing the new website.
You are reading it right now. I have chosen to share all my thoughts, discoveries and reasons in this insanely long article.
5. Compile a list of 200 of the best blogs in your field and send them an email with the press release.
It was hard enough to select 50 of them, to be honest. The goal is eventually to create some buzz around the brand. And just like with the press release, manage expectations.
6. Create a link with ‘Check out the new website’ in your email signature.
Easy to create, so there is no reason not to do it.
All done?
Releasssseeee….
Finally. Now I will be able to relax for a bit.
Wait… we’re not done yet, not by a mile.
The struggle begins
Now that you think that you’re all done, you realize it only has just begun. I need to keep on blogging because Google loves new content.
The chance the website will have immediate sale increase on its own is next to none. I will be conducting experiments with Google Adwords, BuySellAds, Facebook Ads and Twitter Cards to get traffic to dutchicon.com.
Sitemaps should be created and added to the Google Webmaster account.
The list of fixes and nice-to-haves is already growing at a vast pace. I should stay on top of it all. Don’t lose focus and keep exploring new options.
Conclusion
Creating an e-commerce website from scratch has been a very intense experience. I wouldn’t recommend taking on a project like this if having some free time once in a while is important to you. Looking back I would definitely do some things differently. I would spend less time mastering Webflow for example, although I learned a lot and it has been fun.
If you have enough budget or you are willing to partner up with skillful people I would advice to do so. However, chances are these kind of people are nowhere to be found or just not available at the moment.
Nevertheless I'm quite happy to have taken most of these steps from beginning to end myself. I have a complete notion about the structure of the website. When I need to change things, from adjusting design elements to solving simple coding issues, I will be able to do this completely on my own. The site will have the ability to evolve gradually without me having to hire expensive developers for every single task. Time is the price you pay for learning new things. If you stay focused and determined, the reward will be fulfilling.
I hope you enjoyed reading this article and found it to be useful. If so, please share it with your friends and followers. Thank you!
Leave a comment