Defining a new look and feel
One of the aims of the project was creating a new look and feel for the Guiker brand. We started defining the brand personality keywords, based on which I created moodboards to quickly get feedback from the team.
![](https://assets-global.website-files.com/5b8fd52cff0426630d011f52/5ec16789c3babb669c2f1af8_Frame%20290.jpg)
A brand refresh
Designing in context
To define the new look and feel of the website, I started designing the Homepage and the Services page. I iterated a few design directions and eventually we landed on a simple but professional style.
![](https://assets-global.website-files.com/5b8fd52cff0426630d011f52/5ec165a173138d39fa0457b4_design-compressor.jpg)
App design
I redesigned the main screens and flows of the product, in order to extrapolate the components and test the new design system in progress.
![](https://assets-global.website-files.com/5b8fd52cff0426630d011f52/5ec12dca3f372582572274f0_app-design-compressor.jpg)
Atomic design
I built the components using the atomic design methodology and aligning everything to the 8pt grid.
![](https://assets-global.website-files.com/5b8fd52cff0426630d011f52/5ec12eac0962175498a20743_making-components-compressor.jpg)
A touch of personality
To add more joy and wit to the app, we introduced illustrations in key pages, empty states and modals.
![](https://assets-global.website-files.com/5b8fd52cff0426630d011f52/5ebfeb92c21e775bda5f8854_Visual%20design%20guidelines.jpg)
A brand book for scalability
![](https://assets-global.website-files.com/5b8fd52cff0426630d011f52/5ec13a053f1e7415f9efa3f1_Visual-design-guidelines-compressor.jpg)
Handing over to the devs
Outcome
I delivered a comprehensive library of responsive components that the product team can use to quickly design new features or iterate on current ones. I also crafted a visual design style guide that explains the use of typography, colours, illustrations in both product and marketing website.