LaCroix Design Co. Journal

Far From Finished

2015-05-21T15:45:00Z

As it turns out, finding contentment is not one of my stronger traits and this is especially evident when it comes to design. There’s always been the excitement when something Michael and I have made is released to the world. That moment is fleeting once we begin to dissect every minute detail in search of opportunities for improvement.

Critique is important and I wouldn’t have it any other way. Although, this was quite problematic when I began my career as a print designer and everything that I designed was more permanent. As a web and product designer, I delight in the flexible and iterative qualities of the medium.

In the business of client services, you do not always get the opportunity to continually improve upon everything that you ship. Very often, the client is happy, the project ends, you get paid and the thing that you created goes on without you. Sadly, these projects miss out on the beneficial iterations that happen after your have been able to assess how the visitors or users interact with the product.

Luckily, we have had the pleasure to work with a number of clients who allow us to return to previous projects and tackle new challenges. I’m consistently assured that these experiences will continue to improve if we never treat them as finished. Nowhere is this more evident than in our personal projects. For example, our own website is never finished and we are constantly trying to improve the our visitors' experience.

Nearly a year ago, I wrote a post for the launch of our new website about how a simpler solution provides us with the freedom to iterate. Our current website utilizes Middleman to generate a static site upon deployment and this provides a fantastic venue for exploring and implementing new solutions. Earlier this year, we made some improvements to our website. In this post, I’d like to share the decision making behind these changes and the results that we’ve received.

The Homepage Welcome Section

First of all, no other place on the site has received more copy revisions than the first section of our homepage. When you tackle a wide variety of design problems with a range of solutions and tools, describing your business in one sentence is far from easy.

For the first time in a long time, I feel pretty good about what we have on there now. We love to design solutions that establish a connection and allow our clients to engage the audience in a very human way. We decided this copy needed more emphasis, so we adjusted the typography accordingly.

Our previous background for this section was my desk. I believe that we have a nice workspace and I do tend to keep a tidy desk. However, this was far from being a compelling image for the homepage. We explored a number of solutions for this that included illustrations, solid colors, SVG animation and we eventually decided to use video. We love the personal proximity with which people use mobile devices and found that this created a visual connection to what we value. We also explored various methods of tinting the video to match our pink brand color, but we will cover that in a future post.

Featured Work & Services Section

Another area of our site we were never content with was the featured work section of the homepage. For a while, Michael and I were pretty set on trying to contain these in an interesting shape. After exhausting nearly every option we could think of, we eventually determined it was not the best solution and opted to go with a layout that is more consistent with the case studies on our site. In the end, this provides visitors with a more cohesive experience.

Our previous Featured Work and Services sections (left) compared to the updated design (right).

Previously, we also used an angled container for our services section. On a micro level, we enjoyed this concept, but it did not quite fit with everything else on our website. We determined that our previous image of my workspace might be appropriate in this space. It connects to the collection of tools and devices that we use solve our clients problems. We also made some typography changes to the headers in both of these sections.

Improving Visitor Engagement on Blogs & Case Studies

Blog posts drive a lot of traffic to our site and this has made writing them a much more enjoyable process. Plus, the increased traffic makes examining the analytics more interesting. We found that many visitors were spending time on the site to read the entire post, but were bouncing off of the page once they finished.

Blog posts and individual case studies now featured recommendations to facilitate exploration.

Thus, we decided to implement a solution that encourages visitors to explore more content. Each post now concludes with a call to action followed by previews for three other posts. We also decided to add a similar experience to the individual case studies pages. The result? We are now seeing visitors land on individual blog or case study and diving deeper into the site.

Keeping the Conversation Going

Since our website is deployed as a static build, commenting functionality is not a feature of our blog, nor do we really desire to manage comments. However, we do want to keep the conversation going, and Michael and I want to be available for any questions or responses. For this reason, we built a Twitter intent option into our post structure.

Readers of our blog posts can now engage in the conversation on Twitter or Designer News.

