Introducing Jason Wiener’s new website

When Katie and I set off to create Good Good Work, before we even had a name, we were looking for legal advice. We wanted to start a social enterprise that was prefigurative, legally sound, and reflected our radical values. Katie and Jason had been moving in similar circles in Colorado for a while (most specifically, platform cooperativism) and his name kept popping up. It didn’t take us long to realize that we’d be great collaborators.

We decided to work with him to design our business, you know, the one that eventually evolved into the Good Good Work Co-op. Our relationship was built on mutual aid and in-kind trade. As he set up our business we began working on his website, which we all felt didn’t express his professionalism, skill, and leading edge practice. 

Here’s the home page of the old site.

A new Vision

The first step in refreshing a website is taking stock of what’s there and envisioning what could be there, or what’s missing. Jason and his team had a lot of ideas for what they wanted the site to be. We sat down with them over multiple meetings and determined what their vision for the site was long term. Through this process we also began mapping out the site, it’s pages and content. This was a process of looking at what was on the site and determining how that existing content would translate into the new design. This was also a process of determining a road map towards the greater vision for the site.

The bigger picture, longer term vision for Jason’s site is to have a place online that supports the cooperative movement. Jason and his team are dedicated to promoting and facilitating change where it’s most needed. Their work is fully inline with our work in that way. If we support Jason’s team, we’re supporting better legal standards for the folks out there doing good work.

Our job is often taking a vision, in this case Jason’s vision for a dynamic interlinked resource hub, and subtracting until we find a starting point from which we can begin to build that vision. This “version 1” is a lot like base camp at the foot of a mountain. We are aiming for the top, but we need to start somewhere (plus we want to launch something sooner than waiting for it to be perfect later).

Distributing project management

To accomplish and track this we set up a content tracking spreadsheet which determined the pages, their content, and the current status of those pages’ progress. We then split them into V1 and V2. Ideas that were out of scope for V1 were recorded for V2. We (almost) always build a content tracking sheet for our projects. It helps us in a few ways:

  • it keeps everything in one place
  • it allows us to work asynchronously
  • it sits inside Google Drive so we never have to worry about project management software and learning (or paying for) new systems
  • it gives team members the authority to change things on their own as needed
  • it reduces the stress on project leads by distributing knowledge

This process allowed us to stay focused on building something that we could launch in the short term while tracking our larger goals.

 

Style Guide

Once we understood what we were building it was time to define a style guide which we would follow when designing the website. This included colors, website features, and typographic treatments.

This became the literal guide to visually redesigning the website. Home page mockups were made to get a sense of how elements might appear together on a page, and once approved we began to develop the WordPress theme. We used Theme Foundry’s amazing Make theme for our base.

A note on branding

Our aim in branding is to re-establish what we mean by “brand”. It’s less about sales, and it’s not just the logo and color palette. A brand is about the total experience people have with you and your company/group. It gets into your norms and language and the photographs you choose to represent you. It’s about how you treat people and how they feel when they walk away from an experience with you. We covered some of this in the brand guide and some of this in our conversations with Jason and Steve.

Check out some of the home page mockups from the first design pass:

jason wiener site mockups jason wiener site mockups jason wiener site mockups

Pro tip: We love using Make. Many of our clients come to us with WordPress messes on their hands. Often the Visual Composer and a bunch of other plugins have been installed and are either in conflict, are soon to be in conflict, or are unsafe because they’re out of date and updating their plugins would mean creating a conflict. Make has a lightweight and flexible page builder that we adore but avoids all the messy code conflicts.

Photography

Jason really wanted to have some new photographs for his site and his business. At some point he reached out to us to find a good photographer (Katie was a photographer in a former life) who could capture his professional approachable brand. We set him up with a few folks and he chose Jonathan Galbreath of Brightly Creative. Jason’s team and he seemed to really hit it off and the pictures are the proof.

Jason Wiener, international man of cooperation  Steve Kelton, legal aficionado extraordinaire

Putting it all together

As the content was being generated, edited, and adapted from the old site we were also developing the WordPress theme on a development server. Our copywriting and editing team consulted with the Jason and his team on their content, our designers created mockups and style guides, and the developers turned it all into code. We were able to rapidly develop the site in parallel through cycles of internal communication. Content would update layouts, layouts would change design, and design would move theme code in different directions. We tracked these changes through Gitlab’s issue tracker and our content spreadsheet.

In the end we were able to deliver a highly polished refresh to a stale website. You can see the new site over at jrwiener.com.

Thank you

A big thanks to Jason and Steve, and our own internal team of talented Good Good Workers for making this project a huge success! We’re looking forward to continuing our relationship with Jason’s firm as they develop more resources for the cooperative community and make legal services accessible for the rest of us.

The post Introducing Jason Wiener’s new website appeared first on Good Good Work.

Legislator Lookup WordPress Plugin

There is nothing better than building a tool that can be used by many people. We were approached by New Futures to build a website a few months ago for their Smart Start campaign. One of their requirements was a tool to help their visitors look up their state representatives. We accomplished this by building a plugin for WordPress which New Futures has agreed to allow us to release to the public. Their investment in this plugin will now increase in value every time someone uses this plugin! Download the zip, check out the code on GitLab

This plugin provides a set of shortcodes to build pages that look up US state representatives using Open State API data.

The [legislator-lookup] shortcode creates an address input field that uses Google Places API to auto complete addresses.

The [legislator-results] is used to display the results of the search.

Currently both shortcodes need to appear on the same page to function properly. Here’s what they look like in the editor:

The legislator-lookup shortcode accepts two attributes:

  • placeholder which changes the default text in the address input.
  • submitValue which changes the default submit button text.

The legislator-results shortcode accepts one attribute:

  • accordion which controls the representative result boxes appearing collapsed and opening one at a time. Default is true, set to false to disable.

The legislator-results is an “enclosing” tag, meaning it can be wrapped around content in the editor. Anything the shortcode wraps will appear next to the results. This can be used to give users a script to follow or some context for what to do after they search.

 

The post Legislator Lookup WordPress Plugin appeared first on Good Good Work.

Karass Website

After creating The Karass Inn’s logo I set to work creating a website for them. They used checkfront.com to handle the booking side of things so I was left to simply create the presentation side.

http://thekarassinn.com/

Screen Shot 2015-12-27 at 11.34.47 PM

I used the Make Theme with only slight modifications to the CSS. Mainly to create the pop-ut Book Now button. The site looks great on mobile too:

Screen Shot 2015-12-27 at 11.35.02 PM

The address, phone, and email at the top work incredibly well on mobile. By using proper Uniform Resource Identifier schemes with the links available applications will launch when they are clicked. You’re probably already familiar with mailto: which almost all email links use, it looks like this:

<a href=”mailto:TheKarassInn@gmail.com”>TheKarassInn@gmail.com</a>

While the phone uses tel: like so:

<a href=”tel:8028755878″>(802)-875-5878</a>

So when you’re on a phone and click the link it automagically launches the phone application and makes the call.

I love being able to add these little details!

If you’re ever in Chester Vermont you should stay with The Karass Inn