Overnight Website Challenge

Chicago 2017 Recap

These teams worked for 24 hours to create new websites for Illinois nonprofits.


Team BOTS for Lincoln Park Community Shelter

WINNER: People's Choice Award

BEFORE

AFTER

BEFORE

BEFORE

AFTER

AFTER

Project Summary from the Team

Our team set out to build a new site for the Lincoln Park Community Shelter. One that emphasizes the LPCS's focus on community and empowering those in need. We designed the site display these qualities immediately through the home page, and pull the user in to the story within the first 5 seconds. We also incorporated live streams of their Facebook posts to further strengthen that sense of community. Using the focus of a bell, the ringing of which has become iconic to the organization, we also drive focus and attention to the donation page to improve traffic and connect the site spiritually to the LPCSs physical location.

In addition, we wanted streamlined content and reduced menu redundancies to improve the user experience and better control how the story of the organization is viewed through their site. We also added content, creating new sections specifically dedicated to success story's and volunteer testimonials. This allows the people touched by LPCS to tell their stories and inspire others to get involved.

Biggest Wins:

Our biggest wins were really being able to meet the clients need in a way they didn't expect, and hadn't been done before. We spent a lot of time really getting to know the organization and working to translate that knowledge in to a site that more truly represents the LPCS.

We also feel that we helped the client improve / expand their branding through the incorporation of recent ad-work they had received as well as the incorporation of the bell which has become an iconic experience for those who have been to the LPCS in person.

From the Nonprofit

I could not have been happier with my team, BOTS. They were incredibly organized, and helped me walk me through the process the entire night. Despite having the smallest team (I believe) of any of the web teams, they were a well oiled machine and worked collaboratively with myself throughout the full 24 hours. They did a great job of delegating the work but coming together collectively to review, edit, discuss. They never once said, "here's what we did, hope you like it." It was always, "Based on your thoughts and comments, here's what we're thinking...how did you feel about this...are we capturing your thoughts?" I never once felt overwhelmed nor was I reminded by the team that I lack web/tech skills. The communication with the team was seamless and they made me feel comfortable and at ease throughout the process (while still feeling like an important element of the process). Most importantly, I feel like they appreciated the agency and understood our mission and what we were trying to accomplish. They were genuine in their interest and desire to help. I could not be happier with this team.

Biggest Wins:

For starters...a new website! Putting our website onto something my team can edit and maintain moving forward was beyond critical. They moved our current site of codes and things I cant understand to wordpress in a form that I can more easily edit and control. They completed basically all of our laundry list requests from the project brief which improved our limited functions in the previous site (uploading pdfs, video files, language translator, SEO findings, blog creation, etc etc) They also changed the design of the web site, especially the home page to create a more welcoming experience for the user and capturing what our agency is all about. That was no small task for a group of 6.


Team Chicago Webfriends IRL for Total Resource CDO 

BEFORE

BEFORE

BEFORE

AFTER

AFTER

AFTER

Project Summary from the Team

Our nonprofit, Total Resource CDO, has an existing website that serves two audiences: people who need assistance from the agencies TRCDO works with, and donors and agency representatives who provide resources for TRCDO. The primary goal of the site is for visitors who need assistance to call a TRCDO representative after having gathered the necessary documentation to ensure that timely help can be provided; especially in the case of mortgage services, visitors may need assistance in a matter of days. Donors and partner agencies need to see a professional, up-to-date site, as this reflects heavily on their perception of the TRCDO organization. Because information on the original site was poorly organized and undifferentiated, customers had trouble finding which services TRCDO provided and were unprepared to contact TRCDO if they did eventually call. Dr. Davis also requested clearer donation and volunteer call to actions.

To achieve the goal of a clean, well-architected site that professionally communicated TRCDO's services, we did a complete rewrite of the site with a new site map, wireframes, and visual design (including logo). Instead of hand-coded HTML, we built the site on WordPress so that TRCDO employees can be trained on its upkeep. We also combed through the existing content, rewrote and expanded large portions of the copy, and switched to a question-answer format on the program pages so that customers with a concern could immediately find what information they would need to call with.

Biggest Wins:

The new visual design uses a more calming color scheme (moving away from the reds and instead incorporating blues and greens) and includes a logo that references the five core types of services TRCDO provides. The design is mobile-first, and much more readable on mobile devices than the original site. The home page and the top navigation both clearly show the five types of services immediately to site visitors. Contextual donation and volunteering call to actions are visible on all relevant pages. Within each program page, the range of services is more immediately visible at-a-glance because of the accordion-style navigation. Most content is editable through the CMS (home page is major exception, though we have plans to add that functionality later).

