-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwork-goed-bezig.html
171 lines (157 loc) · 5.18 KB
/
work-goed-bezig.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Goed Bezig - UX Portfolio Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/normalize.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
rel="stylesheet"
/>
<link href="css/glider.css" rel="stylesheet" />
<link href="css/global.css" rel="stylesheet" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-7367689-2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-7367689-2");
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.7/glider.min.js"></script>
<script src="js/global.js"></script>
<script>
window.addEventListener("load", function () {
new Glider(document.querySelector(".screenshots .carousel"), {
slidesToShow: 1,
slidesToScroll: 1,
duration: 1,
arrows: {
prev: ".screenshots .glider-prev",
next: ".screenshots .glider-next",
},
});
});
</script>
<style>
header .container {
max-width: 500px;
margin: 4rem auto -4rem auto;
}
header img {
display: block;
width: 100%;
height: auto;
}
section:nth-child(odd) {
background-color: var(--tint-background);
}
section.screenshots {
padding: 0;
}
section.screenshots .background {
width: 100%;
max-width: 100%;
padding: 0;
background-color: rgb(118, 205, 242);
}
section.screenshots .carousel-container {
margin-bottom: 0;
}
section.screenshots .carousel div {
padding: 0 1rem;
}
</style>
</head>
<body>
<nav></nav>
<header>
<h1>Goed Bezig</h1>
<dl class="project-info">
<dt>Client</dt>
<dd>Arbo Unie</dd>
<dt>Platform</dt>
<dd>Native iOS & Android app</dd>
<dt>Role</dt>
<dd>Interaction & Visual Design</dd>
</dl>
<div class="container">
<img
src="images/work-goed-bezig-iphone.png"
alt="Mockup of an iPhone running the Goed Bezig app"
/>
</div>
</header>
<section>
<p>
Goed Bezig is a ten week programme that improves performances of teams.
A team is brought together under guidance from one of Arbo Unie’s
coaches who leads group discussions as well as individual assignments.
The aim is improve energy, self awareness and flexibility towards
change.
</p>
<p>
Each team member installs the app which is linked to the team-specific
programme with assignments and content chosen by the coach. The users
complete a daily reflection which over time provides an insight into
what gives them energy, and what takes it away. The app also facilitates
assignments in four categories: perspective, autonomy, connection and
growth.
</p>
</section>
<section>
<h2>Interaction & visual design</h2>
<p>
After helping to facilitate a creative workshop with the client, I was
commissioned to work on-site with the client's own development team. We
took a SCRUM approach which enabled us to launch the app quickly. The
visual style was loosely based on Arbo Unie‘s house style with influence
from Google's Material guidelines. I worked closely with the developers
to take into account differing screen sizes and implementations across
iOS and Android devices.
</p>
</section>
<section class="screenshots inverse">
<div class="background">
<div class="carousel-container">
<div class="carousel">
<div>
<img
src="images/work-goed-bezig1.png"
alt="Screenshots of the smartphone app"
/>
</div>
<div>
<img
src="images/work-goed-bezig2.png"
alt="Screenshots of the iPad app"
/>
</div>
</div>
<button class="glider-prev">
<i class="fa fa-chevron-left"></i>
</button>
<button class="glider-next">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
</section>
<section id="more-work" class="inverse"></section>
</body>
</html>