codeforkansascity / i-got-mine

Connecting KCMO residents with free sexual health resources offered by the City

Every year, many residents of Kansas City forego services provided by the City of Kansas City, MO Health Department (KCHD), frequently they are not aware such services exist. KCHD wishes to create a presence in underserved areas throughout Kansas City, MO via mobile outreach. By promoting better sexual health practices, testing, and KCHD sponosored events, KCHD intends to make Kansas City a healthier city for all.

Current version of the website: http://igotmineinkc.org.

The philosophy from technical perspective to build this website is that we want it to be maintainable by non-programmer and the service can run smoothly at a low cost. The site is built on top of Github pages. Besides the benefit of convenient version control, the static pages, images and resources rendered by Github pages are automatically scaled and cached to give the best performance to the users. The dynamic content like the location information, events, cards and localized phrases are served from Google Sheets to ease the pain for non-technical member to access and update the critical site content. One aspect we need to continuously remind ourselves is that many of our users will access the site from their mobile devices. On that note, we need to work closely with designer to provide a screen-responsive, location-aware and bug-free site for main mobile browsers on different devices.

Implementation Notes

All dynamic data (info about condom distribution sites, STD symptoms and treatment centers) are stored in several tabs in Google spreadsheet. In addition Spanish translations of both dynamic and static HTML content are stored in a separate tab of the spreadsheet. This enables a non-technical person to update the content in Excel-like interface without being exposed to the code.

The data is pulled into HTML template by 'tabletop.js' Javascript. The script uses column names stored in the first row of the spreadsheet, and, for Spanish/English translation, column letter in the spreadsheet (the column order is important, new columns for localized content should not be inserted, but rather appended at the end of the spreadsheet).

Localization (Spanish to English and English to Spanish) is done by 'l10n.js'. Note, that there are two English texts. One text is loaded from static HTML and, dynamically, from two main tabs in Google spreadsheet ('locations' and 'STDtesting'), when site loads. Another text is loaded from English text stored in 'localization' tab, when user toggles to Spanish and back to English in the UI. The awareness of this dual location for the same copy will prevent some consternation when the content is edited.

Interaction with the map and content displayed in the map (icons, site info) is via 'somemap.js'.

Bootstrap framework is used for top navigation, default button formatting, and glyphs.

Carousel Javascript is...

STD card HTML template and flipping code is stored in std-card.js. Note, most of the flipping is done in CSS.

'scroll-to-top.js' shows scroll to top button, only when it is needed.

Most of the styling is in igotmine.css. Map content styling is in somemap.css.

The Team

• Eric Dean (Project Lead, data management, Kansas City, MO Health Department)

• Shih-Wen Su (lead developer)

• Oleh Kovalchuke (UX designer, CSS, project coordination)

• Jason Devore (developer)

• Code for KC contributors: John Rake, John Kary, Paul Barham (see Contributors)

• Asssociate Members: Samantha Hughes, Marquita Leverette, Bill Snook, and Denesha Snell (Kansas City, MO Health Department)

What we need

• See Issues

How to help

• Come to Code for KC HackNights
• Pick an issue, fork the Repo and fix it.

i-got-mine's Issues

Fix 'flipping card' flipping on iOS (iPhone)

Pivot or Persevere

Should you Pivot or Persevere?

What feedback did you receive from potential customers?

If the feedback confirmed that you're solving the right problem, for the right people, in the right way, awesome! Let's move forward.

If you received feedback that makes you want to rethink your problem, customer segment, or solution, now's the time.

• Update your lean canvas, and consider going back to the brainstorming and paper prototyping phase to take another shot at it.

Keep iterating until you get feedback that tells you to push on! Keep track of your pivots to share how you arrived at your end solution during your pitch.

Pull Spanish content to website dynamically from Google spreadsheet

Nice to have: small tabs on top of the map for different icons

The tabs are: [All] [ Condoms (23)] [ Events (8)] [ Treatment (4)]? Clicking the tab highlights all the icons of that type on the map. The numbers are ​all​ items available (not only those visible in the zoomed in map, although that would be a nice functionality to have).

What Makes You Different?

What is your Unique Value Proposition?

Fill in Box 3, the "Unique Value Proposition."

What is a UVP?

Your unique value proposition is the promise you're making to your customer that's compelling enough for them to jump on board.

Writing a UVP

Here are two suggested formats:

