Web Development from Figma Prototype to Framer Website

Client Website

https://www.thehiddentransit.com/

My Role

UX UI designer

Framer Developper.

Project description

The Hidden Transit is a personal growth learning platform targeted at CEOs. They had a detailed Figma prototype and style guide and required the integration of this design into Framer, making it fully responsive and interactive. The website needed to accommodate various devices and include multiple functional pages.

Challenge

The primary challenge was to create a visually captivating and informative website that captures the essence of Chapada Diamantina. It needed to be engaging, easy to navigate, and capable of providing comprehensive information about the tours and hostel. Additionally, the site required a content management system (CMS) for easy updates and management of tour information.

Process

1. Research and Planning:

- Conducted thorough research and competitor analysis to understand the market and identify opportunities for differentiation.

- Developed a site map to structure the content and ensure a logical flow.

2. Wireframing:

- Created wireframes to outline the layout and structure of each page.

- Focused on user journey and intuitive navigation.

3. UX/UI Design:

- Designed detailed Figma prototypes with a focus on creating an immersive and visually appealing experience.

- Incorporated feedback from stakeholders to refine the designs.

4. Framer Development:

- Integrated the Figma prototypes into Framer, ensuring the site was fully responsive across desktop, tablet, and mobile devices.

- Developed a CMS for each tour to facilitate easy updates and content management.

5. Testing and Iteration:

- Conducted extensive testing to identify and resolve any issues.

- Iteratively refined the design and functionality based on testing feedback.

Results

- Immersive Digital Experience: Delivered a visually captivating website that immerses users into the universe of Chapada Diamantina.

- Responsive Design: Ensured the website performs consistently across all devices, providing a seamless user experience.

- Comprehensive Information: Successfully consolidated all the necessary information about the tours and hostel into one cohesive platform.

- Easy Content Management: Implemented a CMS for each tour, allowing for easy updates and management of tour information.