Summary

I like to think of TalentMine as my baby. I was given the chance to create a new app from the ground up. Working closely with the, Product Director, and CIO, we gathered requirements for internal users. We wireframed (mobile-first of course), created clickable mockups, and conducted viability studies and demos with our clients. With some good feedback from our clients we mocked up changes and marched on to the development stage at full speed. After more input, from our developers this time, we had even more mockup changes. The decision was made to create this app in React, which was a new language for most of us on the team. This gave me to opportunity to code out react components and really dive into JavaScript while getting help from the team. We plan to release a beta version of the app this fall and hopefully full version by winter 2019.

The Team

4 devs, QA, PM, UI/UX (me)

Project Date

Jun 2018 - Sep 2020

Requirements Gathering

Wireframe

High Fidelity

Animated SVG

GoalTitleHere

<!-- code sample -->
<div class="tm-goal-bg">
  <h1 class="tm-goal-title">GoalTitleHere</h1>
  <svg width="100%" height="342px"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="position-absolute">
    <g fill-opacity="0.15">
      <polygon id="shape1-left" fill="#253765" points="197.701748 0 349 0 253.666667 350 -5.68434189e-13 350 -5.68434189e-13 0">
        <animate repeatCount="indefinite"  attributeName="points" dur="44s" values="
        197.701748 0 349 0 253.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        197.701748 0 349 50 253.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        187.701748 0 349 100 253.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        187.701748 0 349 130 223.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        217.701748 0 349 160 253.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        217.701748 0 329 130 263.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        217.701748 0 319 160 263.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        217.701748 0 329 200 273.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        217.701748 0 329 230 263.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;
        197.701748 0 349 0 253.666667 350 -5.68434189e-13 350 -5.68434189e-13 0;"/>
      </polygon>
    </g>
  </svg>

  <svg width="100%" height="342px"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="position-absolute">
    <g fill-opacity="0.15">
      <polygon id="shape2-left" fill="#253765" points="416 350 322.4 350 0 350 0 0 136.423529 0">
        <animate repeatCount="indefinite"  attributeName="points" dur="29s" values="
          416 350 322.4 350 0 350 0 0 136.423529 0;
          416 300 312.4 350 0 350 0 0 146.423529 0;
          416 270 242.4 350 0 350 0 0 146.423529 0;
          416 200 242.4 350 0 350 0 0 146.423529 0;
          416 150 212.4 350 0 350 0 0 146.423529 0;
          426 120 212.4 350 0 350 0 0 146.423529 0;
          416 90 202.4 350 0 350 0 0 146.423529 0;
          406 60 202.4 350 0 350 0 0 146.423529 0;
          396 30 192.4 350 0 350 0 0 146.423529 0;
          396 0 212.4 350 0 350 0 0 146.423529 0;
          416 300 312.4 350 0 350 0 0 146.423529 0;"/>
      </polygon>
    </g>
  </svg>

  <svg width="100%" height="342px"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="position-absolute" style="transform: scaleX(-1) scaleY(-1);">
    <g fill-opacity="0.15">
      <polygon id="shape3-right" fill="#253765" points="234 350 325 0 262 0 1.42108547e-14 0 4.73316543e-30 350">
        <animate repeatCount="indefinite"  attributeName="points" dur="32s" values="
        234 350 325 0 262 0 1.42108547e-14 0 4.73316543e-30 350;
        224 350 325 60 262 0 0 0 -1.42108547e-14 350;
        194 350 325 120 262 0 0 0 -1.42108547e-14 350;
        194 350 335 180 272 0 0 0 -1.42108547e-14 350;
        134 350 335 240 272 0 0 0 -1.42108547e-14 350;
        134 350 335 180 212 0 0 0 -1.42108547e-14 350;
        134 350 315 120 222 0 0 0 -1.42108547e-14 350;
        134 350 315 60 202 0 0 0 -1.42108547e-14 350;
        134 350 315 0 202 0 0 0 -1.42108547e-14 350;
        154 350 285 0 202 0 0 0 -1.42108547e-14 350;
        234 350 325 0 262 0 1.42108547e-14 0 4.73316543e-30 350;"/>
      </polygon>
    </g>
  </svg>

  <svg width="100%" height="342px"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="position-absolute" style="transform: scaleX(-1) scaleY(-1);">
    <g fill-opacity="0.15">
      <polygon id="shape4-right" fill="#253765" points="335 350 248 0 2.84217094e-14 0 2.84217094e-14 350 258 350">
        <animate repeatCount="indefinite"  attributeName="points" dur="60s" values="
        335 350 248 0 2.84217094e-14 0 2.84217094e-14 350 258 350;
        325 330 248 0 2.84217094e-14 0 2.84217094e-14 350 258 350;
        315 300 208 0 2.84217094e-14 0 2.84217094e-14 350 258 350;
        315 240 208 0 2.84217094e-14 0 2.84217094e-14 350 198 350;
        315 180 188 0 2.84217094e-14 0 2.84217094e-14 350 198 350;
        315 240 188 0 2.84217094e-14 0 2.84217094e-14 350 178 350;
        315 300 188 0 2.84217094e-14 0 2.84217094e-14 350 148 350;
        315 350 188 0 2.84217094e-14 0 2.84217094e-14 350 148 350;
        265 350 188 0 2.84217094e-14 0 2.84217094e-14 350 148 350;
        225 350 148 0 2.84217094e-14 0 2.84217094e-14 350 108 350;
        325 330 248 0 2.84217094e-14 0 2.84217094e-14 350 258 350;"/>
      </polygon>
    </g>
  </svg>
</div>

TalentMine

UI/UX Design, Front-end