Category Archives: e-commerce

Digital Zaza LLC

My first business: Digital Zaza LLC

So I started my first company. Yay! It’s honestly nothing too crazy, more formality than anything else. My buddy who is working for an ecommerce startup got in touch with me and he wants me to do some Magento web development work. I’m pretty pumped for the opportunity to work with him and his awesome sounding team, and hopefully there is nothing but boatloads of money in our future.

This is the first time I’m working for a legitimate customer so I needed to make sure my business was legitimate. Although I could have just accepted check written out to my name, I decided to start an LLC for several reasons. One of the major reasons is that I have to pay taxes, and that means that I have to keep my personal finances separate from my business finances. I don’t want to be paying for business items with personal credit cards, etc. Having my own business account makes the whole tax process much simpler.

Another major reason for the LLC is that you get an Employer Identification Number (EIN). EIN’s are essentially the social security number of your business. When you have an EIN you are much more real to both other prospective customers and the IRS. What I mean by that is if a company wants to hire me, they will want to hire me as a company. They want me to write them a professional invoice. They want to see I am a registered business. Companies have to pay their own taxes. My ability to invoice, and their ability to write a check out to my LLC, allows for a paper trail that makes taxes easier for the company, the IRS, and myself. No one wants to write a check to some random dude and then explain to the IRS that they paid thousands of dollars to some guy Joey from New Jersey.

Another reason for the LLC is one that you hear about often. I’m limiting my personal liability. Generally an LLC separates my personal finances from my business finances. If I mess up in some disastrous way I will lose the capital of my company, but I generally will be covered from people trying to come after my personal finances.

Finally I wanted an LLC because it puts me in a potential position for future growth. While I don’t plan on this business getting too big, there always is possibility for growth. If my friend decides to dump more work on me than I can physically do or if I happen to be given work from another company, I’ll probably want to consider hiring employees or bringing someone on as a subcontractor. Having an LLC in place makes that process fast and much less painful.

You may actually be interested in some other form of business such as a sole proprietorship, S-Corp, etc. There are a lot of options for starting a business depending on what you’re trying to get into. But if you want a similar setup to what I have then I would probably recommend two links. The first is a step-by-step guide of what you need to start an LLC in the state of NJ. It’s good for general reading and getting a feel for if an LLC is right for you.

Staring an LLC in NJ

The best link is the actual state page where you can sign up for the LLC. Generally government websites are garbage. Information is all over the place and you have to spend hours or days trying to figure out where things are and what they mean. Once you figure it out you often have to go to some random building during some very specific time and then wait for days or weeks in the mail to get whatever it is that you need. This website and this process were the complete opposite. It couldn’t be any easier to setup an LLC then to just follow along the step by step process on this state website. So a huge shoutout to the New Jersey government for getting something right. It’s important to make something as beneficial as new business generation so painless and simple. Thank you.

NJ State Website for LLC

The site lets you search for and choose your business name, nominate your Registered Agents, sign up for an EIN, send in all the information that you have to, sign all documents online, and make payment via credit card right there all on the same site. At the end of the 15-minute process you have the certificate of formation, business registration, and EIN. Congratulations. You have an LLC.

With that information you can go right to the bank and open up a business account with whatever bank you prefer.

At this point in the post I should probably mention that you definitely might want to consult an accountant or lawyer to make sure you are doing this all correctly. Or you can go with a site like LegalZoom to get you up and running. I had some knowledge of these topics from going for my MBA and I also want to get a better understanding for law since it is such an important part of business. That’s why I went through the research to figure out what was appropriate for my situation. Often times it will be cheaper to have someone else do this work for you or prevent you from making costly legal or accounting mistakes.

