/
case-study-railsgirls.html
411 lines (370 loc) · 18 KB
/
case-study-railsgirls.html
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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>marci papineau | design & code </title>
<meta name="description"
content="Marcipapineau.com – Design, Product Development and Code for the digital world." />
<!-- general og:tags -->
<meta property="og:title" content="Marci Papineau – Making Digital Products" />
<meta property="og:url" content="https://www.marcipapineau.com/">
<meta property="og:image" content="http://marcipapineau.com/images/marcipapineaudocom.jpg" />
<meta property="og:description"
content="The place to go in Copenhagen for quick websites, and startup prototypes. Always mobile friendly webdesign." />
<meta property="og:site_name" content="www.marcipapineau.com" />
<!-- twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@marcipapineau" />
<meta name="twitter:title" content="marci papineau | design & code" />
<meta name="description" content="Marcipapineau.com Design, Product Development and Code for the digital world." />
<meta name="twitter:creator" content="@MarciPapineau" />
<meta name="twitter:image:src" content="https://marcipapineau.com/images/marcipapineaudocom.jpg">
<meta name="format-detection" content="telephone=no">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" sizes="16x16" type="image/png" href="images/favicon.png">
</head>
<body>
<a name="navbar"></a>
<div class="navbar-wrapper">
<div class="navbar-logo-container">
<a href="index.html"><img src="images/logo.png" id="logo" alt=""></a>
</div>
<div class="links-container flex-end">
<ul>
<a href="index.html" class="nav">
<li>home</li>
</a>
<a href="#contact" class="nav">
<li>contact</li>
</a>
</ul>
</div>
</div>
<!-- below spacer above image -->
<div style="height: 60px;"> </div>
<div class="max-width-1440">
<div class="case-text-header">
<h5 class="">Rails Girls Copenhagen</h5>
<div class="subhead">Mentoring platform made
to connect women looking for help in technology with a mentor
</div>
<div class="banner-railsGirls" style="background-image: url('images/rg-1.png');">
</div>
</div>
<!-- below banner gives padding to proj. banner. gives padding -->
<div class="portfolio-banner">
<div class="case-text-box">
<div class="headlines-in-banner">
Business Case
</div>
<p class="p-margin-top-none">
Rails Girls is an international non profit organization helping women learn to code and become more involved in
tech.
I help run the Copenhagen chapter. We were looking to work on an open source project and came up with the idea of building a mentorship app.
</p>
<div class="headlines-in-banner">
The Challenge
</div>
<p class="p-margin-top-none">
We want to connect women wanting to become more involved in tech with people already in different fields within the industry. As a group we are writing the code. At the same time, I have
been working on the design and flow of the app.
</p>
<div class="spacing-35px"></div>
<div class="cover">
<div class="video">
<video height="auto" width="100%" playsinline="" autoplay="" loop="" muted=""
src="images/RailsG.mp4"></video>
</div>
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Figma prototype </span> <br>
Sample of the design system in use– using predefined colors, typography and components.
Figma made it easy to make a prototype using the styles designed in the UI kit.
</div>
<!-- <div class="spacing-35px"></div> -->
<div class="headlines-in-banner">
Project Scope & Objectives
</div>
<p class="p-margin-top-none">The design side of the app needs the following things to be created–
<span class="medium">
<span class="extra-bold red"> »</span> <span class="semi-bold ">Design</span>
<span class="extra-bold red">»</span> <span class="semi-bold">Font Selection </span>
<span class="extra-bold red">»</span> <span class=" semi-bold">Prototype</span>
<span class="extra-bold red">»</span> <span class="semi-bold ">UI Kit </span>
<span class="extra-bold red">»</span> <span class=" semi-bold ">Wireframes</span>
<span class="extra-bold red">»</span> <span class="semi-bold ">User Stories </span>
<span class="extra-bold red">»</span> <span class="semi-bold">User Needs </span>
<span class="extra-bold red">»</span> <span class="semi-bold">User Personas. </span>
The final design will be used to code the app in Ruby on Rails and React.
</span>
</p>
<div style="height: 35px;"></div>
<div class="railsG-UIkit" style="background-image: url('images/rails-g-style-2.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">UI kit and style guide </span> <br>
The Figma file was a great place to do a design that would be easy to implement by multiple designers and
coders. There were components and style sheets created so it would be easy
to further develop the product.
</div>
<div style="height: 70px;"></div>
</div>
<div class="railsG-connections" style="background-image: url('images/rg-connections.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">The connections between elements </span> <br>
Working on a clickable prototype in Figma helped to make sure that everything on the page is accounted for. It
quickly shows holes in an early stage,
shortening the process of production.
</div>
<div class="spacing-50px"></div>
</div>
</div>
<div class="two-col-grid-container">
<div class="sample-box">
<div class="headlines-in-banner">
The Solution
</div>
<p>
✓ UI kit
</p>
<p>
✓ Prototype
</p>
<p>
✓ Design ready to be implemented into code
</p>
<p>
✓ Selection of colors, gradients and fonts
</p>
<p>
✓ Wireframes
</p>
<p>
✓ User personas
</p>
<div class="headlines-in-banner">
The Team
</div>
<p><span class="semi-bold"> Code </span>RailsGirls Copenhagen coders and mentors
</p>
<p><span class="semi-bold"> Design and Product Development </span>Marci Papineau Gottlieb</p>
</div>
<div class="sample-box-b">
<div class="headlines-in-banner">My Role</div>
<p class="">
I worked on the visuals including the design, wireframes, and user stories.
We collaborate over Slack to make sure what I am designing will work with the code.
We have simplified decisions for it to work as a MVP— especially in respect to database fields.
</p>
<div class="headlines-in-banner">Skills Utilized</div>
<p class="medium">
<span>»</span> Design <br>
<span>»</span> Prototyping <br>
<span>»</span> UI kit creation <br>
<span>»</span> Style Guide Creation <br>
<span>»</span> Coordination with mentees, mentors, frontend and backend developers <br>
</p>
<div class="headlines-in-banner" style="margin-top:30px;">Tech Used</div>
<p class="medium">
<span>»</span>
Figma <span>»</span>
Whimsical <span>»</span>
Pencil and Paper <span>»</span>
Bear
</p>
</div>
</div>
<!-- above closing div to 2 col container for 2 colored boxes -->
<div class="portfolio-banner-b peach-background">
<div class="case-text-box-uikit">
<div class="headlines-in-banner" style="padding-top: 30px">
UI Kit / Component Library Created in Figma
</div>
<p class="p-margin-top-none">
Style guide and component library for the app is used
by designers needing to create new designs and frontend developers
translating the design into code.
</p>
<div class="spacing-35px"></div>
<!-- typography -->
<div class="rails-g-typography" style="background-image: url('images/rails-g-style-typography.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Typography for large and small screens</span>
<br>
<span class="">
The font styles are named with developer terminology, h1, h2 p ...
They are also named with their function, helping designers quickly understand where to use them.
</span>
</div>
<div class="spacing-50px"></div>
<!-- <div class="orange-rule"></div> -->
<!-- colors -->
<div class="rails-g-colors" style="background-image: url('images/rails-g-style-colors.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Colors, shadows and gradients</span>
<br>
Colors are defined for both the designers and developers. Designers can easily use them while working on new designs. Being
that they are defined as variables, if the master colors are changed, they will take effect directly in the Figma prototype. These changes can then be brought
directly to the developers who can change the code for universal changes.
</div>
<div class="spacing-50px"></div>
<!-- buttons -->
<div class="rails-g-buttons" style="background-image: url('images/rails-g-style-buttons.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Buttons</span>
<br>
States being used in the product so far.
</div>
<div class="spacing-50px"></div>
<!-- assets -->
<div class="rails-g-assets" style="background-image: url('images/rails-g-style-assets.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Assets</span>
<br>
The assets here are created for the designers to use while designing new parts of the app. They are created as components,
linking them to all of the app– for example, if the nav bar needs to be altered, it is possible to do into the main
component, and have it carry down to all the screens designed thus far.
</div>
<div class="spacing-50px"></div>
<!-- cards -->
<div class="rails-g-cards" style="background-image: url('images/rails-g-style-cards.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Card components and grid </span>
<br>
The components here were built with the predefined styles highlighted above– typography, colors and assets.
The grid is a 5 pixel grid.
</div>
<div class="spacing-40px"></div>
<!-- <div class="spacing-50px"></div> -->
</div>
</div>
</div>
<!-- above closing div to 2 col container for 2 colored boxes -->
<div class="portfolio-banner">
<div class="case-text-box">
<div class="headlines-in-banner">The Process</div>
<p> <span class="bold">Step 1</span> Discussions with team on user needs for 2 types of users– mentors and
mentees.
This was extremely important as it greatly affected how the database would be created. We wanted to keep it
uncomplicated to keep release time quick.
</p>
<p> <span class="bold">Step 2</span> Discussions on user behaviors guided the creation of the wireframe.
</p>
<p> <span class="bold">Step 3</span> Sketched out layout ideas.
</p>
<p> <span class="bold">Step 4</span> Created a wireframe in Whimsical.
</p>
<p> <span class="bold">Step 5 </span> Started design with a UI template creating:
color palette,
typography,
form elements,
button styles,
card layouts,
shadow styles, and a
nav bar.
<p> <span class="bold">Step 6 </span>Started designing the app based on the above information.
<p> <span class="bold">Step 7</span> Worked with variables set in the style guide, making updates when
needed.
</p>
<p> <span class="bold">Step 8</span> Worked on clickable prototype in Figma
</p>
<p> <span class="bold">Step 9</span> Gathered feedback and made changes.
</p>
<p> <span class="bold">Step 10</span> Product is being coded with React and Ruby on Rails at the moment.
</p>
<div style="height: 50px;"></div>
<div class="railsG-color" style="background-image: url('images/rails-g-colors.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Color Studies from early on in the design</span>
<br>
We were not planning on using photographs, so I wanted to keep the colors fun and lively to draw users
into the product. Used UI gradients.com, Google's Material Design Color Tool and MyMind for color inspiration.
</div>
<div class="spacing-50px"></div>
<div class="banner-case" style="height: 478px; background-image: url('images/rails-g-whim-1.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Product Pitch and User Stories </span> <br>
The product was defined and user stories were written to guide in the development of the product.
</div>
<div class="spacing-50px"></div>
<div class="banner-case" style="height: 478px; background-image: url('images/rails-g-whim-2.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Primary actions for the 2 types of users– mentors
and mentees</span> <br>
User journeys were written based on conclusions from the product pitch and user stories. These were used
to make an initial wireframe.
</div>
<div class="spacing-50px"></div>
<div class="banner-case" style="height: 508px; background-image: url('images/rails-g-whim-3.png');">
</div>
<div class="spacing-25px"></div>
<div class="caption">
<span class="bold" style="text-transform: uppercase;">Wireframe based on the defined user journey</span> <br>
The wireframes were reviewed by the developers planning on working on the project. There were compromises
made in some areas in order to keep the initial code uncomplicated.
</div>
<div class="spacing-50px"></div>
</div>
</div>
</div>
<!-- <div style="height: 40px;"></div> -->
<!-- below end of case text box -->
</div>
<!-- below div closing to portfolio-banner -->
</div>
<a name="contact"></a>
<div class="footer">
<div class="footer-wrapper">
<div>
<a href="index.html"> <img src="images/logo.png" id="logo" alt="" style="margin-left: -8px; margin-top:10px;">
</a>
<div class="samplename infoleft">
<p class="medium">Marci Papineau Gottlieb <br>
+45 2447 3457 <br>
<a style="color: #fc4827;" href="mailto:marcidenmark@me.com "> marcidenmark@me.com</a></p>
</div>
</div>
<div class="footer-social">
<ul style="padding-left:0px;">
<li><a href="https://www.github.com/marcidenmark" target="_blank "><i class="nav fab fa-github fa-1x"
style="color:#fc4827;"> </i></a></li>
<li> <a href="https://www.linkedin.com/in/marcidenmark/" target="_blank"><i class="fab fa-linkedin fa-1x"
style="color:#fc4827;"> </i></a></li>
<li> <a href="https://twitter.com/marcipapineau" target="_blank"><i class="fab fa-twitter fa-1x"
style="color:#fc4827;"> </i></a></li>
<!-- <li> <a href="#navbar"> <i class="nav fas fa-angle-double-up" style="font-size: 30px; color: #f0ffff;"> </i> </a> </li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </script> empty closing tag? -->
</body>
</html>