Website
Website
Website
Dark Mode
Dark Mode
Dark Mode
Cloud Managed Service
Cloud Managed Service
Cloud Managed Service
Econopti - Corporate Official Websites
Econopti - Corporate Official Websites
Econopti - Corporate Official Websites
Econopti is a Germany-based startup founded in 2024, offering a cloud service that helps businesses optimize their AWS cloud usage and reduce costs. As the product was still under development and not yet launched, the team needed this website to gather early user interest and collect emails during the pre-launch phase.
Econopti is a Germany-based startup founded in 2024, offering a cloud service that helps businesses optimize their AWS cloud usage and reduce costs. As the product was still under development and not yet launched, the team needed this website to gather early user interest and collect emails during the pre-launch phase.
Econopti is a Germany-based startup founded in 2024, offering a cloud service that helps businesses optimize their AWS cloud usage and reduce costs. As the product was still under development and not yet launched, the team needed this website to gather early user interest and collect emails during the pre-launch phase.
Econopti is a Germany-based startup founded in 2024, offering a cloud service that helps businesses optimize their AWS cloud usage and reduce costs. As the product was still under development and not yet launched, the team needed this website to gather early user interest and collect emails during the pre-launch phase.
Econopti is a Germany-based startup founded in 2024, offering a cloud service that helps businesses optimize their AWS cloud usage and reduce costs. As the product was still under development and not yet launched, the team needed this website to gather early user interest and collect emails during the pre-launch phase.
Challenge
Since the product was still under development with no actual features to showcase, my task was to identify the key information users would need and capture user interest through a visually appealing and interactive design, which led me to create both light and dark mode versions to align with our primary users' preferences.
Since the product was still under development with no actual features to showcase, my task was to identify the key information users would need and capture user interest through a visually appealing and interactive design, which led me to create both light and dark mode versions to align with our primary users' preferences.
Info
My Role: Solo Designer – Responsible for UX writing and communication with the client.
Duration: 2 months (Oct. 2024 – Nov. 2024)
Tools: Figma
My Role: Solo Designer – Responsible for UX writing and communication with the client.
Duration: 2 months (Oct. 2024 – Nov. 2024)
Tools: Figma
Who I Designed For…
Who I Designed For…
Young Tech Entrepreneurs
Young Tech Entrepreneurs
Users are early-stage startup founders and technical experts. Startups often operate with limited budgets and are highly cost-sensitive, requiring precise cloud cost management. Teams with less experience may struggle to optimize resources efficiently and need flexible infrastructure that can scale quickly with business growth.
Users are early-stage startup founders and technical experts. Startups often operate with limited budgets and are highly cost-sensitive, requiring precise cloud cost management. Teams with less experience may struggle to optimize resources efficiently and need flexible infrastructure that can scale quickly with business growth.
Enterprise IT Departments
Enterprise IT Departments
Users are mid-to-senior level IT managers and technical specialists. They prioritize system stability and security. Managing large-scale cloud infrastructure is highly complex, requiring careful cost control while ensuring high performance and availability. Additionally, they must adhere to strict industry compliance and security standards.
Users are mid-to-senior level IT managers and technical specialists. They prioritize system stability and security. Managing large-scale cloud infrastructure is highly complex, requiring careful cost control while ensuring high performance and availability. Additionally, they must adhere to strict industry compliance and security standards.
of users mentioned that visually appealing photos, clear pricing, and detailed itinerary made them more likely to explore further.
Wireframe & Content Order
Wireframe & Content Order
Homepage to gather early user interest and collect emails during the pre-launch phase
Homepage to gather early user interest and collect emails during the pre-launch phase
The Home page serves as the main entry point of the website, making the order of the content on this page particularly important. The wireframe on the right shows the content order, displayed according to the purple blocks.
This version aims to spark user interest in the pre-launch stage and encourage them to provide their email to receive the latest updates.
Therefore, the page will require multiple call to action buttons to assist with this, while minimizing the resistance for users to enter their email (e.g., auto-filling email suffixes, etc.).
The Home page serves as the main entry point of the website, making the order of the content on this page particularly important. The wireframe on the right shows the content order, displayed according to the purple blocks.
First, we aim to capture attention with a powerful slogan. Then, we highlight the problems our product can solve for users, sparking their interest. Following this, we introduce the main features of the product. Finally, we conclude with a call to action, encouraging users to take action.
Capture Attention
slogan, CTAs & animation
Capture Attention
slogan, CTAs & animation
Capture Attention
slogan, CTAs & animation
Capture Attention
slogan, CTAs & animation
Spark User Interest
core product principle
Spark User Interest
core product principle
Spark User Interest
core product principle
Spark User Interest
core product principle
CTAs
email input
CTAs
email input
CTAs
email input
CTAs
email input
What's Special About Us
highlight main product feature & IMG
What's Special About Us
highlight main product feature & IMG
What's Special About Us
highlight main product feature & IMG
What's Special About Us
highlight main product feature & IMG
CTAs
email input
CTAs
email input
CTAs
email input
CTAs
email input
Build User Confidence
security promise
Build User Confidence
security promise
Build User Confidence
security promise
Build User Confidence
security promise
Motion Design
Motion Design
Mockups: Light Mode & Dark Mode
Blue was chosen as the primary color to convey a sense of professionalism, enhanced by glow effects to evoke a tech-forward impression. Orange was used as an accent color to add vibrancy and flexibility to the layout, preventing it from feeling rigid or dull.
The landing section features a large display headline and hero image with subtle motion effects to immediately capture user attention and create a strong visual impact.
An email input field is integrated directly on the homepage with varied call-to-action (CTA) texts. This allows users to submit their contact information without page redirection and also enables A/B testing to evaluate which CTA performs better.
For visual consistency in the dark mode version, all product mockups were also adapted to match the dark theme, ensuring a cohesive and immersive user experience without abrupt visual interruptions.
Blue was chosen as the primary color to convey a sense of professionalism, enhanced by glow effects to evoke a tech-forward impression. Orange was used as an accent color to add vibrancy and flexibility to the layout, preventing it from feeling rigid or dull.
The landing section features a large display headline and hero image with subtle motion effects to immediately capture user attention and create a strong visual impact.
An email input field is integrated directly on the homepage with varied call-to-action (CTA) texts. This allows users to submit their contact information without page redirection and also enables A/B testing to evaluate which CTA performs better.
For visual consistency in the dark mode version, all product mockups were also adapted to match the dark theme, ensuring a cohesive and immersive user experience without abrupt visual interruptions.
Desktop & Laptop
Tablet & Mobile: Light Mode
Tablet & Mobile: Dark Mode
Reflections
This was my first time designing a website in Dark Mode, which presented unique challenges in terms of color logic and visual presentation. I took a deep dive into the use of grayscale and contrast in low-light environments to ensure both readability and aesthetic appeal. Through multiple rounds of visual testing, I gained a deeper understanding of how color behaves across different UI themes, and honed my ability to create visually coherent systems across modes.
This project also gave me the opportunity to explore potential collaboration with developers on implementing theme-switching functionality. Looking ahead, introducing a token-based system could offer a scalable and efficient solution for managing design consistency while reducing maintenance and communication overhead. This experience marked real growth in my ability to balance user needs, visual clarity, and technical feasibility.
This was my first time designing a website in Dark Mode, which presented unique challenges in terms of color logic and visual presentation. I took a deep dive into the use of grayscale and contrast in low-light environments to ensure both readability and aesthetic appeal. Through multiple rounds of visual testing, I gained a deeper understanding of how color behaves across different UI themes, and honed my ability to create visually coherent systems across modes.
This project also gave me the opportunity to explore potential collaboration with developers on implementing theme-switching functionality. Looking ahead, introducing a token-based system could offer a scalable and efficient solution for managing design consistency while reducing maintenance and communication overhead. This experience marked real growth in my ability to balance user needs, visual clarity, and technical feasibility.
Continue Viewing …
Continue Viewing …