1. Ask yourself: "If I solve the problem [by doing this] for my customer, is that compelling?"

When you can substitute [by doing this] with something compelling, that's the Unique Value Proposition you're proposing.

2. Complete the statement: "I can promise [the customer in Box 1] who faces [the problem in Box 2] that I can give them [unique value proposition in Box 3]."

Lastly, don't forget to fill out the High Level Concept! This serves as a clear way to describe who you are. For Uber, this would be "Order a taxi with your phone." It can also be an 'x for y' concept like "Instagram for Pet Lovers."

At some window widths the divs for treatment centers do not align.

I remember now why I used two Bootstrap rows to show those info cards. Using two bootstrap rows should prevent that odd stacking issue. Simple fix is to change the display order: put the shortest cards first and the longest last.

The map still does not load, if Share your location is not selected (Firefox and IE, Windows). Works on Chrome.

If hard/too long to fix, remove location service.

Add STD Myths section below Symptoms

Add English/Spanish toggle button

test layout on actual phone, adjust if needed

retina displays, blah blah

What Problem Is Worth Solving?

Find a problem that's worth solving

A lean canvas is a great way to lay out key components of your business model so you can start testing your assumptions and get to building something customers want as fast as possible.

To create a free digital version of a lean canvas, go to Canvanizer. Alternatively, you can print this lean canvas

How to write a problem statement

Choose one of these two formats, and write down your problem:

• I believe [type of people] experience [type of problem] when doing [type of task]
• I believe [type of people] experience [type of problem] because of [limit or constraint]

You can have more than one problem statement, but no more than 3.

Identify existing alternatives

Take time to discuss as a group how people solve this problem today. Document all of the existing ways people solve the problem you want to solve.

Test Your Guesses

Test your Guesses

By now you should have:

• Boxes 1-4 filled out on your lean canvas
• A paper prototype of a solution

So far we've made a bunch of guesses. What problems we think exist, what customers we think have that problem, and what solution we think would solve it.

Before moving on, we need to test those assumptions with some potential customers.

• Spend 1 hour trying to find people who fit your customer segment and talk to them. Call your friends, find people on twitter, even pick up the phone and call businesses. The more people you can talk to, the better!

Design STD Treatment section

Pitch Practice

How to Pitch

1. The Hook (30-60 seconds)

Pull the audience in. Keep it short.
Tell a story, or make us laugh, but make sure you clearly define the problem and convince us that your problem is worth solving.

2. Sell the Solution

The hook should have us on the edge of our seats, because we're rooting for you. We want you to succeed, we want this problem to be solved.

So tell us how you solved it, and for who. Convince us that it's not just you who thinks this solution is awesome, show us your validation. Talk about any pivots you made along the way, and why you have validation that you're on the right track.

3. What's next?

What are your next steps?
Where are you going to take it?
If you've sold us on it, we'll want to help you. Tell us how to help.

Add metadata to head (description, title, FB, Twitter card layout)

title>Up to 70 Characters of Keyword-relevant text here (including spaces)</title>
meta name=”description” content=”155 characters of message matching text with a call to action goes here”>

reference: http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013

Build!

Let's build something!

You should now have a backlog of cards on your board representing what you need to do to build and test your MVP. Let's get to work!

For best results, timebox your development into 20-30 minute mini sprints using a timer to continually check on progress and give you the best chance of reaching your goals by the end of the event.

"View on map" link should also open map infobox for selected treatment center

Lovely job on the link flyakite, by the way.

Team Formation

Form a team of 2 to 5 people

Gather with at least one other person to create a team around an idea or a problem that's interesting to you.

Spend a few minutes asking these questions:

• What's our shared vision?
  • Talk about what goal you want to accomplish as a team.
• What's in it for me?
  • Talk about each individual's motivation - what do you as an individual want to learn or accomplish?
• What talents do we bring to the table?
  • Share a bit of your experience and skills
• Set working agreements
  • What agreements do you, as a team, want to make for the time you are spending together?
  • Suggestions:
    • Show Up On Time
    • Agree on when you'll meet
    • "Art of the Possible" - no idea is stupid, let's consider everything.
    • Be Present - when you're here, you're here, be intentional with your time.

That's it! Now you have a clear goal for your team to accomplish and you know why each of you are here.

Add social icons to event info

Need to be scripted.
The template layout has been updated to include social icons. The styles are in somemap.css.

Add link view to map with icon

Add link "View on map" in the events and std treatment sections

