BACK TO WORK

ZEON Ventures Web Design

Project Overview

For the ZEON Ventures project, I collaborated with a team to develop a brand identity and website for an investment firm specializing in sustainability, health, and prosperity. My primary responsibilities included creating wireframes, designing brand guidelines, determining brand colors, and developing a fully responsive website using Framer. Throughout the project, I worked closely with the client to refine design elements, ensuring the final product aligned with their vision and business objectives.

Timeline

4 Months

Services

Web Design + Brand Design + Framer Development + Micro-Interactions

Client

ZEON Ventures

Website Link

www.zeon.ventures

Tools

Figma + Framer

Branding & Identity

We explored three brand directions, technology-driven, nature-inspired, and futuristic, before aligning on a cutting-edge yet credible identity for ZEON Ventures. A color palette of greens, blues, and purples highlighted innovation, sustainability, and professionalism. To help stakeholders envision the brand online, we built quick landing page prototypes showcasing potential website structures.

Brand Direction

Direction Examples

Wireframes & Structure

Our team translated our initial ideas into structured wireframes, ensuring that all critical information was clearly organized. We collaborated closely with the client throughout this process, refining the wireframes to highlight essential content and user interactions.

By maintaining an iterative approach, we effectively incorporated client feedback, making adjustments that enhanced content hierarchy, navigation, and overall user experience. These wireframes served as the foundation for the website’s development and design phases.

Lo-Fi Wireframes

Hi-Fi Wireframes

Results/Impact

This project was a dynamic collaboration that required multiple iterations and refinements based on client feedback. Through strategic wireframing, thoughtful branding, and meticulous development, we delivered a website that aligns with ZEON Ventures’ mission and strengthens their digital presence.

Outcomes:

Successfully launched the website on Framer with full functionality
Established a clear, modern brand identity aligned with stakeholder vision
Implemented a design system supporting 5 unique page templates for scalability
Set up a CMS for their blog, enabling easy content management and publishing
Enhanced user experience with interactive elements and intuitive navigation

Design Process

With wireframes approved, I shifted focus to the visual and interactive aspects of the website. I contributed to the development of the brand guidelines by leading the creation of the color system, which included:

Defining primary and secondary color palettes based on ZEON Ventures' brand vision
Assigning hex codes and establishing usage guidelines for consistency
Creating application examples to show how colors should appear across various brand assets
Researching and selecting imagery that complemented the visual direction

Color Exploration

Brand Guidelines

As I developed the website in Framer with my team, I ensured it remained fully responsive across devices. I also implemented engaging micro-interactions throughout the site to enhance the user experience — including smooth hover effects, subtle animations, and interactive elements that brought a dynamic, modern feel to the design.

Home & About Update

Final Hi-Fi Wireframes

Final Deliverables

I had a direct impact on several key pages, including:

Home Page: Designed to establish a strong first impression with a clean layout, clear navigation, and bold branding, guiding visitors smoothly to key sections of the site.
News Page: Designed a backend system that allows the client to update portfolio information independently, minimizing the need for external assistance.
About Page: Developed an interactive circular diagram that animates and highlights selected elements, adding a visually engaging and intuitive way to present company details.

To ensure a flawless final product, I also conducted extensive QA testing and debugging within Framer, optimizing performance and resolving any issues before launch. Below are examples of the screens across different screen sizes. To view the full website, click the link here!