We have also found that some of our blog posts garner a lot of readers from Designer News. As a result, we decided to add a posting option so that our readers can continue the conversation through comments on Designer News.

Increasing Email Newsletter Signup

In August of last year, we added a subtle newsletter call to action to the footer of our site. Although we began to see subscribers trickle in, this was in no way a successful solution. Therefore, we decided to redesign this call to action to give it more visual weight.

Our previous newsletter signup call-to-action.

Our new, more prominent newsletter signup call-to-action.

The more prominent call to action has more than doubled our list, and we are regularly adding new subscribers. This, in turn, leads to a new challenge of keeping up with our monthly delivery. Due to a busy workload, we have been a bit lax over the past several months, but we plan to pick back up soon.

We’re Still Far from Finished

Michael and I have an ongoing Trello board where we regularly add new ideas and discuss solutions for improving our website. In doing so, we are also gaining clients who learn to value the process and set aside budgets for continual improvement.

Streamlining Our Proposal Writing Process

2015-03-13T16:50:00Z

As designers and developers, it is our innate desire to spend time making things. Nevertheless, when you are running your own business, there are many other responsibilities required before, during and after a project.

One of these essential duties is writing proposals. After nearly 10 years of running LaCroix Design Co., the role of proposal writer is still one of my least favorites. A great deal of thought and effort goes into every proposal we send out. As a result, many hours are typically spent compiling notes from meetings and phone calls into a well-formulated document that not only proposes the most optimal solution, but also outlines the best process for arriving at that solution. Needless to say, it can be quite disheartening when a proposal is rejected or not even considered.

Proposals, however, serve a crucial role in the relationship between the client and designer. It defines scope, boundaries, expectations and, of course, payment. As a result, writing proposals is a task that cannot be avoided. In our studio, we are always seeking to optimize processes for a more efficient workflow in every business aspect. Therefore, we have sought to develop a proposal writing process that is more streamlined. Although we may continue to iterate on this process as time goes on, we have arrived at a solution using Git, Markdown and CSS that works very well for our small studio.

Where We Started

When I first began writing project proposals, the studio was mainly focused on providing print design and illustration services. Indesign was the obvious tool to create fantastic looking documents that were on-brand. Although it is poor practice, I often did all of my writing and editing in the application as well.

Later on, it became beneficial to have a second set of eyes review each proposal. At this time, Michael had begun working with me on web projects and had zero familiarity with Indesign. We were both already using Markdown for taking notes, so it seemed like the obvious transition was to also use this for the drafting phase. We would take turns editing the Markdown file. Then, I would transfer all of the content block by block into the Indesign document. Although the Markdown syntax clearly delineated the different elements, this was still an arduous task.

We also tried out Bidsketch, Quote Roller and several other web applications designed at solving the proposal creation issue. While these are all fine pieces of software that provided some nice features, none of them really seemed to fit our needs. The editing process was still sluggish since content was separated into different admin sections and often the WYSIWYG editors caused more problems than they were worth. Every time we would abandon one of these tools, we would return to our Indesign process.

Our Current Process with Git, Markdown & CSS

Approximately one year ago, we were approached by a number of prospective clients that required a fair amount of proposals to be delivered within a short amount of time. It was at this time that we finally decided we had to find a better process. We were already writing and editing our proposals in Markdown, so it only made sense that we should utilize the strengths of the syntax.

Since we were already using Git for collaborating on website and software projects, using it for documents seemed like a sensible choice for this new process. Today, I begin by creating a draft of the proposal using Markdown — I prefer to use IA Writer Pro for this and Michael prefers Atom — and commit it to a private Github repository. We then have a Slack notification set for any updates to this particular repo. Michael can then pull the document and provide any edits that he sees fit. We are able to continue this process until we have solidified the proposed solution.

