Mentimeter

React-based CMS Integration

Mentimeter.com is a platform for creating engaging, interactive presentations. My role centered on designing and developing public-facing web pages while integrating a Contentful CMS for easy content management. The web pages were built using React and Next.js, leveraging Mentimeter's custom design system to ensure a consistent, scalable design.

As the front-end developer and designer for the public web pages, I was responsible for:

  • UI/UX Design: Creating user-friendly, visually appealing, and accessible pages using existing content.
  • Front-End Development: Building the designs with React and Next.js to ensure a fast, responsive, and scalable website.
  • CMS Integration: Implementing and connecting Contentful to enable efficient content management by the marketing team.

The primary challenge was to create a responsive, scalable web presence that would enable non-technical users to easily manage content via the CMS, while maintaining performance and design consistency across the site.

Research & Planning

Engaged with stakeholders in the marketing and product teams to identify key features and content needs.

Systematized all existing pages to ensure seamless transfer of previous content into the new setup.

Design Phase

Created layout and block components based on Mentimeter's design system, ensuring visual alignment with the brand.

Development

Built the front-end using React and Next.js for server-side rendering, ensuring fast performance.

Implemented responsive design practices, ensuring full functionality across mobile, tablet, and desktop devices.

CMS Integration

Integrated Contentful as the content management system, empowering the marketing team to update pages independently.

Developed custom, reusable components for the content team to easily manage and populate content, such as feature pages, case studies, and blog posts.

Rebranding

Participated as a stakeholder in a parallel rebranding project, ensuring alignment with the new direction.

Implemented changes to the look and feel, including new fonts and colors, making sure implementing the new branding was easy.

Results

This project not only met Mentimeter's immediate needs but also laid a strong foundation for the future growth and development of their web presence. The system remains in active use today, maintained by a dedicated team.

This project showcased the power of combining modern web technologies with a robust content management system to create a scalable, efficient, and user-friendly website. React, Next.js and Contentful integration proved a powerful combination, allowing for rapid development, excellent performance, and streamlined content management.

Key takeaways from this project include the importance of scalability, balancing flexibility and structure, performance optimization through server-side rendering, and the value of collaboration between development, design, and marketing teams.

The project not only met Mentimeter's immediate needs but also laid a strong foundation for the future growth and development of their web presence. The system remains in active use today, maintained by a dedicated team.