-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathiterative.html
More file actions
219 lines (199 loc) · 13.4 KB
/
iterative.html
File metadata and controls
219 lines (199 loc) · 13.4 KB
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
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title> Minna K-T </title>
<link href="./iterative.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/png"
href="./images/favicon/favicon.ico" />
</head>
<body>
<div class = "wrapper">
<div class = "confetti"> </div>
<div class = "container">
<div class = "header">
<div class = "name">
<a href="./index.html">MINNA KIMURA-THOLLANDER</a>
</div>
</div>
<div class = "content">
<div class="intro">
<div class="title-box">
<div class = "title-big">Buy Me a Coffee</div>
<img src="./images/iterative/coffee-icon.svg" height="60">
</div>
<div class = "date"> Nov 2019 | UI/UX</div>
<div class = "summary">
This was an interesting exercise in design where we created a redesign of a webpage...
without ever looking at the original webpage! Given a couple startups with an accompanying
description, we chose Buy Me a Coffee, which was described as "a platform for creators to receive
monetary support from their fans." Basically, you can think of it as Patreon v2.0 with a focus on
microtransactions.
</div>
<div class = "summary">
This was a team project! Meet the gang & what they were in charge of:
<ul>
<li> Katherine Sang — prototyping, interaction</li>
<li> Julie Wang — sketching, prototyping</li>
<li> Dain Woods — user testing, writing</li>
<li> Me — prototyping, illustrating</li>
</ul>
</div>
</div>
<div class = "paragraph">
<div class = "title">Sketching</div>
<div class = "summary">
The initial sketches were created by the lovely Julie Wang, who made 4 sets
of conceptual sketches.
</div>
<div class = "image-grid">
<div class="box1"> <p>Sketch #1</p> </div>
<div class="box2"> <p>Sketch #2 </p> </div>
<div class="box3"> <p> Sketch #3 </p></div>
<div class="box4"> <p>Sketch #4 </p></div>
</div>
<div class = "summary">
After discussing each design, we decided to go with sketch #1 because the home page
best represented the diverse target audiences of users (artists, podcasters, educators),
while the profile page enabled the user to engage with their fans through posts and a
gallery of their content. </div>
<div class = "summary">
We ruled out Sketch #2 and #4 because they both attempted to recommend personal suggestions to users,
which conflicts with the original goal of the startup. Buy Me a Coffee is not a platform for user
entertainment, but a platform for charitable donations.
Additionally, a recommendation system could negatively affect the customer base, as creators have to feel
incentivized that their profiles might actually be seen. In that sense, sketch #1 allows diverse categories of creators
to be presented without algorithmic bias, allowing more fairness in terms of what is advertised!
</div>
<div class = "summary">
Meanwhile, we also ruled out sketch #3 because we thought the emphasis on
monetary statistics was too heavy for a landing page.
</div>
</div>
<div class = "paragraph">
<div class = "title">Style Sheet</div>
<div class = "summary">
This was something new to me! The first thing we did to get a feel for our design was
create a style sheet, which looks like the following:
</div>
<img src ="./images/iterative/concept-slide.PNG" width="600">
<div class = "summary">
This was actually Julie and Katherine's idea. I had never thought about making
a style sheet before prototyping, and after doing so I highly recommend it!
Not only does it help you understand the "look" you are going for, but it saves you time
because you don't have to scramble for assets at a later time.
This was an important experience in which I learned from the practices of other designers.
</div>
<div class = "summary">
For our font combination, we selected Quattrocentro Sans (sans serif) and Zilla Slab (slab serif),
as they make a playful, light impression.
For our color palette, we were coffee-inspired (black, white, brown), with
some pastels thrown in for accents.
</div>
</div>
<div class = "paragraph">
<div class = "title">Illustrations</div>
<div class = "summary">
We also decided that we wanted to include illustrations to represent different
tiers of donations. So, for example, $1 might be a coffee icon, while $10 might be
a cake.
</div>
<div class = "summary">
I had the pleasure of making the illustrations in Adobe Illustrator!
</div>
<img src ="./images/iterative/123.svg" width="600">
<div class = "summary">
The reason we represented the donation tiers as food is to show donors the physical value of
their donations. For example, if they donate a sandwich, they
are essentially buying the creator lunch. These kind of concrete ideas encourage empathy and
help donors conceptualize the positive financial impact of their donation.
</div>
<div class = "summary">
The gift box is the odd one out, but there's a reason for that— it represents
a custom donation where the donor chooses how much money they are giving.
</div>
</div>
<div class = "paragraph">
<div class = "title">Prototyping & Crit</div>
<div class = "summary">
Julie, Katherine, and I created the high fidelity mockups in Figma. We prioritized a
minimalistic design and tried to ensure that a user would not be confused by our layout.
</div>
<div class= "summary">
After creating our initial mockup, we presented our design to other students at Brown to receive
critical feedback that we could use to improve our design. One of the suggestions
we received was to show the name and profile of the creator you are donating to
so contributors 1) can easily confirm they are indeed donating to the right person,
and 2) invoke empathy by reminding them they are contributing to the livelihood of
one of their favorite creators. We really liked this idea, so we went back and changed
our prototype to display the user profile throughout the donation sequence!
</div>
<div class = "summary">
We finished up our prototype by polishing our mockup and defining the interactions between pages.
Here are some key screenshots from the final product:
</div>
<div class = "screen-grid">
<div class="screen1"> </div>
<div class="screen2"> </div>
<div class="screen3"> </div>
</div>
<div class = "summary">
If you'd like to see the full, interactive mockup click <a target="_blank" href="https://www.figma.com/proto/wAsw5G540Iw4CNsqYwGOXX/ Buy-Me-A-Coffee-Interaction?node-id=134%3A9&scaling=scale-down"> here</a>!
(Note that you might have to press 'R' on your keyboard to reset and start from the landing page.)
</div>
</div>
<div class = "paragraph">
<div class = "title">User Testing</div>
<div class = "summary">
We honestly didn't do a lot of user testing, but we did get feedback from 3 users on UserTesting.com.
In general, there didn't seem to be much confusion about how to use the website, but some of the tasks
took longer than they ideally should have. We think these results were slightly skewed because
there were some technical issues where two of the users were
not able to scroll, likely causing the task execution time to increase. We weren't able to resolve the issue
as we could not figure out if this was occuring on UserTesting.com's end or Figma's end, so we had to roll
with these results.
</div>
<div class = "summary">
Thankfully, two of the users gave us high ratings of 9 and 10, so we were very happy with that! Ideally, we would
do more user testing if this was a real, deployable user application, but we got a little taste
of what it would be like to do UI/UX research through this process.
</div>
</div>
<div class = "paragraph">
<div class = "title">Reflection</div>
<div class = "summary">
At the end of the project, we were able to look at the actual website! I'll just provide a screenshot here if you
don't feel like navigating to their website:
</div>
<img src="./images/iterative/real.PNG" width="800px">
<div class = "summary">
We were all really surprised at how different it was. During our design process we hyper-focused on the coffee aspect,
but you can see in the screenshot above that they didn't really use coffee as their motif.
</div>
<div class = "summary">
We emailed our design to Buy Me a Coffee, expecting no reply, but to our surprise we received one from the CEO,
Jijo Sunny. It was touching to receive an email back from a startup, because typically I would think they
are too busy to respond to students.
</div>
<img src="./images/iterative/jijo.PNG" width="650px">
<div class = "summary">
Overall, this project was an unique challenge in using our imagination, and a worthwhile exercise in website design.
Though this design will never become a reality, I felt that this project gave me new insights into the design process,
and and I learned about refining projects according to feedback.
</div>
</div>
<div class = "back2top">
<a href="#top">Back to top of page</a>
</div>
</div>
</div>
</div>
</body>
</html>