kerrinrose.com/mango.html at master · kerrinrose/kerrinrose.com · 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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
    </title>
     <link rel="icon"
      type="image/png"
      href="images/icon.png">
    <link href="http://cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.css" type="text/css" rel="stylesheet" />

<link href="http://cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />


    <link rel="stylesheet" type="text/css" href="css/style.css">
       <script src="https://use.typekit.net/cpx7tuy.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
    <style>

     .mango-hero {   background: url("images/bg-home-mango.jpg") no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
         background-color: #eee;}
    </style>

<body>
    <header>
        <a href="index.html"><img src="images/logo.png"></a>
        <nav>
             <a href="index.html#hello">Hello</a>
            <a href="index.html#worknav">My Work</a>
            <a href="about.html">About Me</a>
            <a href="index.html#contact">Contact</a>
        </nav>
    </header>

   <section class="project-hero mango-hero">
        <section class="container tint">
     <h1>Tracking your symptoms with Mango Health</h1>
            <P>Designing a feature for Mango Health curiously absent from the platform</P>
        </section>

    </section>
    <section class="case-study">
      <section class="row">

<!--
          <div class="grid-12">

              Summer 2015 | Skills Utilized: Research, Prototyping, Wireframing

          </div>
-->


    <section class="row">
      <section class="work-row">
    <div class="grid-6">
        <h1>The Missing Feature</h1>
        <p>
                For myself as well as many others on medication, remembering to take your medicines each day at the right time is really important, so I've used Mango Health in the past. I recently switched to a new medicine, and in addition to taking my medicine at the same time each day, I needed to pay close attention to how I felt each day so I could report back to my doctor in a few weeks. Thousands of other people go through this same experience. On Mango Health's website they allude to a tracking feature, but it was no where to be found. My answer to the KPCB design challenge was to imagine this feature as part of Mango Health.


        </p>

            <i>Please note the UI seen below is a simplified mockup of Mango Health's existing interface, not my own design. My contribution was adding screens and interactions for a new feature.</i>

        </div><!-------
---><div class="grid-6 info vert-top">

                         <a href="#" data-featherlight="images/rhythm.png"> <img src="images/rhythm.png" width="100%"></a><i>This is from Mangohealth.com, on the app I couldn't find this feature anywhere.</i>
        </div> </section></section>


        <section class="row"><div class="grid-7 vert-top">

               <h1>Tracking Symptoms</h1>
          <p>


    I created a medium fidelity mockup to exhibit how I think the new symptom tracking feature would work. I created a quick visual representation in the wireframes similar Mango Health's actual design to show consistanctly without distracting too much from what I was trying to show. To the right is the option users would have available to them to track their symptoms when adding a new medication. Similar to the reminder option, the user can set a time where they will be prompted to track how the medicine is making them feel.

        </p>


            </div><!---
    ---><div class="grid-5 vert-top">
                         <a href="#" data-featherlight="images/mangohealthredesign-web_track-symptoms-options.png"> <img src="images/mangohealthredesign-web_track-symptoms-options.png" width="100%"></a>

            </div><!-------
---></section>

              <section class="row">
  <!-------
---><div class="grid-7">
                  <a href="#" data-featherlight="images/mangohealthredesign-web-10.png"> <img src="images/mangohealthredesign-web-10.png" width="100%"></a>
 </div><!---
---><div class="grid-5">
        <p>
            The symptom check-in would begin with three simple options, do you feel good, bad, or the same? If the user taps either the good or bad feelings, they will be prompted to choose from symptoms commonly associated with that medicine type. Mango Health already has access to all of this data as seen in the medication alerts that are available with each medication the user adds. The user also has the option to input custom symptoms under "Other" if they don't see what they're looking for. Once they've entered the symptoms for say, positive feelings, there's the option to go back and enter negative symptoms as well.

            </p>


        </div></section>

          <section class="row"><div class="grid-5 vert-top">


          <p>


 Once the user has entered their symptoms for the day, the corresponding icons will be added to the schedule, giving this feature added functionality by providing a quick way to look back and see how you were feeling on a given day. Lastly, a new tab is added to the medicine's information page, the log. The log will short your most common symptoms and how the user has felt from week to week. <em>The purpose of this feature is to make communicating with one's doctor a lot easier. When the user returns to the doctor's office to report on how they've been doing, rather than struggling to remember the details, they'll be able to confidently respond. "Well, my most common symptom is dizziness, but my mood has improved a lot. In week one and two I had headaches but they disapeered in week three".
         </em>

        </p>


            </div><!---
    ---><div class="grid-7 vert-top">
                         <a href="#" data-featherlight="images/mangohealthredesign-11.png"> <img src="images/mangohealthredesign-11.png" width="100%"></a>

            </div><!-------
---></section>


          <h2>Prototype Video</h2><br>
   <center><iframe src="https://player.vimeo.com/video/153630398" width="800" height="581" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </center>

    <section class="row" class="gallery" data-featherlight-gallery
  data-featherlight-filter="a">

        <h2>Sketches</h2>

        <div class="grid-3 vert-top">
        <a href="images/IMG_20160130_013536464.jpg"><img src="images/IMG_20160130_013536464.jpg" width="100%"></a>
        </div><!---
--->  <div class="grid-3 vert-top">
        <a href="images/IMG_20160130_013524611.jpg"><img src="images/IMG_20160130_013524611.jpg" width="100%"></a>
        </div>


          </section>
       <h2>Wireframes</h2>

    <section class="row" class="gallery" data-featherlight-gallery
  data-featherlight-filter="a">
          <div class="grid-3 vert-top">
        <a href="images/mangohealthredesign-web_track-symptoms-options.png"><img src="images/mangohealthredesign-web_track-symptoms-options.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-02.png"><img src="images/mango/mangohealthredesign-02.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-03.png"><img src="images/mango/mangohealthredesign-03.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-04.png"><img src="images/mango/mangohealthredesign-04.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-05.png"><img src="images/mango/mangohealthredesign-05.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-06.png"><img src="images/mango/mangohealthredesign-06.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-07.png"><img src="images/mango/mangohealthredesign-07.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-08.png"><img src="images/mango/mangohealthredesign-08.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-09.png"><img src="images/mango/mangohealthredesign-09.png" width="100%"></a>
        </div><!---
---><div class="grid-3 vert-top">
        <a href="images/mango/mangohealthredesign-12.png"><img src="images/mango/mangohealthredesign-12.png" width="100%"></a>
        </div>
          </section>

        <hr />


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="http://cdn.rawgit.com/noelboss/featherlight/1.3.4/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/featherlight.gallery.js" type="text/javascript" charset="utf-8"></script>


    <script>


       $(document).ready(function(){
        $('a.gallery').featherlightGallery({
    previousIcon: '&#9664;',
    nextIcon: '&#9654'

});

       });

    </script>
</body>
</html>