From the Nonprofit

Our team did not have any major challenges that they were unable to address and resolve pretty quickly! Each one of the 9, (Paul, Mica, Gabe, David, Janice, Brooke, Caroline, Colt, and Gio), were creative and professionals in their areas of expertise. Our leader, Paul, was able to keep us on point up to the end of the day/night/day experience with a knowledgeable smile.

Biggest wins are the clean layout of the new site, cascading of options for our clients, logo choices for branding, and leaving a group of people after 24 hours in a pressure cooker with a smile and sense of satisfaction that this was even possible! Our key objectives were to have a user friendly site for our clients to easily locate the services needed and an informative resource for funders and collaborative partners to research who we are as a non-profit entity. The team grasped this quickly and went to work on making it happen for us.


Team Coding Temple for Hyde Park Neighborhood Club

BEFORE

BEFORE

BEFORE

AFTER

AFTER

AFTER

Project Summary from the Team

Reorganize and streamline slightly bloated site while making easier for admin users.

  • Full Redesign
  • switch to umbraco from wordpress
  • reorganize nav (not currently reflected in dev)
  • switch from paypal to square
  • through umbraco, make pages highly customizable for staff
  • training manual for staff

Biggest Wins:

I think we developed a really streamlined design that will be less friction for users as they navigate. Switching to Umbraco will ultimately be easier on administrators as they keep the site fresh. However, these accomplishments are not yet fully realized.

From the Nonprofit

Our team worked extremely hard on our behalf. Each of them had unique skills and were fully focused for the entire event. They were committed and pleasant no matter what wrenches were thrown in their way.

There were delays at the beginning of our work together due to a question as to whether to continue with our pre-existing Word Press or switch over to Umbraco, a new programming platform. After a couple of hours attempting to use Word Press, the team made the decision to switch. Following that we made quick progress and the new site began to come together beautifully.

Frustratingly, an hour or two were later lost due to an issue with many our photographs being lost or somehow invisible to the team. That was very unfortunate because it interfered with the team's ability to complete their work by the end of the 24 hours.

Biggest Wins:

The team was very good at listening to our vision and creatively bringing it to life through a complete redesign of our site. The new homepage design is transformational and the approach to presenting our youth programs will solve many of our prior problems with external communications.

A second big win was that we (non-profit admins) have a much better understanding of what we are trying to achieve with our website. This is something we've been working on for several years and participation in the 24-hour challenge was a major breakthrough. This will be helpful as we move into finalizing some of the details that we did not have time to address during the initial 24 hours.


Team Flair for Realtors to the Rescue

BEFORE

AFTER

BEFORE

BEFORE

AFTER

AFTER

Project Summary from the Team

The client was looking for a complete overhaul by way of design and some functionality. They also needed the new site to connect with their existing CRM, Wild Apricot.

Biggest Wins:

We were able to complete the logo designs and Web designs, get an instance up and running, and successfully connect to their CRM, Wild Apricot.


Team Jellyrollers for Chicago Baseball Cancer Charities

BEFORE (NO WEBSITE)

AFTER

BEFORE: NO WEBSITE

BEFORE: NO WEBSITE

AFTER

AFTER

Project Summary from the Team

Chicago Baseball Cancer Charities asked us to build them a website (as they previously did not have one), and provide them with a way to register people for an annual event online, rather than via snail mail. They also wanted a way to communicate who they are, and to receive donations that come in independently of the large event.

Biggest Wins:

We provided CBCC with a clean and simple responsive website that communicates who they are, who their sponsors are, who the money they generate goes to, and allows people to donate from the site, or reserve and pay for participation in the annual event.

From the Nonprofit

JellyRollers were amazing! We got into a meeting right away, they assessed everything we needed correctly, improved on all of our ideas, hit all of our goals and most of our stretch, and stayed positive the whole time. You can tell that they like what they are doing and they brought their A game. Couldn't have asked for a better team, in one day they transformed our charity.

Biggest Wins:

They built a website from the ground up. They built us a registration for our outing. They took all of our assets and made them better. They even updated and integrated our Facebook and made us so proud!


Team Nuthin But Net for i.c.stars (Inner City Computer Stars Foundation)

WINNER: Best Design Award (tie)

