Your Innovation Partner

At Jupio Labs we bring our clients to the modern web, using agile & lean approaches to development and design

Past Clients

Documentary Organization of Canada

UI DesignNationbuilderHTML5SASSBulmaJavascriptDesign

The Task

The Documentary Organization of Canada (DocOrg) approached us in late September of 2018 in order to bring their website redesign to completion. Much of the site was constructed, but they needed our expertise with Nationbuilder as a platform, our design chops, and our experience in front end development to bring the redesign to a speedy and timely launch slated for the beginning of October.

Design & Development

We worked with existing thematic elements, such as colour scheme, as well as the flex box based CSS framework Bulma.

We redesigned much of the conent layout, improved readability, and improved the typography of blog article pages. In addition, we ensured proper rendering and flow of form pages. We gave the website a final rundown and polished it before launch.

We also provided insight into how the Nationbuilder platform works, what its limitations are, and how features within the system could be used to ensure dynamic content tied to data in back end administration.

Finally, we helped DocOrg figure out how to establish a bilingual nation with the existing theme.

Hand Off & Launch

Jupio Labs ensured that DocOrg was ready and comfortable with the feature sets that were developed while working with us.

Furthermore, Nationbuilder is a powerful tool with a rich set of features, which is why we worked closely to ensure that our client would be able to make the best use of what was available for the context of their organization.

We worked closely to ensure as smooth a migration as possible for launch.

Linda Jeffrey for Mayor of Brampton

UI/UX DesignReactJSReduxNodeJSMongoDBTypeScriptServer-side RenderingTest-driven developmentMailchimp APIPaypalAzure

The Task

The Campaign for Linda Jeffrey for Mayor of Brampton approached us looking for a custom solution for a campaign site.

The solution needed to be able to handle volunteer signups, voter pledges, requests for campaign signs, and donations.

A Lean Team

Understanding the task at hand, how quick turnaround needs to be in a competitive campaign cycle, and being able to implement features as fast as possible, we chose to embed lean development and UX principles into our process.

We quickly established a process to handle feature requests. There was one member of the team who remained the chief point of contact with the campaign at all times, and was able to relay and prioritize implementation of new features as requests came in.

The Stack

We were running lean, so we started with making sure there was a base level of predictability to our codebase. We chose TypeScript as our primary language due to its ability to catch type errors at compile time, allowing us to work faster rather than worry about variables coming up undefined at runtime. TypeScript was our bread & butter whether we were writing browser-side code, or NodeJS microservices. We also had checks and balances in the form of githooks that ensured linters, TypeScript compilation, and unit tests all gave the green light before a commit.

We chose ReactJS with server-side rendering for our front end. React provides us powerful patterns and a functional approach to writing our view. We were able to effectively build a framework while building features by building our components using the Atomic UI approach -- allowing for maximum reusability. For state management, we deferred to Redux whenever necessary.

Server side rendering (SSR) was necessary: political campaigns rely on users to share across a variety of platforms, and for that to occur predictably we require Facebook, Twitter, and Google's crawlers to be able to read static HTML served from a server. Towards this end, we used NextJS as our solution.

Get in Touch

It's easiest to reach us by email