chapter 10

Your Business Toolkit | Recommended Apps and Tools

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.

Communication

Whether 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.

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?

Slack

For 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.

InVision

At 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.

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.

Wireframing

Before 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.

Balsamiq

Balsamiq 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. 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. 

Designing

Designing 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.
  • 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.

Development

Due 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.

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 optimization

Throughout 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 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.

Grunt

For 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

Optimize png and jpg images
grunt-img

Minify SVG
grunt-svgmin

Testing

There 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 the number of times that things looked perfect within emulators and screenshots, but were not functionally working in the real-world. 

Browserstack

Browserstack 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.

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.

Launch

Congratulations! 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 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.


About the author

Ben MacGowan 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.

Next chapter

11. Launch Checklist | Things to Do Before the Site Goes Live

3 min

Grow your business with the Shopify Partner Program

Learn more