BEFORE

BEFORE

BEFORE

AFTER

AFTER

AFTER

Project Summary from the Team

i.c.stars needed a cleaner, clearer, and refreshed web presence that would clearly communicate to a variety of constituent segments. The ultimate goal was into increase high-quality conversions on any device.

Biggest Wins:

We identified clear container channels, updated the copy voice, and created a best-of-breed visual experience for a best-of-breed organization. The website now uses a contemporary CMS (Umbraco) rather than an unmaintainable increasingly defective system.

From the Nonprofit

The team was incredible. It was like watching a symphony perform. They listened, asked thoughtful questions, and delivered creativity, energy and enthusiasm throughout. They were also nice and professional.

In 24 hours they designed and built a site that not only demonstrated a deep understanding of our core values and philosophy. It clearly communicates what we do to potential applicants, employers and the public.

We have As a tech training organization, being able to observe this dance of UX, development, creative was an inspiring event for the i.c.stars team, which included a new intern, alumni and staff. All of us felt part of the magic.

Biggest Wins:

  • Understanding i.c.stars stated and unstated site needs, and translating those needs into a site.
  • Replacing thousands of pages of content, they team designed a navigation and flow that is modern, easy and simplified.
  • Through questions, highlighting missing marketing or content that i.c.stars will work on creating.

Team O2B from DBC for Accidental Shakespeare Theatre Company

BEFORE

AFTER

BEFORE

BEFORE

AFTER

AFTER

Project Summary from the Team

Our charity The Accidental Shakespeare Company works to bring a new twist to classical theatre. Their previous website is based in an outdated version of Joomla and doesn't do them justice. We're hoping to build a new site for them that allows the ability to accept more than one-time payments, highlight upcoming shows and previous productions, as well as include information about staff and the board of directors.

Our team is a group of recent graduates from Dev Bootcamp, and Accidental Shakespeare presented us with a great opportunity to build a website from scratch for a client with a certain amount of tech savvy (our reps know Git?! Niiiice) and who would like a stack that requires minimum maintenance. We agreed on a static site generated solution based in jekyll, along with some bootstrap to help with front end design.

Biggest achievement: 

Learning a new framework in 24 hours! Additionally, creating a theme from scratch including UX and wireframes in 24 hours.

From the Nonprofit

The team worked very well together, with different members of the team assigning themselves to particular portions of work, with clear leaders and point-people for each particular set of tasks.

I was particularly impressed with how the group sought to understand the necessary business logic of how the site needed to work before we dove into creating mockups or writing code. We created "user stories" and "administrator stories" to identify particular tasks that each type of person would need to complete for the site to be successful. We then collectively worked to implement solutions to those "stories" within the site.

The team was also very careful to implement tests throughout the project. Any time that someone wanted to merge-in a feature, it would need to pass the particular test before it could be merged. This helped to ensure that we were putting together clean, functional code as part of the site.

Biggest Wins:

We have a clean structure and solid foundation for us to build on with the site. By focusing on the needed user stories, we were able to build the site out in a desired manner the first time, rather than needing to re-work sections or layouts because we didn't take the time to make the right choices.

We also have the ability for people to make one-time and recurring donations, and for people to purchase tickets for our shows. This might sound like a simple thing, but our prior setup only allowed people to purchase tickets by "making a donation," which is a less-than-ideal way to do things.


Team Pariveda for One Stock One Future

BEFORE

AFTER

BEFORE (Website but no web app for students)

BEFORE (Website but no web app for students)

AFTER (New web app for students)

AFTER (New web app for students)

Project Summary from the Team

Our project was with One Stock One Future, a nonprofit with a dream of making one million children shareholders. Rendel, our sponsor, teaches kids about money and stocks and wanted an application for reaching out to the kids after as well as continuing to educate them on investing via a news feed and stock simulator.

We created a web app on Node.js, with the front end using VueJS and the back end using Express and MongoDB. We deployed these on Heroku and worked closely with Ren to bring his vision to life.

Biggest Wins:

Our team accomplished a few big features. First of all, we were able to integrate with Bing News API and Google Finance APIs to bring tailored content and financial information to our home page news feed. We also were able to use that financial data to flesh out a stock simulator with a virtual bank. This simulator utilized a complex service endpoint in combination with the Google Finance data to calculate net gain/loss, current worth, and chart out trends in stocks. Lastly, we were able to display a live ticker that scrolled across the top with twenty stocks that were most pertinent to kids viewing the app.

