Lyssna is a versatile platform tailored for UX professionals and researchers. It offers advanced features like heatmap generation, participant recruitment, and collaborative tools, making it a valuable resource for optimizing digital designs and aligning them with user expectations.

‍

Goals and Solutions 🌟

The primary goal was to build a front-end part of the website and set up a CMS that supports the complex needs of UX professionals and researchers. This included implementing a headless CMS architecture, a visual editor, localization and internationalization features, global blocks for reusable content, and structured content creation.

We partnered with a talented design team Unikorns 🦄, which has played a crucial role in making Lyssna's website visually stunning and user-friendly. Their creativity and attention to detail shine through in every aspect of the design 🎨. Thanks to Unikorns, Lyssna's website sets the standard for excellence in ✨ user interface design.

👉 Headless CMS Architecture: Storyblok follows a headless CMS approach 🏛️. This means that the content and the presentation layer are decoupled. Content is created and managed separately from the frontend, giving developers the freedom to use any technology or framework to display this content.

👉 Visual Editor: Storyblok provides a visual editor that allows non-technical users to create and edit content in a WYSIWYG (What You See Is What You Get) manner 🎨. This is especially useful for marketing teams and content creators who are not familiar with coding.

👉 Localization and Internationalization: Storyblok offers robust support for content localization and internationalization 🌍. You can manage content in multiple languages, and the system helps ensure that the correct language is displayed to users based on their preferences.

👉 Global Blocks: Often referred to as reusable content blocks or content snippets, are a powerful feature in content management systems like Storyblok 🧩. These blocks enable you to create, manage, and reuse specific pieces of content across your website or application consistently.

👉 Structured Content: Richtext fields in Storyblok enable content creators to add and format content using a familiar and intuitive interface 📝. This structured content can include headings, paragraphs, lists, links, images, and other rich media elements. This ensures that the content maintains a consistent structure and presentation on the website. 🖼️

👉 Efficient Page Loading: SSG pre-generates static HTML files for each page at build time. This results in extremely fast page loading because there is no need for server-side rendering (SSR) or client-side rendering (CSR) when a user requests a page.

👉 SEO Optimization: Static Site Generation 🚀 is beneficial for SEO because search engine crawlers can easily index the pre-generated HTML pages 📈. This can lead to better search engine rankings and improved discoverability.

👉 Smooth and Responsive Animations: Framer Motion provides a straightforward and powerful way to create smooth and responsive animations for web applications 🎨. It allows for the creation of fluid transitions, stunning visual effects, and interactive user interfaces.

👉 Client-Side Routing: Next.js provides client-side routing without the need for complex configuration. This enables smooth and fast navigation between pages.

👉 Tailwind CSS: Tailwind CSS accelerates development with its utility-first approach, making it effortless to create consistent and responsive user interfaces 🎨.

👉 TypeScript: TypeScript provides static type checking to catch errors and enhance code quality, helping developers write safer and more maintainable 🧰 JavaScript code.

👉 Improve the performance of handling a substantial volume of content originating from the CMS 🚀.

👉 Data Archiving: Sustain peak system performance for an extended duration ⏳.

👉 Enhance the efficiency of processing data from the CMS to achieve quicker loading times ⚙️.

‍

Front-end: ReactJS, Next.js, Typescript, Tailwind, Framer Motion, Next Sitemap, React Hook Form, Zod, React Lottie Player, React Popper Tooltip.

CMS: Storyblok