For me this whole LLC process happened quickly. The time between my friend reaching out and me starting work was really fast. I didn’t have much time to think of a name. The name in this case isn’t too important as it mostly will be only used on the check that my customer writes. I don’t plan on actively marketing for work, but I want the LLC in case I ever get the opportunity to work or grow. I wanted a name that was pretty broad that I could use for a variety of work. While I’m doing web development for an ecommerce website today, I could definitely see myself doing engineering or business work and would want a name that could cover some general fields. I didn’t want Joseph Butewicz LLC because that’s boring and kind of implies a one-man shop even if I did have a lot of employees. I also didn’t want anything stupid like Innovative Technology Solutions LLC or Expert Engineering Consulting LLC. I hate corporate talk. I also wanted to make sure the domain name was available so I could easily add a nice website in the future. Since I had only a couple of minutes to think of something, I had two ideas. The first was Pro Peach LLC. The word peach is dear to me these days. The second was Digital Zaza LLC. Joey Zaza, or Zaza, or Za is a nickname of mine that goes way back. I kind of liked how Digital Zaza sounded. I like the word Digital, as technology is probably the area I most want to be involved with. Pro Peach LLC kind of really sucks so I went with the only option I had left lol.

I made sure the domain name was available and I picked that up as well. I decided to build a simple website for the business which I’ll talk about in detail here.

Sometimes when people have a business, especially a new one, they clutter their website with all sorts of corporate talk. Useless pages of text. Terrible stock images, etc. You’ve seen a million of these sites and they are disgusting. Just because you have a website, that doesn’t mean you need to fill it to the brim with pages and pages of worthless content. If anything I would argue that you always want to be evaluating your website (and your business, and probably your life as well) and be trying to remove unnecessary clutter that is there. Unclutter your page. Make your message clear. Since I don’t have much content, I wanted my site to be very simple. I don’t have lots of clients. I haven’t done any work for this company. Everything of interest deals with my personal programming life. I’m not sure if this company will continue with ecommerce development work or if it will morph into something else. I don’t know what my company will be. All I know is I wanted an LLC for the reasons previously stated. I just want to build awesome things with other people. Maybe a way to contact the business would be good.

So with all of those thoughts and ideas, I created exactly what I wanted to. I used Digital Ocean’s $5/month hosting plan, which is overkill for this site, but the cheapest you can really buy. I installed a LAMP stack as I have done many times before and got to work building the site.

There were eight things I wanted in the site.

  1. Name of the company
  2. A single sentence, almost like a slogan, giving you the slightest idea of what this is all about
  3. A link to my blog, specifically to this post. Remember, my company isn’t anything yet. It’s two days old, and while it has a customer, I have no idea what it’s future is. Everything that is of interest is related to my personal life.
  4. A way to contact me
  5. I want these four things in the center of the website, both vertically and horizontally.
  6. A font that plays off of the digital theme.
  7. This orangish, pinkish, salmonish colored background. I wanted to make a site with this color background for some time now and this was finally the opportunity lol.
  8. A favicon, that little icon at the top of your browser tab

The concept was very simple. As always the execution ends up taking way longer than expected. It’s remarkably difficult to center something both vertically and horizontally using CSS. Sure, I’m being a little dramatic, but it’s such a common thing to want to do and it always is so difficult. Instead of running through all of the different solutions for this problem, I’ll just say that I used flexbox. I’m happy enough with this rendering properly on the majority of devices. I doubt many people will visit this page in the near future, and I expect those people that do will have a reasonably up to date browser. This is a pretty bad assumption for a web developer lol.

Finding a font to use was pretty easy. I’ve used several font sites in the past and can recommend Font Squirrel, Da Font, and 1001 Free Fonts. There are other sites that you may use. I found a couple good fonts but my favorite was Silkscreen. Shout out to Jason Kottke for the Silkscreen font, specifically Silkscreen Expanded Normal. It’s exactly the right blend of digital and modern. Get Silkscreen here

For some reason I was having issues rendering this font on all of the different browsers I was testing. I must have been making some sort of syntactical mistake. The best way to get fonts to render on all of the devices is just to use Font Squirrel’s webfont generator. You upload your font and the generator will produce all of the different types of fonts you need along with the CSS that you can copy and paste over to your style sheet. Why waste your time writing it from scratch, and then wasting a bunch of time figuring out where your syntactical error is, when you can just copy and paste?

