LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
/*
#Author: Morgan Keys
#Email: morgan.keys@gmail.com
*/
/*rgb(255,153,51)*/
/*rgb(255,51,51)*/
/*rgb(51,102,153)*/
/*rgb(51,51,51)*/
/*rgb(255,255,255)*/
/*rgb(255,153,51)*/
/*rgb(51,102,153)*/
/*#0066cc;*/
/* Begin global styles */
* {
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  outline: none;
}

body {
  background-color: #333;
  cursor: default;
}

h1 {
  font: 55px/41px Raleway, Helvetica, sans-serif;
  font-weight: 100;
  color: #fff;
  margin: 45px 0px 45px 0px;
}

h2 {
  font: 36px Raleway, Helvetica, sans-serif;
  color: #fff;
  margin: 30px 0px 30px 0px;
}

h3 {
  font: 28px/42px Raleway, Helvetica, sans-serif;
  color: #fff;
  margin: 30px 0px 30px 0px;
}

h4 {
  font: 21px Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  margin: 15px 0px 15px 0px;
}

h5 {
  font: 15px Helvetica, sans-serif;
  font-weight: bold;
  color: #fff;
  margin: 15px 0px 15px 0px;
}

h6 {
  font: 15px Helvetica, sans-serif;
  font-style: italic;
  font-weight: normal;
  color: #fff;
  margin: 15px 0px 15px 0px;
}

p, ul {
  font: 15px/24px Helvetica, sans-serif;
  color: #fff;
}

p:active {
  cursor: text;
}

p.emphasis {
  font: 21px Georgia, serif;
  font-style: italic;
  color: white;
  margin: 30px 0px 30px 1em;
}

aside {
  font: 15px Georgia, serif;
  font-style: italic;
  color: #666;
}

a {
  color: #ff9933;
  text-decoration: none;
}

a:hover {
  color: #336699;
  text-decoration: none;
  cursor: pointer;
}

.divider {
  border-bottom: solid 1px #fff;
  height: 1ex;
  margin-top: 3ex;
  margin-bottom: 3ex;
  width: 100%;
}

button {
  background-color: #336699;
  border-radius: 3px;
  box-shadow: none;
  border: none;
  padding: 10px;
  outline: none;
  color: #fff;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
}
button:active {
  opacity: .90;
  outline: none;
}

/* End global styles */
/*For style-guide page*/
.swatches div {
  padding: 20px;
}
.swatches .swatch {
  height: 60px;
  color: white;
  padding: 30px 0px 0px 20px;
}
.swatches .orange {
  background-color: #ff9933;
}
.swatches .blue {
  background-color: #336699;
}
.swatches .red {
  background-color: #ff3333;
}

.door-pic {
  height: 90vh;
  width: 100%;
  z-index: -1;
  display: inline-block;
  background: #333 url("https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/door_pic_small.png") no-repeat center;
  background-size: cover;
}

body {
  overflow-x: hidden;
}

.color_band {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background-color: #ff3333;
  width: 100%;
  z-index: 10;
  background-image: linear-gradient(90deg, #336699 30%, #ff3333 100%);
}

.headliner {
  position: relative;
  top: 20%;
  text-align: center;
  margin: auto;
  background-color: rgba(0, 0, 0, 0);
}
.headliner h1 {
  font-size: 44px;
  margin: 0px 0px 25px 0px;
}
.headliner h3 {
  font-size: 21px;
  margin-top: 20px;
}

.header_row {
  /*background: rgba(0,0,0,.25);*/
  padding-right: 3000px;
  margin-right: -3000px;
  padding-left: 3000px;
  margin-left: -3000px;
}
.header_row h1 {
  font-size: 44px;
  padding-top: 21px;
}
.header_row ul {
  margin: 80px 0px 0px 0px;
}
.header_row ul li {
  display: inline;
  margin: 0px 0px 0px 21px;
}
.header_row ul li a:hover {
  color: #336699;
}
@media (max-width: 992px) {
  .header_row ul {
    margin: 40px 0px 0px 0px;
  }
  .header_row ul li {
    margin: 0px 21px 0px 0px;
  }
}

.shelf {
  background-color: #333;
  padding-right: 3000px;
  margin-right: -3000px;
  padding-left: 3000px;
  margin-left: -3000px;
  position: relative;
  color: white;
}
.shelf .work_highlights {
  position: relative;
}
.shelf .work_highlights h2 {
  display: inline-block;
}
.shelf section {
  padding: 100px 0px;
  /* 1.0 Normal size */
  /* For thin screens sizes */
}
.shelf section:first-child {
  padding-top: 50px;
}
.shelf section h3, .shelf section p {
  margin: 0px 0px 20px 0px;
}
.shelf section ul {
  padding-left: 16px;
  margin-bottom: 30px;
}
.shelf section img {
  height: auto;
  width: 100%;
  text-align: center;
  margin: auto;
}
@media (max-width: 992px) {
  .shelf section h3 {
    margin-top: 30px;
    line-height: 32px;
  }
  .shelf section img {
    margin: 40px auto;
  }
}
.shelf section:nth-child(2n) {
  background-color: #fff;
  /*On white bg*/
  padding-left: 3000px;
  margin-left: -3000px;
  padding-right: 3000px;
  margin-right: -3000px;
}
.shelf section:nth-child(2n) h3, .shelf section:nth-child(2n) p {
  color: #333;
}
.shelf section:nth-child(2n) iframe {
  box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.2);
}
.shelf section:nth-child(2n) ul li {
  color: #333;
}