From the Nonprofit

I found the Pariveda team to be incredible. They were structured and organized, and seemed to work really well together. They had all of their equipment together, and were ready to get started immediately. I did not have an opportunity to develop the strategic plan prior to starting the challenge, but the team at Pariveda was fully prepared to develop the plan at the beginning of the day.

Through the day, and the night, the team worked constantly. They were committed to the project, and at times, they even had to be gently nudged to take breaks and step away.

Biggest Wins:

One Stock One Future is planting seeds of wealth with one million under-served youth. The team worked hard to add new features to the website that would allow me to cultivate that seed. With the new functionality, students (and adults) will now be able to see news listing about public companies, I will be able to send curated notes and updates to users, and they will be able to build a mock portfolio using a new simulation program. Along the way, there were some key accomplishments such as the scrolling stock ticker that shows the price of each stock, and integrating with a news source PIO.


Team Revenge of the Nerds for Heartland Animal Shelter

WINNER: Biggest Impact Award

BEFORE

AFTER

BEFORE

BEFORE

AFTER

AFTER

Project Summary from the Team

We overhauled their website and gave them an easier and prettier solution using wix so they can later add and edit content easier.

Biggest Wins:

Making the solution more beautiful and easier to use was our main go and I believe that we accomplished it.

From the Nonprofit

The team did great! Everyone came together and did their part. We had several hurdles, especially in the beginning with internet connectivity, hardware issues, one team member not showing. After we got the ball rolling and figured out a new CMS (Wix), we discovered it would only allow one editor in at a time, which presented its only set of challenges and frustrations. But everyone stuck with it all the way through to the end and team was working all the way until 9:00 Sunday morning!

Biggest Wins:

We were able to get the new website look and feel that we wanted. It's clean, modern, sleek and sharp. On the backend, we went with Wix, which will give us the ease of use we were looking for to be able to make edits, updates, and changes as needed. We were also able to integrate some pieces that were previously making the look and feel of the website not as nice.


Team Shamrock for Life Quilt Foundation

BEFORE

AFTER

BEFORE

BEFORE

AFTER

AFTER

Project Summary from the Team

We had a small team, so we were sure to prioritize things appropriately from the start. Our nonprofit's old website had no ability to accept donations, so this was the #1 thing we set out to do (in a somewhat specific way, based on how they wanted to use the data), and we did it! The other important thing was an update to the homepage and a design upgrade. We did both of those things as well. Some of the "nice-to-haves" are still to come, but we're happy with what we accomplished in 24 hours.

We decided to do a test deploy on the nonprofit's current hosting platform about halfway through the challenge, because we were warned that the platform was finicky and unreliable. Basically, we were expecting to have issues. And we did. So our backup plan was to deploy to Heroku by the end of the day, which was successful.

Also none of us slept at all and stared at a computer screen for 24 hours so that's neat.

Biggest Wins:

  • Lots of people learned new technologies including firebase, flexbox, and react. We were stretched in good ways.
  • No one yelled or cried.
  • We created a donate page that was up to par with what the client asked for.
  • We designed more modern, effective branding and page payouts.
  • We planned and worked super efficiently--having standups every 2 hours and mini-sprints that were 4 hours long. We used trello for user stories and paired when necessary. We had a good git workflow and reviewed/approved each other's pull requests. Basically, we had our shit together the whole time (except for a couple of hours in the middle there).

From the Nonprofit

The team worked well together with a good degree of structure - operating in sprints and holding standups every two hours. I appreciated the fact that while the team challenged each other on the choice of technologies to be used, they were able to learn and implement the agreed upon tech.

Biggest Wins:

We agreed at the beginning that the criterion of success was the creation of a functional donation page with the ability to integrate with the organization's back-end. WE DID IT! In addition the team refreshed the homepage, created a new logo/color scheme and ways in which volunteers and partners can communicate with the organization.


Team Sprout Social for The Gray Matter Experience

WINNER: Greatest Functionality Award

BEFORE

AFTER

BEFORE (No website for student project)

BEFORE (No website for student project)

AFTER (New website for student project)

AFTER (New website for student project)

Project Summary from the Team