As for a way to contact, I really didn’t want to get away from the simplicity of the site. A contact page may have been alright but it’s kind of impersonal and definitely doesn’t fit with the idea of the site. I decided to find a free email-hosting site that would use my domain name and just link that email in a contact link on the site. Surprisingly Zoho is one of the few that has free accounts. It’s ad free too, which is great. You get up to 10 users with 5 GB storage per user for email. It’s exactly what I wanted for this site. If the site works well then I can see myself paying for their services will several other small sites. I signed up for the service and quickly had myself an email address that can send and receive to the digitalzaza.com domain.

Selecting the background color was easy enough. I had a really good idea of the color that I wanted. I googled around a bit to pick out some nice supporting colors. I usually use Google Image search for general ideas. If there’s a specific color I like then I’ll grab it via a color picker in something like GIMP. I often play around with the different color tools that show up when you search “color calculator,” etc. in google. Eventually after a little trial and error I had all of the colors that I wanted.

As for the favicon I just wanted the letters ZA in the Silkscreen font on the salmon background color. Favicons can be a pain in the ass to make all of the different sizes needed to support all of the different devices and browsers that use them. It’s best to just use one of the many great tools out there. Shout out to Philippe Bernard for the Real Favicon Generator. It takes your one image and makes all of the icons you need and generates all of the CSS that you need. Tools like this help accelerate the speed at which great things are built.

So that’s mostly it for the idea behind the business and the site. Putting it all together you get something that looks like this.

Digital Zaza LLC
Digital Zaza LLC

You can check out Digital Zaza by clicking this link. If it looks absurdly simple, that’s pretty much the intention. Over time this website may evolve into something more substantial, and that will be dictated by the growth of the business. But for right now I’m just a guy with an LLC who wants to build beautiful things.

Cheers,
Joe

Why I needed a macro lens

Joe’s Postcards, a WooCommerce Site

After building a big time website on the Magento eCommerce platform, I wanted to build a smaller eCommerce site using a platform suited more for an individual or small business. After researching the platforms that were available, I determined that WooCommerce had the best combination of costs and features. WooCommerce is a plugin for WordPress, a content management system that I have worked on in the past. My intention for this project wasn’t to build another WordPress website. I was hoping to get some experience with a new technology, but with such a large percentage of websites running WordPress I was willing to go through the development process again.

Since this website would not be getting massive amounts of traffic, a small hosting plan such as Digital Ocean’s $5 per month for 512MB RAM and 20GB SSD is a reasonable option. I added it to my hosting account and got to installing the LAMP stack of Linux, the Apache HTTP Server, the MySQL relational database management system, and the PHP programming language. Once that was setup I installed WordPress. WordPress is a free and open source content management system that many people use to create blogs, although it is capable of making some great websites. After WordPress was installed I installed the WooCommerce plugin. At this point I pretty much had an eCommerce store minus all of the content and styling.

The website I would be building was a website for my dad to sell postcards on. The site would be very simple. There would be a home page to welcome the user, a store, cart, checkout, account login, and a contact page. The simplicity was great but it left me with a single opportunity to translate the postcard onto the digital screen in a way that was personal. I tried to accomplish this in several different ways, the first being to open up the website with a lot of whitespace.

Although the stock WooCommerce theme is usable, there are many changes that I wanted to make to the design. I debated whether to completely develop my own theme or use one of the many themes that were already available, several of which were free. I thought the Klasik framework theme and the Mystile theme were both a good starting point. I liked the Mystile theme, which can be seen below. I was looking for a theme that was open and had a lot of whitespace and had a responsive design that would adapt to tablets and cell phones.

Stock Mystile WooCommerce theme
Stock Mystile WooCommerce theme

I ended up choosing the Klasik framework because I thought it would allow me to make the fewest changes while accomplishing the look that I was going for. I installed the theme and got to work customizing the theme. This is what the Klasik framework looks like out of the box.

Stock Klasik WooCommerce framework
Stock Klasik WooCommerce framework