.videowrapper {
  height: 50%;
  padding-bottom: 42.85%;
  /* 21:9  16:9 = 56.25%*/
  position: relative;
}
.videowrapper iframe {
  background-color: rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 21px rgba(255, 255, 255, 0.2);
  /*On black bg*/
  border: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.visual {
  /*top:50%;
  -webkit-transform:translateY(50%);*/
  padding: 15px;
  padding-top: 0px;
}

.carousel .arrow {
  font-size: 32px;
}
.carousel .item {
  height: 550px;
}

.footer_row {
  opacity: .5;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}
.footer_row aside {
  color: #fff;
}
.footer_row aside p.emphasis {
  margin: 30px 0px;
  font-size: 15px;
}
.footer_row aside p.emphasis.bg {
  font-size: 21px;
}

.btm_links {
  position: relative;
  padding-bottom: 200px;
  width: 100%;
  text-align: center;
}
.btm_links ul li {
  display: inline;
  margin-right: 21px;
}
.btm_links ul li a:hover {
  color: #336699;
}

.lightbox {
  visibility: hidden;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.85);
  padding-top: 50px;
}
.lightbox img {
  height: auto;
  width: 100%;
  text-align: center;
  margin: auto;
}
JS
var stories = [
  {
    "hero-image": "http://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/coa/CoA_demo.gif",
    "hero-image-type": "image",
    "title": "OpenGov Chart of Accounts Editor",
    "blurb": 
      ["Redesigned a tool for editing financial taxonomies. The tool plays a critical role in how users manage their data and is effectively the backbone of OpenGov's platform experience."]
    ,
    "bullets": [
      "Worked closely with subject-matter experts to understand both internal-user and customer needs",
			"Developed a novel visualization/navigation that users have found not only more usable but more enjoyable",
      "Conducted usability tests and gathered feedback from CS to make the tool more robust and easier to navigate",
			"Contributed code to help refine the UI"
    ],
    "cta": "OpenGov Chart of Accounts Editor"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/og_network/network.png",
    "hero-image-type": "image",
    "title": "OpenGov Network",
    "blurb": ["Starting with a simple internal feature-request, I helped develop the concept into an entirely new app for the OpenGov platform. It became an internal and customer hit that allowed users to experience OpenGov in an entirely new way."],
    "bullets": [
      "Focused long-term platform goals into an MVP",
      "Sparkline-style charts create a simple yet data-rich experience",
			"Focused filtering options based on understanding of user priorities",
			"Designed strategically to leverage other existing platform apps"
    ],
    "cta": "OpenGov Network"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/uplink/uplink_in_browser.png",
    "hero-image-type": "image",
    "title": "Hightail Uplink",
    "blurb": ["I advocated giving more attention to a popular yet neglected product and eventually was charged with leading a complete redesign (Fall 2013)"],
    "bullets": [
      "Used user-preferences as qualitative data to examine user needs. This proved more effective than traditional analytics and allowed us to gain early insight without costly user-interviews.",
      "Prototyped concepts in html/css/javascript in order to try out different layouts and transitions",
      "Created key onboarding and engagement experiences that produced significant upticks in adoption and engagement (+8k users and +45k file-sends in the first 3 months)"
    ],
    "cta": "Hightail Uplink"
  },
  {
    "hero-image": "//player.vimeo.com/video/95018028?title=0&byline=0&portrait=0",
    "hero-image-type": "video",
    "title": "Hightail for Enterprise",
    "blurb": [
      "As lead designer for Hightail's enterprise products, I created or redesigned many major features and oversaw the implementation of integrations by outside contractors. I was also chosen as an official liaison, responsible for communicating needs and promoting Design thinking to the enterprise business unit. (Fall 2011 - Summer 2014)",
      "Major features worked on:"
    ],
    "bullets": [
      "Reporting, as well as exporting and scheduling of reports",
      "Admin dashboard",
      "User-group administration",
      "Admin-policy configuration",
      "Integrations with SharePoint, SalesForce, IBM, and Netsuite"
    ],
    "cta": "Hightail for Enterprise"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/ent_reporting/usageReport_improve_cropped.png",
    "hero-image-type": "image",
    "title": "Hightail Usage Report",
    "blurb": [
      "I concepted and designed an administrative feature for enterprise accounts to meet e-discovery requirements. The feature gave admins a simple yet powerful interface to browse activity, monitor collaboration between internal employees and external contractors, and take action to investigate or block suspicious actions. I also pushed to include important usability and navigation improvements to the larger admin console as part of the project.",
			"Usage Report was the most advanced feature that Hightail offered and was often a highlight of sales demos. (Fall 2012)"
    ],
    "bullets": [],
    "cta": "Hightail Enterprise Usage Report"
  },
  {
    "hero-image": "//player.vimeo.com/video/22869156?title=0&byline=0&portrait=0",
    "hero-image-type": "video",
    "title": "Pervasive Interaction and Experience Design",
    "blurb": ["I worked with classmates to design and prototype a ubiquitous-computing experience for the University of Michigan’s brand-new North Quad Residential complex. We used contextual inquiry and “speed-dating” techniques to understand users and the physical environment. The project required us to design for an ecosystem of wall-displays, smartphones, and web-apps. We presented to community directors and developed concept videos. The final prototype featured live QR-codes and semi-responsive adaptive text. (Spring 2010)"],
    "bullets": [],
    "cta": "Pervasive Interaction and Experience Design"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/ysi_usability/ysi_mobileapp_homepage.png",
    "hero-image-type": "image",
    "title": "Guerilla Usability-Testing at YouSendIt",
    "blurb": [
      "As part of a complete redesign of YouSendIt's iOS app, I performed a variety of usability tests with no budget. Uncovered frustrating visual-design flaws, allowing the team to redesign before launch. (Summer 2012)",
      "Tests included:"
    ],
    "bullets": [
      "Coffee shop usability surveys — camping out at coffee shops, I exposed volunteers to candidate page-layouts and iconography",
      "In-house user-testing — I tested clickable mock-ups with internal volunteers to assess the usability of folder/file interaction paradigms"
    ],
    "cta": "Usability testing at YouSendIt"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/intel/intel_collage.png",
    "hero-image-type": "image",
    "title": "Human-Factors Engineering at Intel",
    "blurb": ["As a Summer Intern with Intel's Human Factors Engineering team, I performed a usability study on the “Circuit” web-portal, the home-page for the majority of Intel’s 80,000+ employees. (Summer 2010)"],
    "bullets": [
      "Collaborated with a mentor to conduct card-sorting exercises for 340+ users",
      "Designed a branching survey flow that interconnected a Qualtrics survey with a web-based card-sorting tool",
      "Conducted 25+ user interviews and produced affinity notes and observations",
      "Designed and lead group participatory-design sessions"
    ],
    "cta": "Card-sorting and interviewing at Intel"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/tcs/qualcomm.png",
    "hero-image-type": "image",
    "title": "Qualcomm trucking apps",
    "blurb": ["As a consultant at Tata Consultancy Services, I worked with Qualcomm to design Android versions of two apps from the truck-based Mobile Computing Platform. I delivered specs for phone and tablet versions that took into account safety considerations and government regulations. (Fall 2011)"],
    "bullets": [
      "Compliance — An accountability app that tracked driving hours, logs, and other information in accordance with strict regulations. Allowed drivers to perform vehicle inspections and present their logs to highway patrol officers upon request. Included a locked "driving mode" to meet safety requirements.",
      "Fleet Visibility — A tracking app that gave drivers an overview of their trip plan, including designated drops, fuel stops, and other tasks."
    ],
    "cta": "Qualcomm trucking apps"
  },
  {
    "hero-image": "https://s3-us-west-1.amazonaws.com/morgankeysdotcom-assets/imgs/hightail_for_android/ht-for-android.png",
    "hero-image-type": "image",
    "title": "Hightail for Android",
    "blurb": ["Assisted in the redesign of Hightail's Android app. Worked on the mechanics of shared-folder invites and managing user-permissions as well as file-sending controls. (Spring 2014)"],
    "bullets": [
      "Check out the app here<\/a>."
    ],
    "cta": "Hightail for Android"
  }
];

class Story extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      stateVar: this.props.stateVar
    };
    this.handler = this.handler.bind(this);
  }
  
  handler(event) {
    return null;
  }

  render() {
    return (
      

{this.props.content["title"]}

{this.props.content["hero-image-type"] == "video" ? (
) : ( )}
{this.props.content["blurb"].map(function(object, i){ return

{object}

; })}
    {this.props.content["bullets"].map(function(object, i){ return
  • {object}
  • ; })}
); } } class Footer extends React.Component { constructor(props) { super(props); this.state = { stateVar: this.props.stateVar }; this.handler = this.handler.bind(this); } handler(event) { return null; } render() { return (
); } } class Main extends React.Component { constructor(props) { super(props); this.state = { stateVar: this.props.stateVar }; this.handler = this.handler.bind(this); } handler(event) { return null; } render() { return (

Hi, I'm Morgan.

I'm a product designer who loves decision science, complex adaptive systems, and people. Most of all, people. Take a look around and then let's chat.

{stories.map(function(object, i){ return ; })}
); } } ReactDOM.render(
, document.getElementById("react"));
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv