-
Notifications
You must be signed in to change notification settings - Fork 0
/
duolingo.html
333 lines (294 loc) · 15.4 KB
/
duolingo.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
<!DOCTYPE html>
<html>
<!--here goes the meta data -->
<head>
<title>Duolingo</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="duolingo.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="project_pictures/icon.png" type="image/x-icon" />
</head>
<!--Here goes all of the content of the page -->
<!-- Header of the page -->
<!-- Floating Menu -->
<main>
<nav class="floating-menu">
<h3 class="h3-menu">MENU</h3>
<a href="#brief">The Brief</a>
<a href="#research">Insights</a>
<a href="#ideation">Ideation</a>
<a href="#prototype">Campaign</a>
<a href="#video">Final delivery</a>
</nav>
</main>
<!-- End floating Menu -->
<!-- Email bubble -->
<main>
<nav class="email-float">
<a class="mail-link" href="mailto:hanna.e.larsson@hyperisland.se"
><img class="email-size" src="project_pictures/Group 305.png"></a>
</nav>
</main>
<!-- End of email bubble -->
<body>
<header>
<div class="logo-wrapper">
<a class="logo" id="logo" href="index.html"
><img class="logo-img" src="project_pictures/logo-HL-thicker.png" alt="Hanna Larsson logo" />
</a>
<h1>Hanna Larsson is a Digital Designer based in Stockholm.</h1>
<ul class="menu-list">
<li class="menu-portfolio">
<a href="index.html">Portfolio</a>
</li>
<li class="menu-about"><a href="about.html">About</a></li>
</ul>
</div>
</header>
<!-- End of the header -->
<!-- Portfolio page -->
<!-- Project 1 (H&M - Human-Centered Design) -->
<div class="description">
<div class="text-width">
<h1 class="project-head">Including Duo in daily life</h1>
<p>
Duolingo is the world’s #1 language learning app – used by hundreds of millions of learners around the world. The benefits of learning another language are exponential, from boosting brain power to reducing global economic inequality.
</p>
<p>Duoling was founded on the belief that learning should be fun. In this brief I aimed to open young adults’ eyes to the world of languages and inspire them to weave language learning into their daily routine, with an integrated campaign launching at the start of the school year. </p>
<p class="disclaimer">
<a class="disclaimer" href="#video">Click here to see the final delivery for the D&AD - Duolingo brief   ➔</a>
</p>
</div>
</div>
<!-- 2nd section (picture horizontal) -->
<div class="img-container">
<img class="img-horizontal" src="duolingo/211112950_351503113007971_4081832575531908228_n.png" alt="A picture of a mobile phones screen showing the portotype of the app Assorted" />
</div>
<!-- Summary of the case -->
<div class="summary-parent">
<ul class="summary-list1">
<li><b>Duration:</b> 72 hours</li>
<li><b>Scope:</b> Strategy / Advertisement</li>
<li><b>Location:</b> Stockholm, Sweden</li>
</ul>
</div>
<div class="summary-parent">
<ul class="summary-list2">
<li><b>Client:</b> Duolingo</li>
<li><b>My role:</b> Copywriting/Production</li>
<li><b>Team size:</b> 2 team members</li>
</ul>
</div>
<!-- End of summary for the case -->
<!-- 3rd section -->
<div class="description-3">
<div class="text-width">
<h2 class="h2-7">The Challenge</h2>
<h3 id="brief" class="project-head-3">The brief</h3>
<p>
The brief, as given by D&AD - New Blood Awards was to figure out how to put Doulingo in the hands of 16-22 year olds all around the globe through an integrated campaign that drives them to download and use Duolingo. By weaving language into their daily routines early on, lanuage learning is more likely to stick with them.
</p>
<div class="img-box">
<a href="https://www.dandad.org/" target="_blank"><img class="img-creative" src="Spotify-pics/d&ad.png"></a>
<p class="explain">The goal was to get more 16-22 year olds around the globe to regurarly use Duolingo.</p>
<ol class="deliver">
<h2 class="h2-list-4">The challenge came with some clear deliverables:</h2>
<li>Find & present key research insights</li>
<li>Briefly explain the creative process</li>
<li>Clearly explain the solution in a 2 minute <a href="#video"></a><u>video</u></a></li>
</ol>
</div>
<p>In the brief Duolingo also requested some research and insights to be highlighted that makes the solution truly speak to the audience. The key insights from the research is presented below.</p>
</div>
</div>
</div>
<!-- The 5th section -->
<div class="description-5">
<div class="text-width">
<h2 class="h2-7">Main insights</h2>
<h3 id="research" class="project-head-5">A day in the life</h3>
<p>
Due to that we chose to solve the brief in a sprint-format over only three days we had limited time for conducting research. However, we managed to do some desktop research and interviews with family and friends in parallel to our studies before going into the sprint.
</p>
<p>
From the information we gathered we mapped out a "regular" day in the life of a 16-22 year old, which is shown below. For a high-fi version of the map of a regular day, <u><a href="https://www.figma.com/file/56OXCsQo2k671vOOIJ0d8x/Duolingo-Insights?node-id=0%3A1">click here.</a></u> Inside the map of activities we then mapped out where in the day it would fit best for the target audience to have time/be prone to practice Duolingo.
</p>
<p>Lastly, in the mapping of the daily routine we could see three clear touch points where there would be room for a new habit of Duolingo; <b>(1) In the morning Social media routine just after waking up</b>, <b>(2) commute back and forth to school</b> and <b>(3) the afternoon and evening stream.</b></p>
<a href="https://www.figma.com/file/56OXCsQo2k671vOOIJ0d8x/Duolingo-Insights?node-id=0%3A1"><img class="overview" src="duolingo/Frame 208.png" alt="Overiew of the research conducted" /></a>
<p class="explain">The map shows activities in a regular day where Duolingo would fit in - Click the image for a high resulution version of the map.</p>
<ul class="deliver">
<h2 class="h2-list-4">More insights about the target group:</h2>
<li>They view being knowledgeable as "cool"</li>
<li>They are passionate activists</li>
<li>They see themseleves as more connected with culture than previous generations</li>
<li>They do not watch television, but consume a lot of content on other platforms and get their news from social media</li>
</ul>
</div>
</div>
<!-- Quote from research -->
<!-- <div class="quote">
<div class="quote-child">
<blockquote class="blockquote">
I am not great at buying sustainable clothes and I feel guilty about
it
</blockquote>
</div>
</div> -->
<div class="img-container">
<img class="img-horizontal" src="duolingo/duotrain.png" alt="A picture of a mobile phones screen showing the portotype of the app Assorted" />
</div>
<!-- 7th section -->
<div class="description-problem">
<div class="text-width">
<h2 class="h2-7">Problem statement & How might we..</h2>
<h1 class="project-head-3">Defining the need</h1>
<p>
After we had understood how a regular day looks like for 16-22 year olds we countinued to formulate a "How might we..".
</p>
<ul class="deliver">
<i><li>How might we get 16-22 year olds to start and continue to integrate Duolingo into their daily habits?</li></i>
</ul>
</div>
</div>
<!-- ideation section -->
<div class="description-idea">
<div class="text-width">
<h2 class="h2-7">Ideas</h2>
<h3 id="ideation" class="project-head">Ideation</h3>
<p>
We ideated and came up with different solutions to the brief. The solution that we chose to move forward with was an integrated campaign that played with words in the quirky way that Duo, the maskot of Duolingo, is known for.
<p>This idea was fitting for the target audience and had potential to encourage the target audience to learn languages through Duolingo. Since Duolingo is a language learning tool we wanted the solution to be language related.</p>
<img class="gif" src="duolingo/213408258_358105235875198_8547191604566913786_n.gif" alt="transofotming streaming">
</div>
</div>
<!-- Presentation of the idea (Assorted) -->
<div class="description-assorted">
<div class="text-width">
<h2 class="h2-7">Our idea</h2>
<h1 id="prototype" class="project-head-3">Transform yourself</h1>
<p>
Duolingo is based on the fundation that learning should be fun. Our campaign reflects this playfulness of the brand by playing with language & words. Each ad is built on the same foundation, and each of them correlates to the different touch points we identified in the research.</p>
<img class="img-middle" src="duolingo/Bilboard.png" alt="A picture of the Acast ads in a bus stop"/>
<p>Our idea was an integrated campaign targeted to 16-22 year olds where the message was that common habits such as watching Netflix, scrolling while waiting for the bus or sudden energy peaks can be turned into language learning opportunities.
We use anagrams as a representation of the transformation our target group want to see in themselves. By turning an existing habit into a more valuable one. All while using the quirky (almost passive-aggressive) undertone that Duo is known for.
</p>
<img class="img-assorted" src="duolingo/05.png" alt="a picturer of Acast ads on phones."/>
<img class="img-assorted" src="duolingo/Street Billboards Mockups 20.png" alt="a picturer of Acast ads on phones."/>
<img class="img-assorted" src="duolingo/01.png" alt="a picturer of Acast ads on phones."/>
<p>Since teens view being knowledgeable as cool we wanted to make the ads really clever and smart! </p>
<img class="img-assorted" src="duolingo/PSD 05.png" alt="a picturer of Acast ads on phones."/>
<img class="img-assorted" src="duolingo/Desktop Mock up 2.png" alt="a picturer of Acast ads on phones."/>
<!-- <p class="explain">
The idea of the name came from merging the two words 'add' and 'just', and it is a play of words on the word 'adjust'.
</p> -->
</div>
</div>
</div>
<!-- Paper sketches -->
<div class="description-paper">
<div class="text-width">
<h2 class="h2-7">Marketing mix</h2>
<h1 class="project-head-3">Channels</h1>
<p>
Based on our previous rersearch we suggested Duolingo to run the campaign in several different channels where the target audience are spending their time and have time over for practicing Duolingo. The channels that we saw fit to run the campaign in were:
</p>
<!-- list over the changes made after testing the paper sketches with users -->
<ul class="deliver">
<li class="change">
Video ads around the city, such as in bus stops for instance
</li>
<li class="change">
Social media ads, mainly in TikTok, Instagram, Youtube and Snapchat
</li>
</ul>
<div class="box-paper">
</div>
</div>
</div>
<!-- Section for the final video -->
<div class="description-user">
<div class="text-width">
<h2 class="h2-7">Video</h2>
<h1 id="video" video class="project-head-3">Final delivery</h1>
<p>
Below you can watch the final video that was delivered to D&AD - New Blood Awards 2021. The video summaries key research insights, show case the 360 campaign, explains our creative process briefly & explains the overall solution that we came up with.
</p>
<div class="iframe-container">
<iframe width="800" height="490" src="https://www.youtube.com/embed/uxk5vkCM03o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Full width horizontal picture of girl user testing the app -->
<!-- Quote from user testing (afte app was done) -->
<!-- <div class="user-quote-container">
<img class="img-user" src="project_pictures/testing.png" alt="user testing the Assorted prototype app" />
<div class="centered">
<blockquote class="blockquote-user">This is so cool! I can see myself using this because I never remember what I have - and maybe I will stop buying only black<br><span>Jenny, 20</span>
</blockquote>
</div>
</div> -->
<!-- Value for plane, business etc. -->
<!-- Intro section for the value for planet, business etc. -->
<div class="description-value">
<div class="text-width">
<h1 class="project-head-6">Reflections</h1>
<p>
I made some reflections while working on the D&AD - New Blood brief for Creative Conscience Awards 2021. You can read my biggest take aways from this project below.
</p>
</div>
</div>
<!-- Business -->
<div class="text-pic-container1">
<div class="picture">
<img class="pic-66" src="duolingo/Group 297.png" />
</div>
<div class="text-vertical">
<!-- <h2 class="heading-6">Value for the business</h2> -->
<p>This challenge was conducted in a team of two. I realized the importance of having complementary skills in a team. Since I often tend to take a holistic and strategic view, being complemented by someone with an eye for details was a success.</p>
</div>
</div>
<!-- Planet -->
<div class="text-pic-container1">
<div class="picture">
<img class="pic-66" src="duolingo/Group 298.png" />
</div>
<div class="text-vertical">
<!-- <h2 class="heading-6">What is the target groups view of prices?</h2> -->
<p>
I realised my love for learning languages came in handy with this challenge. I love to play and be creative with words and messaging.
</p>
</div>
</div>
<!-- Menu to go forward -->
<div class="summary-parent-menu">
<ul class="summary-list1-menu">
<a href="index.html"><li><b>←    Back to the cases </b></li></a>
</ul>
<ul class="summary-list1-menu">
<a href=""><li><b>To the top    ↑</b></li></a>
</ul>
</div>
<!-- End of summary for the case -->
<!-- The footer (for information and contact) -->
<footer>
<div class="container-footer">
<ul class="footer-list">
<li class="mail">
<a class="mail-link" href="mailto:hanna.e.larsson@hyperisland.se"
>hanna.e.larsson@hyperisland.se</a>
</li>
<li><a href="https://twitter.com/hannaericaa">Twitter</a></li>
<li>
<a href="https://www.linkedin.com/in/hanna-larsson-hi/">Linkedin</a>
</li>
<li><a href="https://dribbble.com/HannaEricaa">Dribble</a></li>
</ul>
<p>
<a href="mailto:hanna.e.larsson@hyperisland.se" class="link-footer">
Website design and content © 2021 Hanna Larsson.</a
>
</p>
</div>
</footer>
</body>
</html>