-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathBoho.html
More file actions
322 lines (315 loc) · 16.3 KB
/
Boho.html
File metadata and controls
322 lines (315 loc) · 16.3 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
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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Boho Design | Anna Marszałek-Portfolio UX/UI</title>
<meta name="description" content="Portfolio | Anna Marszałek | UX/UI Design">
<meta name="keywords" content="portfolio, ux design, web design, ui design">
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" href="./src/styles/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Quicksand:wght@400;500;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZZENT6CS5D"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-ZZENT6CS5D');
</script>
</head>
<body>
<header>
<nav class="navbar">
<a href="index.html">
<img class="logo" src="./src/static/assets/svg/Headerlogo.svg" alt="logo"></a>
<ul class="menu">
<li><a href="index.html#projects">PROJECTS</a></li>
<li><a href="other.html">OTHERS</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</nav>
</header>
<section class="landing landing-project">
<div class="background-landing boho-landing">
</div>
</section>
<section class="project-wrapper">
<article class="whathowwhenwhy ">
<div class="what what-container">
<p>WHAT?</p>
<P>Responsive website</P>
</div>
<div class="how what-container">
<p>HOW?</p>
<P>Figma, Adobe Illustrator, Paper + markers</P>
</div>
<div class="why what-container">
<p>WHY?</p>
<P>Practice- get to know UX design process. First project.</P>
</div>
<div class="when what-container">
<p>WHEN?</p>
<P>June 2020 - 1 month</P>
</div>
<div class="rolesux what-container">
<p>ROLE?</p>
<P>UX designer, UI designer </P>
</div>
<div class="client what-container">
<p>CLIENT?</p>
<P>Interior design one-person studio (hypotetical)</P>
</div>
<div class="element what-container">
<p>ELEMENTS?</p>
<P>Projects gallery, contact info, offer, blog</P>
</div>
<div class="style what-container">
<p>STYLE?</p>
<P>Boho, elegant, modern</P>
</div>
<a class="link-toproject" href="http://bit.ly/2LXOyXz">
See prototype<div class="iconify"></div>
</a>
</article>
<div class="banner">
<h3>ABOUT</h3>
</div>
<article>
<p class="article-description">The website's goal is to convey the boho interior design that is the studio's
preferable and dominant style. The offer is oriented on people, who value elegant, clear and natural
approach to materials, space and want to receive an individual, unique design tailored for them. The
client visiting the website for the first time should understand immediately what is the style of the studio
and what kind of service it has to offer. What is more, the studio has just launched new offer- furniture
renovation, which also needs to be
focused on, with an equal presence on the website. The studio owner wants to have a safe space where
she could
share her thoughts, trends, tips on interior design, that would be mainly dedicated for people that are not
her clients (yet), with hope to attract new clients and movement on the website.</p>
</article>
<div class="banner">
<h3>PROCESS</h3>
</div>
<article class="process">
<ol>
<li> General research about the interior design business.</li>
<li> Analysing websites of other interior designers.</li>
<li> Analysing services provided by the studio.</li>
<li> Analysing the potential clients, their motives, their behaviour on the website.</li>
<li> Biggest challenges and goals of the web design.</li>
<li> Creating personas.</li>
<li> Creating user journey map.</li>
<li> Creating a framework of the website -> architecture of information.</li>
<li> Low-fidelity ideating.</li>
<li> Creating the style guide that will represent studio design style.</li>
<li> Creating wireframes and high-fidelity prototype.</li>
<li> Conducting usability-tests.</li>
<li> Adjusting the design based on the conclusions from the tests.</li>
</ol>
</article>
<div class="banner">
<h3>CHALLENGES</h3>
</div>
<article class="challenges">
<ul>
<li> How to convey through website design a very specific interior design style of the studio?</li>
<li> How to convince more people to reach out and contact the studio?</li>
<li> How to acquire more traffic on the website?</li>
<li> How to make both services- furniture renovation and interior design equally important on the website?
</li>
<li> How to explain thoroughly the design process and different type of services available?</li>
<li> How to communicate that Boho design studio is a one-person business?</li>
</ul>
</article>
<div class="banner">
<h3>Personas</h3>
</div>
<article class="personas">
<div class="persona">
<div class="persona-about">
<div class="persona-image persona-boho-1"></div>
<div class="persona-about-txt">
<h3>Martina</h3>
<h4>30 years old</h4>
<h4>Photographer</h4>
<p>Martina is a successful magazine photographer. She likes to be active, almost always has a full
schedule, yet she can always find time for a new art exhibition or gallery opening. If she had to describe
herself
in one word that would be "freedom". </p>
</div>
</div>
<div class="persona-section">
<h4>Style</h4>
<p>She has a very precise idea of what she would like her apartment to look like- Boho chic style. She has just bought a new place in the modern building in the city centre. However, after a long, hard day at work, she would love to just relax and leave the busy city behind the apartment's door and enter the completely different realm of peace and quiet.</p>
</div>
<div class="persona-section">
<h4>Technical environment</h4>
<p>Martina is searching for an interior designer
that conveys exactly the style she is looking for. She likes to check thoroughly the websites of the services she wants to use, especially paying attention to the previous projects and feedbacks of other customers. She is a very busy person who prefers to contact via e-mail, or in any sort of a written form- she likes to keep a record of her inquiries.</p>
</div>
</div>
<div class="persona">
<div class="persona-about">
<div class="persona-image persona-boho-2"></div>
<div class="persona-about-txt">
<h3>Victor</h3>
<h4>52 years old</h4>
<h4>Nutritionist</h4>
<p>Victor is a nutritionist, interested in well-being and natural methods of reducing
stress and anxiety levels. He has his own medical
practice. After work he devotes his free time to yoga, gardening and cooking.</p>
</div>
</div>
<div class="persona-section">
<h4>Style</h4>
<p>He recently has bought a small vacation house by the lake; for himself and his family. He wants it to become a
retreat place, surrounded by nature, far away from any urban area. He likes the interior
style, in which the materials are true, ecological with an important part of the design left for greenery. Because he inherited after his grandparents an old, antique furniture he would like to renovate
it and incorporate into the new interior design. </p>
</div>
<div class="persona-section">
<h4>Technical environment</h4>
<p>Victor is an old-fashioned client, he prefers to talk things over the phone or to meet in person. As he is planning on renovating old furniture and creating a modern, boho style vacation house he is keen to hand both issues to the same person. That way he will keep the style uniform and generate fewer
problems on the way.</p>
</div>
</div>
</article>
<div class="banner">
<h3>User journey</h3>
</div>
<article>
<div class="user-journey user-journey-boho-1"></div>
</article>
<div class="banner">
<h3>structure</h3>
</div>
<article>
<div class="structure structure-boho-1"></div>
</article>
<div class="banner">
<h3>Low-fidelity</h3>
</div>
<article>
<div class="low-fidelity low-fidelity-boho-1"></div>
</article>
<div class="banner">
<h3>Style guide</h3>
</div>
<article>
<p class="article-description">How to convey through website design very specific interior design style of the
studio? <br>
<ul>
<li>Natural, earthy colors</li>
<li>Rounded shapes, rounded frames of pictures</li>
<li>Serif font for main headers- elegance and style</li>
<li>Modern business - flat design </li>
</ul>
</p>
<div class="style-guide style-guide-boho-1"></div>
</article>
<div class="banner">
<h3>High-fidelity</h3>
</div>
<article>
<p class="article-description">How to convince more people to reach out and contact? </p>
<ul>
<li>Contact information easily accessible: Contact tab, footer, link to contact form on offer page</li>
</ul>
<div class="High-fidelity1 High-fidelity-boho-1"></div>
<p class="article-description"> How to make both services- furniture renovation and interior design equally
important on the website ?</p>
<ul>
<li>Both offer and projects tab in navigation menu are accessible for interior design and furniture
renovation service. </li>
</ul>
<div class="High-fidelity2 High-fidelity-boho-2"></div>
<p class="article-description"> How to acquire more traffic on the website ?</p>
<ul>
<li>Blog with different articles about interior design. </li>
</ul>
<p class="article-description">How to communicate that Boho design studio is one-person business?</p>
<ul>
<li>Photo of the owner of Boho design studio on the main page.</li>
<li>Clearly written who is the owner, what does she do, her experience, once again her
photo on the studio page.</li>
</ul>
<div class="High-fidelity3 High-fidelity-boho-3"></div>
<p class="article-description">How to explain in a simple way the design process and different types of service
available?</p>
<ul>
<li>Design process divided into 4 steps, each step explained in details.</li>
<li>Types of service presented in a table with explaination how many, which drawings are included in every
package.</li>
</ul>
<div class="High-fidelity4 High-fidelity-boho-4"></div>
</article>
<div class="banner">
<h3>Usability tests</h3>
</div>
<article class="usability-test">
<p class="article-description"> Using a high-fidelity website's prototype I conducted usability tests on five individuals. My observations :</p>
<ul>
<li>The offer page included both offers for interior design and furniture renovation, because the last one was located down the page it was difficult to find and some users didn't realise it was even there.<br>>
Clear separation of furniture renovation and interior design offer.
</li>
<li>It was difficult for users to read paragraphs of light font color on the pinkish background- Colors of
small contrast ratio. <br>
> Color of font consistent everywhere on the website - dark green, paired with background color - light
beige - to give a contrast ratio of over 10 that meets WCAG standards.</li>
<li>The logo of the website was perceived as not modern and too complicated.<br>
> Logo redesign.</li>
<li>Users were looking for a contact information after seeing the offer page. <br>
> Link to contact form on the offer page.
</li>
<li>Users thought that pictures on the main page illustrating the paragraphs were clickable elements. <br> >
Photos on the main page linked to the corresponding tab i.e. to interior design projects gallery.</li>
</ul>
<div class="usability usability-boho-1"></div>
</article>
<div class="banner">
<h3>Learnings</h3>
</div>
<article class="learnings">
<ul>
<li>Sometimes users interact with the website not as expected. It is good to observe their first instinctive reactions and adjust the design to it, i.e. provide interactive elements if that is going to improve the user flow.</li>
<li>Visual communication and design of the website were very important in this project. The wrong choice of colours, not contrasting enough or not associated with natural, boho style, could have a real impact on the user's behaviours and statistics of the website's traffic.</li>
<li>If there was more time given the blog tab could have been created with more consideration.</li>
<li>Users who don't know the website and enter it for the first time, look for specific information, do not have the will to scroll down or to search deeper in the structure of the website. If the specific section is highly visited or searched for, it should be accessible from the main page or menu.</li>
</ul>
</article>
</section>
<footer class="footer-boho">
<div class="footer-text">
<div class="personal-info footer-container">
<div class="author footer-tile">
<p>Author:</p>
<p>Anna Marszałek</p>
</div>
<div class="localisation footer-tile">
<p>Location:</p>
<p>Wrocław, Poland</p>
</div>
</div>
<div class="contact footer-container">
<div class="linkedin footer-tile">
<p>Linkedin:</p>
<p><a href="https://www.linkedin.com/in/annammarszałek/">linkedin.com/in/annammarszałek</a></p>
</div>
<div class="email footer-tile">
<p>E-mail:</p>
<p>aniammarszalek@gmail.com</p>
</div>
</div>
<div class="thanks">
<p>Thanks for stopping by <i class="material-icons favourite">favorite</i></p>
</div>
</div>
</footer>
<script src="./index.js"></script>
</body>
</html>