-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmendix2.html
207 lines (164 loc) · 8.7 KB
/
mendix2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="business, creative, modern, portfolio, agency, design, personal, about, resume, studio, blog">
<meta name="author" content="YasirKareem">
<title>Mischa | Work at Mendix</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font Animate -->
<link rel="stylesheet" href="css/animate.css">
<!-- Font Dropdownhover -->
<link rel="stylesheet" href="css/bootstrap-dropdownhover.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
<!-- Slick -->
<link rel="stylesheet" href="css/slick.css" />
<!-- Lightbox -->
<link rel="stylesheet" href="css/lightbox.min.css" />
<!-- Styles -->
<link rel="stylesheet" href="css/styles.css">
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<meta name="apple-mobile-web-app-title" content="MischaDesign">
<meta name="application-name" content="MischaDesign">
<meta name="msapplication-TileColor" content="#121212">
<meta name="msapplication-TileImage" content="img/favicons/favicon.png">
<meta name="msapplication-config" content="img/favicons/browserconfig.xml">
<meta name="theme-color" content="#16181a">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body >
<!-- Start Navbar -->
<script type="text/javascript" src="includes/menu_snippet.js"></script>
<!-- End Navbar -->
<!-- Start Header About Studio -->
<!-- OLD: <header class="header about-studio item-img-2"> -->
<header class="about-studio item-img-mendix2 img-header" id="gradientcontainer">
<div class="overlay"></div>
<div class="container">
<!-- Title
<div class="title">
<span>Lorem Ipsum is simply dummy</span>
<h1>who are we</h1>
</div>
-->
</div>
</header>
<!-- End Header About Studio -->
<!-- Start Post Content -->
<section id="our-story" class="post-content section-padding body-white">
<div class="container">
<!-- Start Post Info -->
<div class="post-info clearfix">
<div class="row">
<!-- Start Service -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="service">
<span>ABOUT</span>
<p>Design process</p>
</div>
</div>
<!-- Start Client -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="client">
<span>Client</span>
<p>Mendix</p>
</div>
</div>
<!-- Start Date -->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="date">
<span>Date</span>
<p>Mar 2021 - Present</p>
</div>
</div>
</div>
</div>
<!-- End Post Info -->
<!-- Start Post Content Text -->
<div class="post-content-text">
<h2>My role at Mendix</h2>
<!-- Text 1 -->
<p>
Mendix is a low-code app development platform from Rotterdam. It’s focused building enterprise solutions faster, shortening the lines between business and development. Here I’m currently working as a UX Designer within the “app factories”, creating internal (B2B) solutions for Mendix and Siemens AG.
I’ve worked with agile teams to design and create applications from idea to production from 2-5 months per app (depending on the cycles and requirements). I lead the UX of each project, including usability tests, interviews, and wireframing, ensuring the best possible product and experience for our Siemens/Mendix internal clients. When required, I also implement CSS and basic implementation with the Mendix Studio software.
</p>
<h2>The design process</h2>
<p>
Before starting the first development sprint, we have the design sprint - which we call ‘prep sprint’.
The UX designer (me in this case) takes the lead in a wide range of workshops.
<br> <br>
This includes interviewing the different users, creating personas, aligning the business vision with the product owner, creating wireframes, researching competitors,
coming up with key performance indicators, creating prototypes, and more. The lines between members are short, and I often partake in more technical sessions as well - such as the creation of the domain model. This communicates a fundamental and agreed upon understanding from the needs of our users / product owner.
Below are some screenshots that came from the workshops.
<br>
</p>
<br>
<h4> More coming soon!
</h4>
<br>
<!--graph-->
<h2>Aligning the vision with the client</h2>
<img class ="img_full"src="img/mendix/vision.jpg" alt="">
<h2>Persona example</h2>
<img class ="img_full"src="img/mendix/persona.jpg" alt="">
<h2>User flow example</h2>
<img class ="img_full"src="img/mendix/flow1.jpg" alt="">
<h2>Wireframe example</h2>
<img class ="img_full"src="img/mendix/wireframes.jpg" alt="">
<h2>Interview questions examples</h2>
<img class ="img_full"src="img/mendix/interviews.jpg" alt="">
<h2>App Mockups</h2>
<img class ="img_full"src="img/mendix/banner_audits.jpg" alt="">
<img class ="img_full"src="img/mendix/Audits - second banner.jpg" alt="">
<a href="https://audit-on-test.mendixcloud.com/">
Test the app here
</a>
</div>
<!-- End Full Image -->
<!-- "Up next" section Add header with color here-->
<section class="section-padding up-next">
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-12">
<h2>Up Next</h2>
<h3 class="title_black">Social Bootcamp</h3>
<h3 class="title_grey">Website Design</h3>
<p>Coding and designing a website for Social Bootcamp. </p>
<a href="bootcamp-website.html"><div class="btn-main red">View Project</div></a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 ">
<img class ="img_full up-next"src="img/up_next/SH_hand.png" alt=""">
</div>
</div>
</section>
<!-- END: UP NEXT-->
</section>
<!-- End Post Content -->
<!-- Start Scroll Top -->
<div class="scroll-top ">
<span class="animated fadeIn"><i class="fas fa-chevron-left"></i>back</span>
</div>
<!-- End Scroll Top -->
<!-- Start Footer -->
<script src="includes/footer_snippet.js" type="text/javascript">
</script> <!-- End Footer -->
<!-- script -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-dropdownhover.min.js"></script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/lightbox.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>