Once the editing phase is completed, we use Marked 2 to create a final document. One of Marked’s key features is the ability to style your content with a custom CSS style sheet. We slightly modified the base stylesheet that came with the software to fit our brand’s proposal style. Additionally, with a snippet of HTML, we are able to create a cover page for each document that displays our logo using an SVG.

<div class="cover">
    <div class="cover-logo">
      <img src="../assets/images/logo.svg" alt="LaCroix Design Co." />
    </div>

# Project Name
### Client Company Name

##### Prepared For: Client Name
*13 March, 2015*
</div>

Marked offers a few key features that allow us to dynamically create some elements of the proposal. For example, a table of contents can be inserted anywhere in the document using the software’s special syntax.

<!--TOC-->

The same also applies to page breaks.

<!--BREAK-->

However, we are primarily automating page breaks through the apps settings by adding page breaks before every h1 and h2 element. Through the settings, we are a adding dynamically created headers and footers as well.

These are the export settings that we are currently using to create our proposals.

Once we are ready to send over the proposal, we output it using the paginated PDF feature and quite often deliver it to the client using HelloSign. This allows them to digitally sign the delivered proposal with ease.

Export using Save PDF (paginated) to include page breaks as well as the header and footer.

I have put together an example proposal using Monocle Ipsum and AIGA’s Standard Agreement for Design Services. The files are available via the following links:

Benefits

The main benefit of this workflow has been timed saved. We are now able to go straight from the editing process into a final proposal, and no longer have to copy and paste content into an Indesign file. Furthermore, many of our proposals are often read online and include links pointing toward recommended services. We are able to utilize the Markdown syntax to generate these links, which is far easier than applying them using Indesign’s interactive hyperlinks panel.

Adding visual elements to the proposal also became a lot easier. With Markdown, we are able to quickly add in figures with captions to help explain the solution or provide context to the scope of the project. As you will see in the example, we are creating tables in markdown for the project timeline. Timeline tables provide a great visual reference for our potential clients. Creating tables like these in design software would be much more time consuming, whereas our current solution allows for easy editing and implementation.

Future Enhancements

As with nearly everything we work on, we are far from finished and are always looking to further iterate our solutions. We are eventually looking at breaking the reusable pieces of our proposals out into partials so that they can easily be inserted into a document. This would include basic contract definitions, intellectual property provisions, interactive provisions and basic elements such as a signature form.

Marked has a special syntax for multi-file documents which would allow us to begin testing this process out. We have also contemplated creating a local build tool that would provide more customization for this process. A major advantage of creating the reusable components is that we could make changes and have it automatically applied to all future proposals.

Finally, our initial stylesheet relied heavily on Marked’s base CSS. In the future, I’m certain that we will look into further customizing and expanding the styles to create better presentations for our clients.

Let us know if you have found any ways to streamline your proposal writing process and, as always, contact us if you have any questions about ours.

A Craft Redirect Plugin for Obsolete URLs

2015-03-11T13:00:00Z

During a recent buildout of a Craft website, a client wanted the ability to automatically redirect to an entry’s new URL if (1) its slug has been revised and (2) a visitor landed on the old URL. For example, if an entry started with the URL:

http://example.com/first

…but its slug was later changed to make it:

http://example.com/second

…then visiting /first will redirect the user to /second. To do this, we developed a plugin which, on a request that is about to return a 404, will:

Query for the most recent revision with the same path prefix and that now defunct slug.
Fetch the current, live revision of that entry.
Redirect (302) to that entry’s new URL.

One thing to note is that the query is intentionally isolated to the same prefix. In the above example, it would not redirect to an entry in a section that has a different URL prefix, such as /blog/.

Installation

Download the plugin from https://github.com/lacroixdesign/craft-obsolete-url-redirect, unzip, then move the obsoleteredirect folder to your Craft plugins folder. Install it via the Craft Control Panel as you would for any plugin. Finally, add the following snippet to your 404 template file:

{% do craft.obsoleteRedirect.check() %}

That’s it!

Caveats