I created a logo. It’s a postcard that has “Joe’s postcards” in a script font called PlumBAL. The green stamp in the upper right corner is a nod to the one-cent Benjamin Franklin stamp from the Series of 1902 (Second Bureau Issue) stamps. While I was looking through the postcards for inspiration for the design of the website, I noticed this green Ben Franklin stamp appear many times. The date of this stamp also coincides with the golden age of postcards, the time during the early 1900’s that many post card collectors agree is the age when the best and most desirable post cards were created. It’s definitely a stretch that anyone unfamiliar with postcards will ever be able to notice the meaning of this color green for the stamp, but hopefully some experienced post card collectors may get the reference.

Series of 1902, Second Bureau Issue stamps
Series of 1902, Second Bureau Issue stamps

While I was going through the post cards I realized that I wanted to represent them on the screen in a way that captured depth and texture and evoked emotion from people who might not be familiar with post cards. To me post cards are very personal. They are pieces of paper that contain lovely little messages between loved ones, often those traveling to new places and having some of the greatest times of their lives. When picking out post cards to photograph for the site I was equally drawn to the handwritten sides as I was the sides with pictures. Postcards are intimate pieces of paper and ink and I wanted to convey that on the screen. I realized I would need an appropriate camera lens to capture this and I purchased a Tamron 90mm f/2.8 macro lens for a sweet deal.

Why I needed a macro lens
Why I needed a macro lens

The images on post cards can evoke certain emotions based on the location they are from or the moment they celebrate. There are many good post cards for the holidays so I wanted to have a slider on the main page that had appropriate holiday images for the holidays. I set up a slider and used some PHP to automatically change the images based on what season it was. Pumpkins for Thanksgiving, soldiers for Veteran’s Day, turkeys for Thanksgiving, and neutral images for when neither holiday was close.

Holiday themed home page
Holiday themed home page

The storefront that wanted for the post cards had to include some detail about the image and the image of the card itself. I thought about several ways to display this. Postcards are very visual so I considered making the store to be dominantly visual and only include text details after hovering over the images. I decided against this because I wanted to give the store a more standard look. I didn’t want anyone to get frustrated with an unfamiliar layout and abandon the shopping page. The right side of the shop has a product category list and a search box that the shopper can use to find specific cards. There is also a sorter at the top so that the shopper can sort by newest card or price.

Familiar store front
Familiar store front

Once a user clicks on an item, a larger image is visible along with a longer description.

Cool cat postcard
Cool cat postcard

The image can be clicked on again for a full screen view to show high detail, which is something that is necessary for a lot of buyers of post cards. The product categories and search bar are still available from this page. A related products section displays below the item.

Meow!
Meow!

The rest of the site is basic and simple. The cart and checkout are easy to use and standard as to what you might see on many other sites.

Checkout page
Checkout page

The shopper has an option of creating an account with the site. If the shopper does sign up for an account then they will be able to login to check order status and set addresses for faster payment in future transactions. A contact page is very simple. There is a form that the shopper can fill out to send an email to the owner of the site.

Contact page
Contact page

Emails are automatically sent to buyers throughout the order process via a simple email server and settings in WooCommerce. Payment is accepted via credit card or PayPal via the PayPal payment gateway.

There were large differences between building an eCommerce site on Magento and WordPress WooCommerce. Magento takes a lot longer, is more programming intensive, a lot more money to develop and maintain, but it provides much more flexibility and power for selling online. Still the WooCommerce plug in has enough power to create a beautiful site that is more than capable for an individual to small business to sell product through. Companies such as Harley Davidson, New Balance, Cosmopolitan, and Entrepreneur all use WooCommerce to sell their products online. There are stories of businesses running tens or hundreds of thousands of products on WooCommerce, of course on the right hardware to manage that storage and bandwidth. WooCommerce might be fast, cheap, and “only a WordPress plug-in” but it is plenty capable and often suitable for many businesses that decide to use a much more expensive and complex platform such as Magento.

You can check out the final website at Joe’s Postcards.

