ainsleywagon.github.io/primerpeso.html at master · ainsleywagon/ainsleywagon.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
---
layout: default
---

  <!-- page content -->
  <div class="wrapper project-page">
    <div class="row project-nav">
      <a class="button-link back" href="colorchart.html">back</a>
      <a class="button-link next" href="oam.html">next</a>
    </div>
    <div class="row project-header">
      <div class="col-md-7">
        <img src="images/PrimerPeso_Monitor.png" alt="PrimerPeso Monitor">
      </div>
      <div class="col-md-5 project-description">
        <h1>Code for America</h1>
        <h4 class="project-descr-subheader">Connecting small businesses in Puerto Rico with economic incentives.</h4>
        <p>During my Code for America Fellowship I worked with the government of
          Puerto Rico to address their $70 billion budget deficit in economic development.
          </p>
      </div>
    </div>

    <div class="row col-md-12">
      <img src="images/problemstmt+whiteboard.png">
      <img src="images/sketches+persona.png">
    </div>

    <div class="row col-md-12">
      <p class="project-text"><a href="http://www.primerpeso.com/">PrimerPeso</a> is an application that guides business
        owners through <a href="http://www.primerpeso.com/preguntas">10 questions</a>
        to receive filtered results of incentive
        programs they are eligible for. I designed the user experience and was
        responsible for the look and feel of our product including how we
        communicated our progress to our partners and stakeholders.
      </p>
    </div>

    <div class="row col-md-12">
      <img src="images/primerpeso_landing_finaltouchup.png" style="width: 600px; height: auto;">
      <p class="project-text">
        I fully owned the CSS (LESS) and style of the
        application. I worked closely with my developer teammate to learn the information
        architecture of a node.js application and execute the front-end styling
        of our application. I also learned to read and write Jade.
        <br>
        <br>
        I sharpened my visual design skills as well as my coding skills. I did a
        lot of illustration to communicate the types of incentives they would
        find on the site. I loved translating abstract concepts into something beautiful.
      </p>
    </div>

    <div class="row col-md-12">
      <img src="images/icons.png" style="max-width: 741px;">
      <p class="project-text">One of the most rewarding parts of developing this
        product was conducting user testing. Validating (or not!) our assumptions
        along the way made our product strong from the very beginning and kept
        my design priorities clear and intentional.
        <br>
        <br>
        In user testing - through the use of different colors, custom illustrated
        icons, and intuitive user interactions - the user’s attitude completely
        changed. They forgot their built-up biases and enjoyed clicking through
        and receiving easy-to-read information. They were empowered and confident
        about making the decision to apply for these incentives.
      </p>
    </div>

    <div class="row col-md-12">
      <img src="images/prototypes.png">
      <img src="images/user_testing.png">
      <p class="project-text">By opening up this knowledge and designing a great
        user experience, small business owners are better equipped to find the
        resources they need to grow their own operations as well as fueling the larger economy.
      </p>
    </div>

    <div class="row col-md-12">
      <img src="images/landingpagedevelopment.png">
      <p class="project-text">
        Tools I used on this application were: Lots of notebooks and sketchbooks,
        Sketch, Webflow for prototyping, Illustrator for graphics, Atom text editor
        for coding, LESS, and Node.js
        <br>
        <br>
        We took great care to document our process along the way.
        You can read more in our <a href="http://chronicles.coquicoders.org/">year-end report</a>.
      </p>
    </div>

    <div class="row project-nav last">
      <a class="button-link back" href="colorchart.html">back</a>
      <a class="button-link next" href="oam.html">next</a>
    </div>
  </div>