Gray Matter aims to educate, empower and assist students in creating their own businesses -- and today, we had a first-hand experience in their approach by working with their student team to build their first product and business: a web (and mobile-responsive) application dedicated to connecting local talent to local businesses. The Recruiteen team wanted to build a direct pipeline for teen job-seekers to quickly find jobs in their local community and express interest efficiently. The benefit to employers is the access to local talent who understand their neighborhoods and communities intimately and can fill roles quickly and reliably, at an affordable cost. The impact to the community means teens are getting practical work experience, staying safe and saving up for college. Together, we brainstormed user flows, mapped data architecture and technical design. The students kept us close to the users, and we pushed each other to focus on delivering value for a unique audience. This team and project is truly for the students, by the students. We end today with a mobile responsive Wordpress application for employers and teenage job seekers to connect on job opportunities, plus a separate matching algorithm to improve the quality of those connections.

Biggest Wins:

1) We crafted a product development strategy, users flows and technical design to be used today, so that we could build a proof of concept that the students can validate with user research and testing. We also crafted future product and pricing concepts, user research and testing strategy, and a proposed email marketing campaign that can eventually support user communications.

2) We crafted a cohesive brand strategy based on user needs and competitive market intelligence, including digital assets that can be used across press and school materials. We designed a synchronized data collection and storage flow to smoothly link the interaction points of employers, job listings, and job seekers.

3) We used our standardized data system to build out a matching algorithm, with a prototype of the matching process, to match job seekers to job listings created by employers. While we kept simplicity at heart, we invested time into matching to align with our vision for an efficient and seamless system.

From the Nonprofit

I was thrilled when I learned we'd be paired with Sprout Social and for good reason. Upon meeting them, the team was extremely friendly and very supportive of our work. They were all looking forward to working with us and believed heavily in the vision we looked to execute.

The team at Sprout was great to work with - very much a collaborative and safe space while we worked together. They were very open to feedback and direction but were great with bringing their own creativity and skill sets to help us reach the desired outcomes we wanted. They worked quickly and diligently to deliver a product that would help us reach our goals and that would set us apart from our competition.

Each of the team members were extremely talented, easy to work with and worked well together and to understand our vision. They made things easy to understand, for a non technical person like myself and made sure that I understood the "why" for every solution they proposed. I'm more than happy with the amount of work they were able to accomplish and grateful for all of the support and collateral they provided.

Biggest Wins:

I was impressed by how quickly the team was able to understand our vision and to add their ideas to the mix. We were able to build a quality MVP that will allow our students to demo the product to clients and get feedback about how to move forward. We also walked away with a ton of promotional material and ongoing support from the Sprout Social team which I expect to catapult the end result even further. We also created an entire scope of work for future plans - things we didn't have time to accomplish during the challenge, but could continue developing on as we grow.


Team The Take Uppers for Up World Inc.

WINNER: Best Design Award (tie)

BEFORE

AFTER

BEFORE - image not available (Archived site image not properly displaying)

BEFORE - image not available (Archived site image not properly displaying)

AFTER

AFTER

Project Summary from the Team

Our approach to helping UpWorld Inc. was refocusing their site from a general information site telling what they do to a site aimed at helping visitors accomplish key tasks. The previous version of the site was not generating any donation revenue and had one link at the upper right that sent the user off site to PayPal (no story or connection to where the money was going). We wanted to fix this by instilling in potential donors the importance of the work UpWorld Inc is doing and how donor money would be used and switching to Stripe to take donations so it would be a more seamless process (with the same transaction fee). In addition, we wanted to make the site a place for volunteers to be able to sign up as the previous site lacked a volunteer sign up, which we achieved by, again, trying to connect volunteers with the mission and adding an in-line field. Finally, we took on various cleanup tasks to have a more unified site as well as providing a more direct login for teachers and students.

Biggest Wins:

Integrating donations into the site over just a link that sends the user off to PayPal with no context should lead to more donations coming in through the site by using Stripe. We also switched over the site to a new template that allows a more seamless telling of UpWorld Inc's story and reminding visitors of its accomplishments. We were also able to achieve the goal of integrating volunteer signups on to the site.

From the Nonprofit

The team performance was absolutely great. We got everything completed in time, we hit some snags with the server but ultimately we got everything completed. The team work extra hard to make sure that we have our pages up and running and completed by the end of the night. The redesign was what we needed, and we can not be anymore happier with what we have. Uptake has been so awesome with the design and implementation of the website.

Biggest Wins:

The redesign of the website to make it particular the best not only for donors but also for the students. The donation page is a big win for us, knowing what people can donate in different amounts. We have been looking for a big donation system where anyone can donate. We feel that this is the best for us to have a as an organization.