Nizanta Banner

Nizanta Jewelry, a Magento e-Commerce site

My friend, Suhrid Thacker, decided to leave the corporate world of finance and start Nizanta, an e-commerce company selling high quality hand made Indian jewelry. He researched the various e-commerce platforms that are available and decided that he wanted to run the business on the Magento platform, a content management system for e-commerce web sites. Magento, owned by eBay, is a platform used by hundreds of thousands of retailers, including Nike, Christian Louboutin, Ghirardelli Chocolates, Rosetta Stone, and many more. It’s the king of the medium to large business e-commerce platforms and a reasonable choice if you can afford the price and manage the complexities.

Building a Magento website is not cheap. There are two versions of Magento available. Magento Community is an open-source version which is powerful enough to run most stores, especially one starting out with a smaller product inventory. Magento Enterprise comes packed with many more features and scales better than the Magento Community version but it costs $16,000 per year.

That’s just the software cost. Then you need to get hosting, pay for someone to build the site, and pay for someone to maintain and run the website for you. Hosting costs are cheap enough but to hire a developer to build a reasonable Magento e-commerce site will cost a bunch. Suhrid contacted several developers in the United States and he was quoted between $10,000 and $60,000 for a Magento website, a price that reflects that it will generally take months to properly develop a Magento website. A simple Google search will show that some developers charge $100k-$200k+ to have a Magento website developed. It’s not cheap. Rates for developers from India were around $2,000 to $10,000 for a Magento website, but you have to be able to manage the language, time, cultural, communication, etc. issues that come with outsourcing development to one of the lower labor countries. Both approaches can be justified but that’s a separate conversation.

The critical thing to keep in mind when deciding on the Magento e-commerce platform is that you will have to hire someone to continually change and develop for it or you will have to do all of that programming yourself. You don’t just build the site and never develop for it again. You constantly are tweaking, improving, managing, and scultping the site. So you will have to spend a lot of time programming (time that may better be spent marketing or solving other business problems) or hire a developer (Magento developers can cost $100s/hr). When you agree to using the power of Magento you are agreeing to a development intensive business. However the power and customization of the platform will pay dividends if you can get sales to a reasonable level.

As a new business owner, my buddy would have to spend a huge chunk of money on product inventory (24k gold jewelry tends to be expensive), shipping, marketing, accounting, and million other things that a new business owner has to deal with. He initially decided to develop the site himself to try to save on costs and he got some help from friends but he was happy to hand off the development work to me and let me have at it. It was a pretty good match. I didn’t need any money but I wanted the opportunity to build something cool. I told him I would get him to a point where he had a functioning website that looked good and would turn it over to him before I left for my 45 day trip to Europe, which left me a month and a half or so to learn a new platform and get all of the work done.

My buddy had already looked around and found a Magento theme called Ultimo that he liked for both its looks and responsiveness to adapt to mobile platforms. When he turned over the project to me the website was hosted, Magento installed, and the theme installed. The website was not fully up and running and there was no customization to anything but I had a starting point to get to work.

I got to work breaking down Magento and learning what I had to. The admin panel is an impressive content management system. There are a bunch of headings that lead you to settings to control everything from product inventory, currency, shipping, taxes, payment gateways, emails, even CSS customization. It will take you a couple hours/days just to go through all of the options and see what is available straight out of the box. Since Magento Community is used by so many developers there are often solutions for whatever problem that you have available on Google. Magento also has a bunch of extensions that you can download to add features without writing any code. If you want to change the style of your website you can download one of the many available themes that are available. The community and options for tweaking, downloading, and coding are limitless.

Generally when it comes to working on a platform such as Magento, I like to avoid installing any plugins as it is not usually worth the hassle of installing some module that accomplishes what could be accomplished with some CSS or PHP or whatever. Adding plugins can lead to worsened security, slower performance, information being stolen, or a whole big list of things, whereas I know what I am getting when I manually add code to CSS or a PHP file. I generally will install a theme and customize the theme because for a small cost (free to $100) you can get a good starting design that is responsive to many different devices and has hours of CSS and JavaScript and PHP work done for you.

