Mitigrate landing page
Mitigrate is a ClimateTech SaaS startup generating fully automated analyses leading to prioritized preventive measures for reducing climate damages on real estate, starting with flooding, to be extended to other risks
Thanks to high-resolution satellite images, our map-based AI models, and optimization algorithms predict how 50+ climate-positive prevention measures can be implemented to reduce risk. Business value stems from reducing risks on individual assets and prioritizing preventive measures within large portfolios of commercial & residential real estate. Since 01/01/23, the EU Taxonomy has made prevention mandatory for insurers throughout Europe.
Case study
Mitigrate — responsive website design
My role
UX / UI
Website Design
Year
2023
![Website design and developement](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=750,fit=crop,trim=108.7603305785124;122.03898050974513;108.7603305785124;122.03898050974513/Yg22evNJjzivkoJ4/mititgrate-landing-page-m2WlkKNwEguEJbRe.png)
![Website design and developement](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=208,fit=crop,trim=82.8193832599119;124.02234636871508;82.8193832599119;124.02234636871508/Yg22evNJjzivkoJ4/mititgrate-landing-page-m2WlkKNwEguEJbRe.png)
Principal tasks
Objectives
Project Includes
To create a better introduction of the company and online experience for visitors while also increasing awareness between social media.
Design Ideation
Design Direction
User Interviews
Final Design
Web Development
Re-designing the whole website
Given the existing website from a year prior, I dedicated time to strategize the optimal approach for rebuilding the product. This involved conducting interviews with stakeholders, defining personas, and engaging in team brainstorming sessions. Beginning with low-fidelity prototypes, I iteratively tested and adapted them based on user feedback. The transition to high fidelity was a meticulous process, involving the creation of interactions, high-quality UI, and the development of a robust framework. The final phase encompassed user testing, interviews, and the implementation of minor adjustments based on feedback.
![website design timeline](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=378,fit=crop/Yg22evNJjzivkoJ4/frame-3251-dJoB0nZng7UryeZ5.png)
![website design timeline](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=106,fit=crop/Yg22evNJjzivkoJ4/frame-3251-dJoB0nZng7UryeZ5.png)
User Personas
At Mitigrate, we meticulously crafted the website to cater to three distinct user personas. Primary focus was to enhance user experience and ensure clarity for each demographic, providing a seamless and tailored online environment.
![Website design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=300,fit=crop/Yg22evNJjzivkoJ4/beige-and-brown-modern-user-persona-graph-1-A3QPPzVwVDcgoeR0.jpg)
![Website design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=246,fit=crop/Yg22evNJjzivkoJ4/beige-and-brown-modern-user-persona-graph-1-A3QPPzVwVDcgoeR0.jpg)
![User Persona](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=300,fit=crop/Yg22evNJjzivkoJ4/beige-and-brown-modern-user-persona-graph-2-YBg88PXrnKuNl86D.jpg)
![User Persona](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=246,fit=crop/Yg22evNJjzivkoJ4/beige-and-brown-modern-user-persona-graph-2-YBg88PXrnKuNl86D.jpg)
![Website development](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=300,fit=crop/Yg22evNJjzivkoJ4/beige-and-brown-modern-user-persona-graph-3-mxBllqKZKbFyonGd.jpg)
![Website development](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=246,fit=crop/Yg22evNJjzivkoJ4/beige-and-brown-modern-user-persona-graph-3-mxBllqKZKbFyonGd.jpg)
Brainstorming
During brainstorming session, we went beyond design and personas. Our main goal was to ensure universal understanding of our mission and the purpose driving our efforts. Our aim was to craft a landing page that is not only visually appealing but also user-friendly, catering to the diverse needs and preferences of all individuals.
![Brainstorming](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=606,h=336,fit=crop,trim=218.1492537313433;235.03734439834025;474.3880597014925;1002.3651452282157/Yg22evNJjzivkoJ4/screenshot-2023-11-04-at-19.27.56-AE0MxBn9bBHk3Jwo.png)
![Brainstorming](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=284,h=304,fit=crop,trim=219.0310559006211;426.0967741935484;468.80331262939956;1815.709677419355/Yg22evNJjzivkoJ4/screenshot-2023-11-04-at-19.27.56-AE0MxBn9bBHk3Jwo.png)
![Brainstorming](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=606,h=335,fit=crop,trim=292.14159292035396;831.9128329297821;182.58849557522123;60.87167070217917/Yg22evNJjzivkoJ4/screenshot-2023-11-04-at-19.26.59-YrD6BnZ237c9wee2.png)
![Brainstorming](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=195,fit=crop,trim=292.88212927756655;996.5405405405406;181.3079847908745;69.6881496881497/Yg22evNJjzivkoJ4/screenshot-2023-11-04-at-19.26.59-YrD6BnZ237c9wee2.png)
Low fidelity
Prior to crafting high-fidelity wireframes for a detailed website design, preliminary low-fidelity wireframes were developed. These low-fidelity representations served the purpose of gauging feedback on the overall website structure and layout.
![ux design website](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=203,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.35.10-AGB348XPMjHR5Ken.png)
![ux design website](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=166,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.35.10-AGB348XPMjHR5Ken.png)
![website ux](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=304,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.34.28-mk3y9PW1GQsxOBOy.png)
![website ux](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=212,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.34.28-mk3y9PW1GQsxOBOy.png)
![great landing page design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=280,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.37.10-mxBl7LgNOWcBez7Z.png)
![great landing page design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=235,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.37.10-mxBl7LgNOWcBez7Z.png)
![landing page design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=239,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.34.45-mP47QagBprCwe6LW.png)
![landing page design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=351,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.34.45-mP47QagBprCwe6LW.png)
![responsive web design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=240,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.35.29-YX4XbvM7Z9s4qQ4Y.png)
![responsive web design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=182,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.35.29-YX4XbvM7Z9s4qQ4Y.png)
![figma landing page](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=177,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.34.58-Yg2a9nzMvesVnLy7.png)
![figma landing page](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=145,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.34.58-Yg2a9nzMvesVnLy7.png)
![responsive webdesign](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=536,h=514,fit=crop/Yg22evNJjzivkoJ4/frame-3246-mP47LJqV3VTbvJZM.png)
![responsive webdesign](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=264,fit=crop/Yg22evNJjzivkoJ4/frame-3246-mP47LJqV3VTbvJZM.png)
Rausch Pink Gradient - Vibrant and bold, the Rausch Pink Gradient demands attention and stimulates engagement. Ideal for call-to-action buttons or backgrounds, it effectively captures users' focus.
Trust and Comfort - Soft, creamy hues foster a cozy and inviting atmosphere, imparting a sense of comfort to visitors. This palette aims to convey empathy and relaxation, emphasizing a welcoming and soothing ambiance.
Styleguide
Avenir font signifies modernity. Its sleek and contemporary appearance conveys a sense of trust and credibility, while its clarity enhances readability. The font's minimalist style ensures a clean and uncluttered look, allowing your visitors to focus on essential content.
![responsive web](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=654,h=406,fit=crop/Yg22evNJjzivkoJ4/typography-mxBl9vlk0lSPQXl2.png)
![responsive web](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=204,fit=crop/Yg22evNJjzivkoJ4/typography-mxBl9vlk0lSPQXl2.png)
Typography
![website logo](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=644,h=438,fit=crop,trim=0;14.167427701674276;10.892857142857142;0/Yg22evNJjzivkoJ4/logos-YKbavlMwr3I91vGK.jpg)
![website logo](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=224,fit=crop,trim=0;14.961194029850747;8.56140350877193;0/Yg22evNJjzivkoJ4/logos-YKbavlMwr3I91vGK.jpg)
The previous logo featured heavier colors that often overlapped, diminishing readability. Additionally, the logo shape didn't align with the font style.
In contrast, the new logo boasts a minimalistic design. The bold pink hues effortlessly capture attention, while the house with smooth corners evokes feelings of coziness and safety.
Logo re-design
High fidelity
Final website development comprised:
UI Designed delivery
Feedback collection
Based on feedback fixes and updates were done
In phase two interactions were added
Website is still in development
![ux ui design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=254,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.46.52-YZ97b14Vk2cXZljw.png)
![ux ui design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=207,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.46.52-YZ97b14Vk2cXZljw.png)
![user interface ui design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=174,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.47.11-meP1nzNn5vU4rLDq.png)
![user interface ui design](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=143,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.47.11-meP1nzNn5vU4rLDq.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=183,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.47.38-A0xWVRQVolI47680.png)
![](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=150,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.47.38-A0xWVRQVolI47680.png)
![portfolio for ux designer](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=263,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.48.52-YD0D4Rz6B5slG7wE.png)
![portfolio for ux designer](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=221,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.48.52-YD0D4Rz6B5slG7wE.png)
![ux ui portfolio](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=219,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.48.20-AMqx4RP4OXTklLbp.png)
![ux ui portfolio](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=180,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.48.20-AMqx4RP4OXTklLbp.png)
![ux portfolio](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=400,h=219,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.49.33-d953gkvgLRsP03Ne.png)
![ux portfolio](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=351,fit=crop/Yg22evNJjzivkoJ4/screenshot-2023-11-25-at-14.49.33-d953gkvgLRsP03Ne.png)
Mobile version
Mitigrate website was meticulously crafted to be responsive. Despite data indicating that the majority of users primarily accessed our site from desktop devices, we recognized the significant presence of mobile users. As a result, our design ensures a seamless experience across all devices, catering to both desktop and mobile users alike.
![responsive web](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=230,h=473,fit=crop/Yg22evNJjzivkoJ4/iphone-15---midnight-mp869yw5rRtpprvE.png)
![responsive web](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=267,h=551,fit=crop/Yg22evNJjzivkoJ4/iphone-15---midnight-mp869yw5rRtpprvE.png)
![responsive site](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=230,h=473,fit=crop/Yg22evNJjzivkoJ4/iphone-15---blue-1-A3QPJRGgVQUJ9nMD.png)
![responsive site](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=265,h=547,fit=crop/Yg22evNJjzivkoJ4/iphone-15---blue-1-A3QPJRGgVQUJ9nMD.png)
![responsive website](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=230,h=473,fit=crop/Yg22evNJjzivkoJ4/iphone-15---blue-YX4Xb3EK4GugB8BE.png)
![responsive website](https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=328,h=320,fit=crop/Yg22evNJjzivkoJ4/iphone-15---blue-YX4Xb3EK4GugB8BE.png)