Inspiration

Yourise is a nonprofit with a mission to enrich, strengthen and develop the moral, ethical and social character of young men through: (1) “Group mentoring” that facilitates a multi-faceted curriculum each Saturday morning throughout the year, and (2) “A Village Network”, consisting of a collaborative partnership of community agencies, organizations and programs that encircle our young men with guidance, support, security and encouragement.

Yourise wanted to be able to bring the developing content of their existing website to their audience by creating a website that would be mobile friendly and with improved accessibility.

Product Vision

Yourise envisioned an "app" that their program participants ("mentees") could launch from an icon on their mobile phone's home screen. This app would have a simple 2x2 layout with four buttons that would have separate functionality and would be representative of Yourise's core values: Connect, Respect, Educate & Protect

Chat (Connect) - The mentee would have the ability to communicate with the mentors & police liaison of the program, either as a whole or individually.

Game (Educate) - This section would contain a library of Yourise educational gaming content and limited approved content (ie. games, quizzes, videos) which mentees could engage with in exchange for points that participants could redeem with retail partners.

Rewards (Respect) - This would be the mentees' information page with Yourise:

  • Their current badge based on their point level, which they would show partner retailers for redemption (ie. 10% discount, $5 off ticket purchase)
  • How many points they have
  • How many points they've earned this week
  • How many points to their next reward

SOS (Protect) - A button that would send an alert to specific leaders in the program and the mentee's parents along with the mentee's location. This button would also activate a splash page that would allow the mentee to deactivate the alert by using their own unique 4 digit code.

What it does

Chat - Lists all members that the user can directly message

Game - Sends user to page with links to various educational games. Law students created a paragraph about "what you should do if you're stopped by a police officer" & questions for the "Civic Rights Quiz." Devs created a JavaScript game for a "Civic Rights Quiz" that would add points to the user's profile upon completion.

Rewards - Should show current points, user's point history, program leaderboard. Displays a colored badge based on how many points the mentees has earned which they can show to retail partners in exchange for discounts.

S.O.S. - Prototype which will (hopefully one day) send a beacon (an SMS & email to MJ with username & GPS location). This will not send the user's location on Chrome (unless Yourise enables https).

How we built it

WordPress - We cleaned up the main page to make it more mobile friendly (reduced four clickable areas to one, fixed overlapping text), moved links on main page to an "app" landing page that had four buttons that linked to separate pages. The app landing page was stripped of any extra content to make it quicker to load and give it a typical app aesthetic. We created four pages for each of the apps' four features (chat, game, rewards, s.o.s.) that all had a different function beyond displaying static content.

Games - We found a quiz engine called Quiz Quartet by Vox Media for generating multiple-choice (and true-false, and other) quizzes based on content in a simple table, stored as Google Spreadsheet. This worked out well in that we had two law students who could generate civics-related content for us without needing any programming skills. We fed a URL for the spreadsheet to the Quiz Quartet Heroku app at http://quiz-generator.herokuapp.com, which in turn generates some JavaScript which we fed to our WordPress operator. The JavaScript became our quiz. Looking deeper, we found the JavaScript generated by the Heroku app include a path to another JavaScript file, called quiz.js. This was the source code for the quiz engine itself. We took a copy of quiz.js, put it in our GitHub repo, and modified it to interface with our points/reward/badging system.

Challenges we ran into

WordPress - There was a relatively steep initial learning curve since we had to quickly learn how to navigate and work with the existing website's structure while learning the capabilities and limitations of the installed Buddypress theme: KLEO. Also, since each page had a unique functionality, the development of each page had its own challenges. One of the biggest challenges was creating the Rewards page which required a new template to be created with PHP in order to use the BuddyPress/KLEO shortcodes necessary for retrieving the necessary data. The second was in creating the S.O.S. page which required a temporary subscription to a service that would send a text and the user's location to a designated person (in this prototype, MJ). Our most potentially devastating problem happened when we ended up taking down the entire website by installing a plugin in the last hour the final project was due. Luckily someone was able to go in FTP to scalpel out the plugin on the server.

Games - The biggest challenge for the developers was finding and using a quiz generator. We found Vox Media's Quiz Quartet early on, and our first instinct was to fork or clone from GitHub, then start modifying the code. Getting it to run on our dev platforms (one Mac, one Windows) turned out to be a nightmare. Found out it wants ruby, and a ton of dependencies, a couple of which no longer wanted to run on Ruby. We even tried spinning up Ubuntu VMs in Virtual Box. We found a promising alternative called "slick quiz," but in the end, stuck with running Quiz Quartet via Heroku, and manually copy/pasting the resulting JavaScript.

Accomplishments we're proud of

  • Taking a vast cloud of terrific ideas, organizing them into a comprehensible map, then implementing just enough functionality to establish some feasibility.
  • That we were able to work out a pipeline that let us create quiz-game in Wordpress based on input data from a simple spreadsheet (a Google document). This made it easy to engage subject matter experts (our law students) in content creation without requiring programming experience.
  • Creating a launching screen for the "app" that is clean, simple & user-friendly that could be saved to the home screen of a phone with a clear icon
  • Having a live end project that demonstrated the feasibility of this project

What we learned

The perils of Ruby, the benefits of pre-made quiz generators. Also found some online kanban tools (https://kanbanflow.com) and story mapping tools (https://app.cardboardit.com).

What's next for Yourise

Large-scale Changes

  • Improving SEO
  • Implementing point system
  • Implementing membership types so that mentees can be limited to chatting to only to mentors.

Chat- Adding a broader chat function where mentees can send out a message seeking resources, advice and connection from all the mentors.

Games - Add more games, links to approved sites & the ability for mentees to request specific content

Rewards - Needs debugging. Setting up retail/community partnerships for badge redemption

S.O.S. - functionality (location sharing, pin/code entry to deactivate)

Share this project:
×

Updates