Gelatina

Development and design of a responsive landing page for the Argentinian media Gelatina

  • 🎨Role: Product redesign (UX/UI), front-end web development
  • 🛠 Tools: Figma, Adobe Illustrator, Adobe Photoshop, Visual Studio Code, HTML, CSS.

*Note: This in a conceptual project and realized with Romina Miccono.

The challenge

The main challenge was the development and design of a responsive landing page for the Argentine media, with the aim of improving the user experience. This involved offering a virtual card with exclusive discounts and capturing the attention of new and returning users through intuitive and fast navigation

Design process

    The initial research consisted of a in-depth analysis of the media and its audience, which made it possible to identify the topics of discussion and the form of communication. This led to the creation of two user persona: an influencer interested in network growth and monetization, and passionate about political debate. From these profiles, it was defined that the reward of the landing page would be a virtual gift card with exclusive discounts

The definition phase for Gelatina involved creating a moodboard with a cyberpunk aesthetic using purple and green as main colors, inspired by the style of the media’s homepage. In addition, a benchmark of other landing pages was conducted to understand best practices on structure and key elements such as clear headlines and effective calls to action, analyzing how Slack, HubSpot, Squarespace and Leadpages presented their content and benefits

The ideation focused on the creation of wireframes to facilitate information prioritization, ensuring that the Call To Action remained visible and focused. Design decisions sought smooth navigation without the need to open new tabs, organizing content into columns and adding informative sections. Aesthetically, the fonts and colors of Gelatin were retained, with a prominent use of dark purple, and cards were simplified to guide the user towards the final form

Mockups

  • icono check

    Features custom registration using JavaScript

  • icono check

    Maintains Gelatina's branding so active users stay familiar with the brand

  • Resolutions worked for desktop: 1440 x 608, 1024 x 608
    Resolutions worked for mobile: 425 x 608, 320 x 608, 375 x 608

Result

The page was developed in HTML5, CSS and JavaScript using VS Code. Implemented full form submission functionality and responsive design that adapts to different devices, allowing access from multiple platforms

What I learned

The main learning was understanding the basics of HTML and CSS and the satisfaction of seeing your own design programmed and functional. We managed to preserve the essence of gelatin and create a landing page with an attractive reward, but always with possibilities for improvement