Obviously you will need either Craft Client or Pro, as the Personal edition does not have revision functionality. Additionally, this plugin does not track URL changes at a structural level; e.g. changing your blog section’s prefix from /blog/ to /news/.

It has not been tested on localized websites, so any testing and feedback in that realm would be greatly appreciated.

Open Source

The plugin is free and open source, and available on GitHub. Feel free to open issues, pull requests, or send me a tweet with any feedback or suggestions.

ÉSTAINE's Kickstarter Campaign

2015-03-10T21:30:00Z

Last year we had the privilege to work with entrepreneurs Zofia Wosinska and Jeremy Picker to design a brand identity and responsive website for their new venture, ÉSTAINE. Now they are in the process of utilizing Kickstarter as a platform to launch their first line of luxury accessories.

ÉSTAINE is using high fashion as a medium to fight cancer. Their Italian-made silk pocket squares, scarves and ties feature the colors and patterns of dyes used in cancer diagnosis. Beyond fashion, these products are intended to educate the community and aid those who are battling cancer. The unique designs are birthed in scientific research yet tell the stories of cancer survivors.

With 14 days remaining, ÉSTAINE has already received pledges for over 70% of their goal. However, the project will not be funded unless they receive at least $20,000 in total pledges. Thus, we encourage you to consider supporting their Kickstarter campaign or visiting the ÉSTAINE website website to learn more. We are excited see everything that ÉSTAINE has in store and thrilled to have been a part of helping them launch their business.

A Study in Craft

2015-02-12T20:30:00Z

Recently we had the opportunity to build a new responsive website for a client who had a myriad of short- and long-term goals, many of which would evolve as their vision gained traction. The first objective was to build a publishing platform that would include multiple sets of content types, with isolated author access to entries based on user permissions, the type of content and authorship. Additionally, the pieces of content needed a relational component in order to easily reference each other throughout the many facets of the website.

Given the initial requirements and the need to accommodate an array of future unidentified features, we immediately thought of using Craft. We had used it previously for a handful of smaller projects and absolutely loved the entire experience.

Why Craft?

Craft is a CMS that works wonderfully with structured data, and it doesn’t make any unnecessary assumptions about how that data will be used on the front-end. It provides a head start by supplying the common features needed for a publishing platform such as:

User accounts and fine-grained permissions
Content entry with drafts and versioning
An assortment of built-in field-types
A robust query builder
Routing & pagination

Most importantly, it has a powerful API to extend its functionality for your project’s specific needs which we’ll be discussing in future blog posts.

The Publishing User Experience

While it’s important for us to enjoy building products with Craft, it’s even more important that our clients enjoy using the CMS. Thankfully, the client feedback from previous projects has been excellent. Navigating the CMS’ admin is simple and straightforward, while managing content is extremely easy.

A feature that was especially loved is the Live Preview feature, which displays a side-by-side view of the content entry page and the actual output that visitors will see. This is notable because as content and data is entered, this feature of Craft will render the end result as the content changes. Here is Craft’s official promo video of it in action:

Live Preview in action. Really convenient.

Want More?

During the project, we created a few libraries to extend Craft’s functionality or connect to external services. The plan is to extract some of these from the project and open source them in the coming weeks. We’ll be following up with more blog posts when we do, as well as tips on Craft configuration and deployment. Check back here or subscribe to our monthly newsletter to receive updates.

Everything considered, Craft was a wonderful choice for this project and we highly recommend taking a look at it for your next endeavor. We certainly can’t wait to use it again.

Always Have a Solid Backup Plan

2015-02-03T13:00:00Z

This past autumn, I once again had the opportunity to work with long-time friends and clients, Relient K designing and producing merchandise for their upcoming tour. Celebrating the 10-year anniversary of their best-selling album, MMHMM, the tour was slated to be a special event for both the band and their fans.

