[New_Gen] 🖥️ Website Build + Design on Webflow

Lea Sathya

UX Designer
Webflow Developer
UI Designer
Adobe Photoshop
Figma
Webflow
This is an interactive website designed to raise awareness about personal information security and the potential risks of data breaches and exploitation by digital platforms. Through engaging storytelling and creative design, the website aims to empower users with knowledge on how to protect their personal information and stay safe in the digital age.

📌 Main Goal

There is a clear lack of security presence which is not in balance with the increasing online presence. The main goal is to raise awareness towards the importance of taking online precaution. It was important that the website experience would be appealing to a younger audience.

🔎 How Do We Make This Happen?

The topic of personal information security and data exploitation was a topic that is known to be heavy and uninteresting.
The style and interactions of the site was to be the main focus as an attempt to appeal to the ages of 16-26. Interactive pages, buttons and features such as the utilization of GSAP scrolling was used throughout the website.
Design Thinking Chart + System Usability Scale
Design Thinking Chart + System Usability Scale
To ensure the website is executed in the most effective, efficient and in a well-designed manner I often use a combination of Design Thinking and the System Usability Scale to ensure the website works well and is responsive in terms of functionality and responsive towards our target audience.

🤫 Method Approach:

Data structure > Collect the data! What information is needed on that website? What is the best order to show that data in order to make it easy to comprehend?
Feature structure > What features should be presented on that website? What interactions/features would be most doable and exciting for the audience? How would the information be presented in said features?
Wireframing > Figuring out everything fits together in a comprehensive manner according to the data and feature structure. Figma is used during this process to create functional prototypes. Both Lo-Fi + Hi-Fi are included in this process
Low-Fidelity Website Wireframing
Low-Fidelity Website Wireframing
4. Website Building > The entirety of the website was created on Webflow, with the addition to custom development on a few features here and there.
Partner With Lea
View Services

More Projects by Lea