The process of developing for Magento involved a lot of setting up the platform through the admin panel. I generally think that if you can accomplish something through the admin panel in a platform like Magento then you should, as this is more likely to work following an update to the platform or theme versus changing the CSS or PHP and then having to verify that those changes still work on upgrade to a new version. There are best practices that should be taken when developing for Magento and it is recommended that they are followed when developing to avoid wasting time later on.

Once you think you have everything set in the admin panel, the next step is to move on to the CSS customization. At this point in the project I had already made some necessary changes to CSS and PHP to address problems that the admin panel presented. At this point I am willing to make whatever changes that I have to with CSS and PHP code to get the site running exactly as I want it.

Development is moving along smoothly when Magento decides to drop a bomb on the project and release version 1.9 of Magento Community. It’s usually great to get a new version release, but mid-development means that you have to get to a good breaking point, back everything up, install the new version, migrate everything over, and remove the backups. This process usually takes longer than expected and leads to broken websites that give the developer a long list of problems to fix. In actuality, there was some of that, but the migration process was remarkably smooth. When you follow the directions and everything works you feel pretty good and gracious. Programming always (usually) works as it’s supposed to, just not as you think it should.

Eventually, after a few more days of solving other problems and designing the site as perfectly as my buddy and I wanted it, including secure payment integration, email notifications, fixes to mobile design, batch loading products, and everything else, the website was in a reasonably usable form. At this point the goal is to test the website on different browsers and devices and try to break it and note what has to be fixed. Several days of breaking and fixing and adding new features that pop up and before long it’s time for me to head off on my trip to Europe and turn the website back to Suhrid. Most of the work is done. The website looks great, and when all the product information and page content is loaded, it will be ready for primetime.

During the development process my buddy set up to have the rest of the site wrapped up by a company called The Integrated Penguin, or TIP, a digital creative agency that produces quality work. Since my trip they have polished up the website. You can check them out here (The Integrated Penguin – TIP). Suhrid finally decided to go live with the website a couple weeks ago and so finally I am able to make this blog post and show off what I spent many long weeks building during the summer. I hope you enjoy the clean website that showcases the gorgeous hand crafted Indian jewelry as much as I do, and if you like any of it then feel free to buy. The Magento platform will be happy to process your order. The Nizanta website can be accessed via this link (Nizanta Jewelry).

I don’t have any screen captures of what the site looked like before TIP got a hold of it. They did a good job adding some nice design elements to the page. Overall there is a little of tightening up to do, but all of that will be accomplished over time. Here are some captures of what the Nizanta jewelry site looks like.

Bold and clear
Bold and clear

The site is full of white space. The jewelry and marketing message really stands out. Sliders are popular for many websites these days and I feel they provide a great way to change a pages look and feel with little effort. Great for seasonal items, or posting new inventory.

The theme of whitespace and simplicity continues in the product page. I don’t really want there to be anything in the way of the customer viewing the jewelry. No names. No prices. First look at the jewelry, and then if you like a piece simply mouse over for the price.

Beautiful jewelry shopping
Beautiful jewelry shopping

Or if the user wants to know more information click on a product for added detail. Product images can be hovered over to show higher definition of the beautiful hand crafted jewelry. Descriptions are short and useful. The necklaces product descriptions have a size sheet that the user can use to see what the necklace would look like when it is on. The descriptions describe what the 24 karat gold foiling means.

Descriptive and useful
Descriptive and useful

After the customer is done shopping, products can be added to a cart for final viewing before checkout.

Cart is simple and easy to use
Cart is simple and easy to use

Checkout process is simple enough. Both credit cards and PayPal can be accepted. Email notifications are automatically sent out to the buyers throughout the buying process. A login is available for return customers. Newsletters, gift cards, social links, etc. are all taken care of.

The building of nizantajewelry.com was a little painful at times but I learned a whole bunch. The end result was a great website that will scale as the business grows.