In addition to newly designed merchandise, the members of Relient K wanted to reprint classic merchandise from the timeframe of their original record release. This led me to an exploration of art files from 10 years back. Many of these files predated LaCroix Design Co. and I was amazed to find that I had retained so many of the design files and records from this time. We were successfully able to manufacture the classic apparel and the tour was a huge success.

Since starting LaCroix Design Co. in 2005, we have been victims of a burglary and numerous hard drive failures. The fact that I had retained a collection of files from ten years back was more of a testament to luck than any full-proof backup plan. However, we’ve never been content leaving this up to luck alone.

From the beginning, we have made deliberate decisions to ensure that work we create for our clients is systematically backed up and available for years to come. This is an overview of the redundant system we are using to keep all our files safe.

System Wide

Our backup plan starts with individual computers. This ensures everything on our systems is accessible at any given time. Should we experience a system malfunction, hard drive failure, theft or some other disaster, these backups are available to help us get up and running quickly. These system solutions work in tandem with the other services we outline to provide redundancy.

Time Machine

We start with Time Machine, the built-in backup feature of OS X. This feature retains a copy of our of our files, as well as a feature that expresses how our system looked on any given day. These backups are synced via our wireless network and stored on two separate hard drives.

Backblaze

Time Machine is a terrific feature, but it is backing up the files to disks which reside at the same physical location as our computers. Thus, we require something that will allow us to backup the bulk of our files to remote storage.

This is where Backblaze excels. For $50 a year, Backblaze will continuously backup an unlimited amount of data from you computer and any drives attached to it. This provides us access to multiple versions of our files through its online interface. Or, we may request the shipment of a hard drive with all of our data on it.

Although this backup process is not a fast as a locally attached device or Time Machine running on our local network, Backblaze provides us with a sound piece of mind knowing that our files are continuously being backed up off-site.

Design Files

We find it important to create an additional level of backup for our design files. Very often, these files can be quite large and a loss of the editable versions would require an inordinate amount of time to recreate.

LayerVault

For many years, we stored all of our working design files on Dropbox so that we could access them from anywhere. We have since replaced this with one of my most relied-upon online services, LayerVault.

LayerVault provides remote version control for all of our art files and a slew of other vital features. Years ago, we attempted to version-control our design files using Git, which resulted in oversized repositories. Thus, we were thrilled to discover that LayerVault offered this crucial service and provided file previews for each version. We no longer have to save versions of a file out as final-1, final-2, etc.

In addition to automatically versioning all of our design files, LayerVault allows us to share project files internally or with an external team. As a result, others involved in a project will always have access to the latest design files and assets.

Furthermore, LayerVault retains all of our project files and allows us to leave and rejoin a project at any time. Thus, we are able to remove a folder of project files from our computer and rejoin the project at a later date. Doing so will, in turn, sync all of the design files for a project back to our computer.

Vault Drive

As an added layer of backup, I keep a large hard drive of every LaCroix Design Co. project connected to my computer. As projects are completed, they are organized in folders by year. Additionally, font files and other assets are regularly archived on this drive. Since the drive is attached to my system, it is also backed up using Backblaze. While I imagine that this drive may one day be replaced by Amazon Glacier or something similar, but this current setup has been working out very well.

Development Files

As our design process evolved from building static designs in traditional design applications to a process of iterating, prototyping and building interactive experiences with code, versioning and keeping backups of development files has become immensely important.

Repositories

All of our development projects are version-controlled using Git. We host the majority of these repositories publicly and privately on GitHub and utilize Bitbucket to host repositories for our smaller projects that we wish to keep private.

Documents & Meeting Notes

Documents for all projects are stored on Google Drive and also archived along with all design files onto our Vault Drive upon the completion of each project. Evernote is used to record all meeting notes, which are then shared internally.

If it is not obvious by now, our backup process is very important to us. Being able to provide files and assets years after a project is over allows us to continually exceed the expectations of the clients that partner with us. Feel free to comment on Twitter if you have any questions or need clarity as to how we are using these tools and services.