import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Pnav from "../../components/portfolio_nav"
import { Carousel } from "react-bootstrap"
import SEO from "../../components/seo"

const links = {
prev: '/portfolio/bitsmachine',
prev_label: 'Bitsmachine',
next: '/portfolio/newsweek',
next_label: 'Newsweek'
}

export default ({ data }) => (

<h2 className='page-heading'>Heyindie</h2>

<div className='intro'>HeyIndie was a social marketing service that helped Web businesses build better relationships with their customers.</div>

<div className='role'>I led all product strategy, design, and performed customer interviews.</div>

<p>While most social marketing services are passive monitoring tools, HeyIndie let marketers leverage their existing websites for marketing to and learning about their audience. It was similar to text ads with a social networking twist.</p>

<p>With HeyIndie, you could easily create marketing campaigns across your websites, displayed in our ActionBar, (shown across the top of a web page). These campaigns — special content, offers, discounts, news &amp; events — could be shared on Facebook, Twitter and via email. All views, shares and click response data were captured in straightforward analytics that showed which messages were performing best, and what social networks your audience was most active on.</p>

<div className='thumbnail'>
  <Img
    alt='dashboard'
    fluid={data.dashboard.childImageSharp.fluid} />
    <div className='caption'>An early version of the dashboard.</div>
</div>

<h3>Design</h3>

<p>HeyIndie was built with Ruby on Rails. The public site was purposefully simple, to help highlight our use of the ActionBar on our own site. A simple text animation underneath the main headline livens the page.</p>

<p>The management dashboard sported minimal visual design, with the idea that we might want to integrate with third-party CMSes (for example, the Wordpress admin). An expandable left menu, allowed you to easily jump between site functions, and the analytics included percentages so comparisons were easy to make.</p>

<p>We also abstracted our user management system to make it easy for agencies to access client accounts. Client invitations grant access to current users on a site-by-site basis.</p>

<Carousel>
  <Carousel.Item>
    <Img fluid={data.overview.childImageSharp.fluid}
      alt="Overview" />
  </Carousel.Item>
  <Carousel.Item>
    <Img fluid={data.overview1.childImageSharp.fluid}
      alt="Overview 1" />
  </Carousel.Item>
  <Carousel.Item>
    <Img fluid={data.overview2.childImageSharp.fluid}
      alt="overview2" />
  </Carousel.Item>
  <Carousel.Item>
    <Img fluid={data.overview3.childImageSharp.fluid}
      alt="overview3" />
  </Carousel.Item>
</Carousel>
)

export const query = graphql query { dashboard: file( relativePath: { eq: "portfolio/heyindie/dashboard.jpg" } ) { childImageSharp { fluid(maxWidth: 690) { ...GatsbyImageSharpFluid } } }, overview: file( relativePath: { eq: "portfolio/heyindie/overview.jpg" } ) { childImageSharp { fluid(maxWidth: 690) { ...GatsbyImageSharpFluid } } }, overview1: file( relativePath: { eq: "portfolio/heyindie/overview-1.jpg" } ) { childImageSharp { fluid(maxWidth: 690) { ...GatsbyImageSharpFluid } } }, overview2: file( relativePath: { eq: "portfolio/heyindie/overview-2.jpg" } ) { childImageSharp { fluid(maxWidth: 690) { ...GatsbyImageSharpFluid } } }, overview3: file( relativePath: { eq: "portfolio/heyindie/overview-3.jpg" } ) { childImageSharp { fluid(maxWidth: 690) { ...GatsbyImageSharpFluid } } }, }