Livo_Website

Livo is a service by Ageas that provides easy solutions for window replacements. It targets an adult audience and adopts a casual and laid-back brand personality.  The challenge was to design a website that respected Livo’s brand identity while keeping it accessible.

In this process, I brainstormed with the team about the users’ journey, developed wireframes, the design system, animated interactions, and designed the mobile version of the site. Later the desktop version was adapted by a colleague in collaboration with me.

Blue
#
93d7f3
R
147
G
215
B
243
Green
#
00a380
R
0
G
163
B
128
Lilac
#
ddafff
R
221
G
175
B
255
Purple
#
241134
R
36
G
17
B
52
Yellow
#
f9cb5b
R
249
G
203
B
91
Orange
#
f2672e
R
242
G
103
B
46
The Design Process

01 - Client interview

The first stage was to know the client’s necessities and expectations for the website. In this case the client wanted to make the brand stand out for it’s very personalized process and close contact with the website’s clients. It was also essential to keep the website casual and welcoming, following the brand’s values.

02 - Research

After the interview, I collaborated with the team on competitor analysis and visual benchmarking. It was essential to know what the competitors were doing so we could keep the design familiar enough for the intended demographic but also stand out from the crowd.

03 - Site map

After analyzing competitor websites I ideated with the team on the best solution for the site map.

03 - High fidelity screens

After the sitemap I started working on high-fidelity sceens right away, skipping the wireframing phase entirely. We decided to skip the phase due to very tight deadlines and client expectations. I started mobile first because most of the majority of competitor’s users were browsing the websites on mobile.

04 - Design System

I built a design system even though the website was relatively small, because I was not gonna be the only one working on it, and a system would help to keep the site consistent.

04 - Prototype

The last step was working on the prototype, so the client could have a realistic idea of what the site would look like once developed. After this, I prepared the file for hand-off.

L

e

t

'

s

_

b

u

i

l

d

s

o

m

e

t

h

i

n

g

t

o

g

e

t

h

e

r

+351 965 829 331mariana.alves.art@gmail.com