BARREL

It’s launch day here at Barrel

Today marks a culmination of six months of work as Bike New York, a New York-based nonprofit, rolls out a new website on its new domain, www.bike.nyc.

Bike New York, best known for its popular TD Five Boro Bike Tour, offers free bike education programs throughout New York and hosts different events throughout the year. Its mission: empower more New Yorkers to grab life by the handlebars.

At Barrel, bicycling is a hobby near and dear to many hearts – some of us have even conquered the 40-mile Five Boro Bike Tour together. So when our friends at Pentagram approached us with the prospect of partnering up on the new Bike New York website, we were very excited.

Bike New York Old Website — Bike New York’s previous homepage

Project background

Kicking off in June, we began our journey towards a firm deadline. Pentagram had been working on Bike New York’s new branding and was starting on website designs. Barrel was brought on to help with user experience planning and web development. We were tasked with building a highly customized and responsive WordPress website that would be a central source of information for the public and a critical marketing, e-commerce, and logistics tool for Bike New York.

Over six months, we worked closely with Pentagram and Bike New York, refining our processes, day-to-day communications, and workflow along the way. We also interacted with various third-party vendors to ensure that hosting and integrations would go smoothly. There were days when we struggled and days when things were firing on all cylinders. The following are five lessons we took away from this experience.

1. Start with strong project management

When we start a new project at Barrel, a Producer is assigned to own project management and manage day-to-day communications. For this project, that designated point person was Betty Chan. Since one of the most challenging aspects of the project was coordination and consistent collaboration, Betty was crucial to the project’s timely success. She kept all parties aligned by managing schedules and expectations on all sides, as well as actively clarifying any questions or miscommunications that popped up along the way. Betty also built a great relationship with each team and team member and kept things light with friendly banter and words of encouragement. Her role helped build the foundation for the project and is a large reason why we’re able to launch today.

Bike New York Betty and Devs — Betty with our developers, Scott and Ben

2. Take the time to plan thoroughly

We believed that if we put in the extra effort into planning early on, it would save us time and resources down the line.

We kicked off the project with an initial discovery phase involving the teams from Bike New York, Pentagram, and Barrel. In the first few weeks, we gathered everyone together to define project goals, and to generate ideas for and approaches to solving various problems. In addition, we focused on hashing out feature requirements, setting project delivery timelines, as well as defining team member roles. At the conclusion of the discovery phase, we internally outlined plans for content gathering, development, production, and quality assurance.

Taking the time to fully understand the scope of the project and explore potential risks allowed us to make prudent decisions. For example, we realized that staffing two developers on the project would make more sense given the complexities of the website. Our first developer, Scott, was tasked with the front-end, while our second developer, Ben, was tasked with the WordPress back-end.

Bike New York Barrel Team — The Barrel team during one of our weekly scrum sessions

As the project started, we began to rely on scrums, or check-in meetings, at the start and end of each week. For each scrum, we created a packet (we called these “Scrumpkets”) of annotated design files and development notes outlining the week’s build. These Scrumpkets became our way of outlining priorities each week into manageable chunks while also creating an artifact that would come in handy for content population and CMS training later on.

Bike New York Scrumpkets — Examples of our weekly “Scrumpkets” (scrum packets) of annotated design files and development-related notes outlining each weeks’ build

Overall, the planning helped us prioritize features and keep the project on schedule. It allowed us to alert Bike New York early on that some features would have to come after the initial launch of the website in order to meet our hard deadline. This upfront discussion focused our efforts on the core build of the website and paved the way to meeting the deadline.

3. Understand how all the pieces fit together

Bike New York relies on quite a few partnerships and platforms to connect the dots of their business and accomplish day-to-day tasks across six different departments. We knew early on that third-party integration was going to be a challenging aspect of this project. Keeping in mind that users visit the website to accomplish a specific task, such as registering for a ride or making a charitable donation, we needed to successfully join many disparate pieces into a seamlessly integrated one.

Here’s an overview of the third-party applications that connect with the new site:

IMAthlete is the online registration software that powers and manages all of Bike New York’s ride and class signups.
Stripe is an online payment solution that we recommended to improve Bike New York’s donation flow. With Stripe’s developer-friendly API, we knew we could customize the form and make the act of donating to Bike New York an intuitive and friendly process.
Mailchimp is the email marketing service which enables users to subscribe for updates and Bike New York to create, send, and track e-newsletters.
VolunteerHub is the volunteer management software that allows users to signup for volunteer opportunities throughout the year.
Stryde powers the e-commerce transactions and fulfillment for Bike New York’s merchandise.
DISQUS is the blog commenting service connecting with and engaging readers on Bike New York’s blog.
BoothBoss is the event and floor planning platform for Bike Expo New York.
Twitter, Facebook, Instagram, and YouTube are the social media channels within Bike New York’s digital space.

4. Sweat the details

As we started our quality assurance testing phase, we concentrated on the hundreds of details that add up to a strong user experience. For example, as the UX Designer, I vetted through content hierarchy and user flows, making sure the site architecture remained intuitive after content production. Zack, our Systems Administrator, performed a beta launch to load test the site, making sure traffic spikes (like the ones that occur on event registration day) wouldn’t bring the site to a halt. Additionally, the Pentagram team focused on making sure their designs translated to the web and that the website’s look and feel remained true to the beautiful brand they created.

Bike New York Jira Issues — We used JIRA as our main ticketing platform and invited the Bike New York and Pentagram teams to submit tickets alongside us

The benefits of planning meant that we invested and buffered time into the schedule to properly test the site after it had been built and especially after actual content was in. During this time our QA Analyst, Jessica, helped test and re-test our build to ensure it was browser and device compatible for the multiple ways that users may experience the site. We also invited Pentagram and Bike New York teams to track bugs and improvements alongside our efforts.

By testing thoroughly and paying attention to the details, we were able to smooth out various aspects of the site, helping us achieve a polished and intuitive user experience.

5. Establish trusting partnerships

Our relationship with Bike New York and Pentagram played a major role in the successful outcome of this project. With each small win and daily communication, we developed stronger rapport with everyone and found it easier and easier to speak freely and honestly to each other about all aspects of the project.

Here’s what Samuel Slaton at Bike New York had to say when we asked him about his experience working with us:

“Working with Barrel has been a phenomenal experience. We came to them with an outdated, buggy website, an unwieldy amount of disorganized information, and no experience whatsoever in web development. In a few short months, they built us a remarkably simpler, user-friendly, and aesthetically appealing new site, and equipped our team with the tools and know-how to take full advantage of everything Barrel created.”

Our trusting partnership led to better feedback which flowed right into fixes and adjustments that upped the quality of the website. Not only did the three teams push to do quality work, we enjoyed our time together and bonded as friends.

Next steps

Bike New York Program Registration Flow — Program Registration is a feature we pushed to Post-Launch but planned early on in the process with discussions and user flows.

In the next few weeks we’ll be in Post Launch, fine-tuning the website and ironing out any kinks. We’ll also be launching additional features that were initially shelved for higher priority items including a Calendar listing as well as a Programs Registration Flow that aims to simplify internal processes.

In the meantime, we hope you visit the site, read through the amazing story of how Bike New York came to be, and also be empowered to grab life by the handlebars.