How might we build a center of growth for a non-profit that wants to make a bigger impact?
The Marathon Kids team manually ran a running club program for schools in seven U.S. cities. The process was extremely time-consuming and costly in terms of resources and time. This wasn’t going to fly with their bold new vision to expand the program outside of schools and open it to everyone in the country.
Marathon Kids needed to implement new branding and website technology that would allow their team to remain small while growing the program from school districts in seven cities to a national program open to anyone.
We worked with Marathon kids to design and iterate an ecommerce solution.
Marathon Kids turned to Standard Beagle for help. We worked with them on multiple projects over 18 months. Our work began with addressing the registration issues and expanded to a complete overhaul of the entire website.
As part of this effort, Marathon Kids was fortunate to land the support of Nike partway through the project. Nike agreed to provide branding that could be implemented into the program, as well as consulting.
We worked with both Marathon Kids and Nike to implement the new technology and visual branding on a tightened timeline so the organization could launch with a bang.
Marathon Kids’ reach grew from seven U.S. cities to clubs across the world. As a result of our work, the program became available to anyone who wanted to coach the program. Marathon Kids staff manage the program through the website and Salesforce and the nonprofit did not need to grow beyond its limit of 15 staff members.
Marathon Kids now manages running clubs across the world. Running clubs can be implemented in schools, neighborhoods, organizations, camps, and at home. Users simply choose the type of program, and the site guides them through the process.
Despite two design updates since this launch, Marathon Kids continues to use the custom registration framework Standard Beagle built for them to manage their global program.
The scope of this project began with the sweeping redesign and continued over the next year with continuous improvements.
We were constrained by the tight timeline for the redesign, caused by Nike’s late entry to the project. The client still needed the site launched within one month of receiving the visual branding.
We not only redesigned the look and feel of the site, but we also redesigned and developed a new registration system for teachers to joined the program.
Our work with Marathon Kids began with fully understanding the programs they offered and assessing pain points in the process. We did this primarily through stakeholder interviews.
The Marathon Kids team explained how they were struggling with a new website that wasn’t working the way they wanted. The registration function was broken and teachers were not able to sign up online easily. They were concerned that teachers would stop participating.
The existing website was extremely complex. And for good reason. The organization has a number of requirements around teacher registration. The trick would be how to make it easy for users to navigate through the complexity in order to reach what they needed.
Based on the feedback from stakeholders, we reviewed the functionality of the site. The interface was not easy to use, and there were multiple clicks through the site just to start registration for the program.
In the old system, the program information was stored with each individual user. This posed a problem for two reasons:
- Data about the program could not be isolated from the user table in the database.
- If the user changed schools in the future, it was difficult to move the user to a different school.
We began exploring solutions to the problem at hand. We explored design adjustments as well as a new architecture to the site.
System Database Architecture
We separated the data into two tables — one for the user and one for each school’s program. This allowed the school program to be isolated from the user so that the program could be connected to a new teacher in the future if needed.
Marathon Kids also began conversations with Nike about a partnership and a fulfillment service to ship incentives, taking the burden off of the staff. We began exploring how the systems would be integrated.
User Flow – Sign Up Process
We also reworked the sign up process to include the new recommendations. The sign up process was already complex, and our goal was to make it a seamless process for the user.
Now that we knew how to structure the framework for the site, we explored the user interface and how to simplify it.
Marathon Kids was hoping Nike would provide the visual branding, but looked to us to define site structure. We designed wireframes to guide the users through the sign up process and connect them with their teams.
We wanted to ensure that the flow made sense for users, so we created a coded prototype of the site. The site was structured in WordPress in order for Marathon Kids staff to be able to update content easily.
We built out basic templates to complete the sign up flow in order to test the prototype end-to-end.
In order to make sure our new designs met our goal to simplify and make the sign up process easy, we organized two rounds of moderated, in-person user testing.
We testing a total of six users and had them try to complete five task scenarios. We watched them use our prototype site and recorded our notes.
- Overall, participants were generally successful with most tasks. They found most items easily.
- Some affordances in the UI were not clear at first, but participants were able to quickly learn. We recommended adjusting the affordances so they were not missed.
- Participants did not see any key items in the sidebar. We recommended removing essential links from sidebars or removing sidebars entirely.
Marathon Kids’ partnership with Nike finalized and the company organized a rebranding effort.
Nike reworked the logo and visual branding, and it also asked that the program changed to encourage kids to run the equivalent of up to four marathons over a running club season of varying lengths.
Nike provided the branding and visual center to be implemented one month before the intended launch date. This changed the scope of the project, and we changed course.
We ramped up efforts to adjust the tested screens and go in Nike’s new direction at the request of the client.
We had initially planned to launch the new website and features in a phased approach.
The Standard Beagle team needed to rework much of the front-end design in the screens with the proposed look and feel. While the underlying architecture of the database remained the same, we had to redo much of the expended effort to adjust the styling and registration process.
- The ability for running club coaches to recruit runners through the site
- The ability for coaches to register and receive rewards for their runners
- System ability to recognize running clubs that would receive scholarships based on the school’s name
- The integration of the registration system with a third-party fulfillment center
- A coach’s dashboard for downloading materials and updating information about their events.
We focused our efforts full-time on building and QA testing the website for four weeks in order to deliver the project on time.
Following the site launch, Standard Beagle continued to work with Marathon Kids to iterate and improve upon site features based on user and client feedback.
Marathon Kids became available to anyone who wants to coach the program across the US. Marathon Kids staff manage the program through the website and Salesforce and the nonprofit has not needed to grow beyond its limit of 15 staff members.
Site traffic greatly increased in the first year following the launch.
Marathon Kids began managing running clubs across the country. Running clubs can be implemented in schools, neighborhoods, organizations, camps, and at home. Users simply choose the type of program, and the site guides them through the process.