Mobile layout mockups (max 750px)

Add logo image to top nav

Define the testable MVP

Define a testable Minimum Viable Product

An MVP is the smallest possible increment of your solution that delivers enough value for you to be able to ship it and learn from customers as quickly as possible.

• Agree as a team: from your paper prototype and lean canvas, what's the riskiest assumption you're making?

For example, if you were building a device that would automatically pour beer for you, the riskiest assumption might be technical - how do you know how much volume of beer to pour? If you were building AirBnB, the riskiest assumption wouldn't be tech, but instead would be trust - will users rent out a bedroom in their house to a stranger?

• Take your riskiest assumption and figure out the smallest increment you need to build to test that assumption.
• Take that increment and create cards on your board to represent what your team needs to get done in the next Sprint to build that iteration. Think about what it will take to test your MVP - it's not just about building something, it's about building something you can use to learn from as fast as possible.

This backlog of work can be used in your pitch too, to answer "What's next?"

Who's Your Customer?

Who is your customer?

Fill in Box 2 of your lean canvas.

Ask yourself:

• Who do I think this problem (from Box #1) is most painful for?
• Who do I think my "early adopter" will be?

Be specific! For example, instead of saying "Teenagers," narrow it down to "Female high school students who own cell phones."

CSS for top of the screen

Write HTML/CSS for top of the screen in index.html

Add link to google maps

Add "View on google maps" below addresses of condom distribution sites, events, and std treatment and testing center on info box.

How to add longitude and latitude values to Google spreadsheet

At this website: http://www.latlong.net/ enter the address, click 'Find'. Copy latitude and separately longitude into the respective cells in Google spreadsheet.

HTML/CSS layout for condom distribution and events

Design About section

Images for STD and Events

Both STD and event images should be the same size.

Info about current events, condom distribution sites

Info in Google spreadsheet.

BTW, Eric, asked about free condoms bag at Union Station info booth today. They have never heard about it.

New bkg image for mobile layout

replace strip with large watermark image

add link to outside website on STD treatment info box

Add link to outside website detailing specific STD information.

Low priority: The very next upcoming event should use different icon

This icon: https://github.com/codeforkansascity/I-Got-Mine/blob/master/images/igmikc-map-icon-event-next.png

Events section should display "No events" message when no events are scheduled

Instead of carousel. The message verbiage: "No events are scheduled at present. Please check this section in couple of days." The message is displayed in place of events carousel.

Wireframes for STD Treatment section

Info about STD treatment options in KC

This needs to be written (or at least defined) before section layout is designed/coded.

Make map scrolable within map window

Pick a Solution

Pick a solution

Which of the paper prototypes is your team most excited about?

• Decide as a team on the top 1 or 2 prototype(s).
• Add the solution(s) in Box 4 of your lean canvas.

Remember to ask yourself: Does this solution solve the problem (Box 1) for your customer (Box 2)?

Display phone number for STD Treatment centers in map infobox

Make "next event" icon

An icon for the closest upcoming event. Sparkling and shiny.

Adjust layout for mobile

Font sizes and bkg image placement in jumbotron.

Make and add .ico icon for bookmarks

Wide screen (min 751px) mockup

Add icons to buttons/tabs on top of the map

Burger navigation -- the dropdown should collapse when nav item is selected

At the moment the nav dropdown is closed only when burger icon is clicked. Selecting an item from the dropdown list does not collapse the dropdown.

Paper Prototypes

Paper Prototypes

You should have several ideas from your brainstorming session.

• Group any similar ideas together.
• Take one idea (or group of ideas) per person and spend 5 minutes building a paper prototype.

How to build a paper prototype

It's simple! All you need is a piece of paper and something to write with to draw out your solution.

No one expects it to be pretty, don't worry! Add as much detail as you can around how your solution might look or work.

image/header placement

the about logo should be placed on the right side of the page so that it show on the bottom of the section on the mobile website. Also, the Upcoming events heading should be placed above the carousel on the mobile website.

Make a map icon for treatment centers

Doctor/nurse, pill bottle (not all treatments are pills), building.

Brainstorm solutions

Brainstorm Solutions

• Using a timer, take 5 minutes to write down as many rough ideas on sticky notes as you can.
• Go around as a team and put your sticky notes on a wall as you say what you wrote.
• Group similar ideas together.

When you're finished, you're ready to move on to creating paper prototypes!