My strong foundation in humanities allows me to leverage research and human interaction as essential tools to understand the world and uncover new avenues for innovation. I am dedicated to continuous learning, constantly refining my craft to drive meaningful change through design.

Postgraduate Certificate in UX Design and Beyond

M.A. in Social Communication

M.A. in History

Postgraduate certificate in Fashion and Creation

B.A. in Social Communication – Journalism

B.A. History

My background is a little bit crazy, but I promise that it all make perfect sense.

My academic formation

Here are some of the companies I’ve worked for.

My professional experience

With over ten years of experience in design across startups and large companies, I specialized in digital products. 

About me

Here is where you can find me.

Contact

With over a decade of design experience, I've focused on streamlining design processes and creating user-centered solutions grounded in research and collaboration. My humanities background enhances my ability to drive innovation and deliver seamless user experiences.

Those are the main areas I've been working with.

Main experience

Do you want to see some of my work?

My projects

prototyping

visual identity

user testing

blueprint

user journey

ux/ui design

interviews

surveys

benchmarking

desk research

figma

storybook

nextjs

reactjs

wordpress

javascript

html

Some of the tools that I've learned how to use during my career.

Tools

I’m a ux/ui designer.

Hi, my name is Anna

The client, a leading digital news outlet, had been using an external platform to publish Web Stories, but it was transitioning from a free to a paid service. Given the new costs, the technology team decided it was time to develop an in-house platform. This custom platform would not only eliminate the need for the external service but also address issues identified in user research, such as the time it took to create Web Stories, system slowdowns, and design inconsistencies.
The existing content management system (CMS) was not equipped to support this format, necessitating the development of a specialized web app. The goal was to create an intuitive tool that would allow journalists and content creators to easily produce and publish Web Stories directly to the news site.
To address these challenges, we developed a new web app specifically for creating Web Stories. This app was designed to be user-friendly, with templates aligned with the brand and real-time previews. The project included user research, UX/UI design, and full-stack development to ensure a smooth and efficient workflow for content creators.

As the UX/UI Designer for this project, I was responsible for the entire design and development process, including:

 Conducted interviews and usability tests with journalists and editors to identify pain points and requirements.

 Developed wireframes, prototypes, and high-fidelity designs, focusing on ease of use and seamless integration with existing workflows.

 Worked closely with the development team to study the implementation of the design using modern web technologies like React.js and Node.js, ensuring the web app was scalable and maintainable.

[✔] Wireframe and High-Fidelity Prototype

The client’s existing platform for creating Web Stories was about to transition from a free service to a paid one, prompting the need for a custom solution. The external platform, while functional, had its limitations, including slow content creation, system lag, and design inconsistencies identified in user research. The need for an in-house platform arose to address these issues and eliminate reliance on a third-party service.
The new platform was designed to streamline the process of creating Web Stories, making it more efficient and user-friendly. This enhancement was crucial for the news outlet to continue producing engaging, mobile-first content quickly, keeping up with the demands of modern digital consumers.


: The client recognized the growing importance of mobile-optimized content and the need to stay competitive by adopting new content formats that cater to modern news consumers.

We conducted comprehensive research to understand the workflows and needs of journalists and content creators. This involved user interviews, surveys, and competitive analysis. The research revealed that users needed a tool that was easy to use, offered creative flexibility, and integrated smoothly with the existing CMS.

We developed personas and user journeys to guide the design process, ensuring that the web app would meet the specific needs of its users. Key findings highlighted the need for real-time collaboration features, customizable templates, and intuitive content editing tools.

Blueprint, wireframes and high fidelity prototype

The project started with the creation of a detailed blueprint that outlined the app’s architecture and user flows. Wireframes were then developed to visualize the layout and functionality, followed by high-fidelity prototypes that allowed for initial user testing and iteration.

 New users can easily create an account through a streamlined sign-up process. The sign-up form captures essential information and ensures a secure registration, allowing users to access the platform’s full range of features upon verification.

 The dashboard serves as the central hub for users, providing an overview of their activity, recent Web Stories, and quick access to key features. It’s designed for ease of use, displaying important metrics and content management tools at a glance.

 The Webstories List feature allows users to view all their published and draft Web Stories in one place. It offers filtering and sorting options to quickly find specific stories, as well as tools to edit, delete, or publish them directly from the list. This feature is designed to streamline content management and improve workflow efficiency.

The Interactive Story Builder was the core feature of the app, designed to offer a seamless content creation experience. It provided users with a range of interactive elements, such as polls and quizzes, which could be easily added to any story. The Story Builder also supported multimedia content, allowing users to add images and videos into their stories. This made it possible to create rich, engaging narratives that could capture the attention of readers in a way that traditional articles could not.

 A collection of customizable templates designed to speed up the content creation process.

This feature allows users to see how their Web Story will look on mobile devices as they build it. The platform also validates the Web Story before publication, ensuring it meets all necessary requirements. Additionally, users can add and optimize elements for SEO directly within the platform, improving the discoverability of their stories in search engines.

Building a responsive design ensured that both the Web Stories created with the app and the platform itself would look great on any device, from smartphones to tablets to desktop computers. This was crucial for maintaining a consistent user experience across different platforms and screen sizes.

The design automatically adjusted layout, font sizes, and interactive elements to provide optimal viewing and interaction regardless of the device being used. This responsiveness not only maximized audience engagement and reach but also allowed content creators to build and edit Web Stories on various devices seamlessly.

The UI design was focused on simplicity and efficiency, ensuring that users could create compelling stories without needing advanced design skills. The design system followed a 12-column grid, with consistent spacing and typography to maintain a clean, professional look across the app.

Colors were chosen to reflect the news outlet’s brand identity, with a focus on accessibility. High contrast was maintained throughout the interface to ensure readability, particularly on mobile devices.

A detailed style guide was created to ensure consistency in design and functionality. This included specifications for colors, typography, spacing, and component design. A component library was also developed, allowing the design to be easily implemented and maintained by the development team.

The design system was built using Storybook, documenting all components and design tokens used in the app. This system ensured that the web app could be easily scaled and adapted for future updates, as well as ensuring that the user experience remained consistent across different platforms.

The WebStories web app was a significant innovation for the news outlet, allowing them to produce high-quality, mobile-first content quickly and efficiently. While the initial release focused on the core features, future updates were planned to include advanced analytics, A/B testing tools, and further customization options.

The project demonstrated the importance of user-centered design in creating tools that not only meet the needs of content creators but also enhance the overall quality and engagement of the news content itself. By staying attuned to the evolving needs of digital news consumers, the client is well-positioned to maintain their competitive edge in the industry.

A wep app innovation for a news outlet.

Web Stories CMS

Medroom is a pioneering virtual reality company focused on medical education. Their flagship product, a comprehensive “human body library,” offers meticulously detailed 3D models (both male and female) that encompass all fundamental structures of human anatomy. These models are vital for enhancing health-related educational courses.

Medroom's platform functions as a Learning Management System (LMS), enabling educators to craft and deliver immersive learning content via virtual reality or mobile applications. This content can incorporate 3D models alongside images, videos, text, audio, and quizzes. Additionally, the platform provides robust course management capabilities, positioning itself as a potential all-encompassing distance learning system.

The Medroom platform had become outdated, leading to system instability and an unappealing user interface. These issues discouraged users from creating content on the LMS, impacting the overall adoption and effectiveness of the platform.

To address these challenges, we embarked on a complete overhaul of the platform, from user experience analysis to interface design and development. The project involved extensive market research, persona development, user journey mapping, empathy mapping, insight generation, task prioritization, prototyping, and the final development of the platform.

As the UX/UI Designer, I led the UX and UI efforts in collaboration with another designer. Together, we made critical design decisions that shaped the platform's user experience. My responsibilities included:

 Co-led the UX/UI design process, ensuring that all layout decisions were made collaboratively to align with user needs and business goals.

 Utilized Figma, Adobe Illustrator, and Adobe Photoshop for design.

As the UI Engineer, I was responsible for the front-end development, in partnership with a back-end developer. My responsibilities included:

Front-end development using Next.js, React.js, and TypeScript, with REST API integration.

Creation and maintenance of the Storybook, which included the platform's style guide and component library.

The outdated platform required a complete rebuild, addressing both technical and user experience issues. We aimed to transform the platform into a modern, intuitive system that could efficiently handle content creation and course management, while also being aesthetically appealing and user-friendly.

 The need to provide a reliable, scalable, and engaging platform was critical for Medroom to maintain its competitive edge and continue to offer high-quality educational tools to medical professionals and students.

We conducted comprehensive research to understand the platform's user needs and benchmarked against key competitors. Surveys and interviews with users informed the creation of personas and user journeys, highlighting pain points and essential requirements for course content creation. These insights were mapped onto a prioritization grid, enabling the team to focus on the most critical features first.

Blueprint, wireframes and medium fidelity prototype

The platform architecture was meticulously planned around user workflows, resulting in a comprehensive blueprint that served as the foundation for defining screens and interactions. Initial wireframes facilitated user testing and stakeholder validation, eventually evolving into a medium-fidelity prototype that provided a clear vision of the platform's functionality and component structure.

 upon logging in, users are directed to a personalized dashboard where they can easily manage all aspects of their content creation process. The dashboard provides an overview of their active classes, offering quick access to the most important tools and information.

 users can efficiently manage their classes within the platform, with features that allow them to list all active classes, create new ones, and edit details of existing classes.

 the platform allows users to easily list, create, and edit lessons within their classes.

The Content Builder emerged as the platform's most complex feature due to its multi-step process that guides users through content creation. Inspired by familiar tools like Microsoft PowerPoint, the interface is designed to be intuitive, minimizing distractions and immersing users in the creative process.

The Content Builder incorporates a unique scene logic, which aligns with the temporal and spatial aspects of virtual reality. This allows users to arrange content in a non-linear, immersive way, distinct from traditional web platforms. Each step in the content creation process is streamlined, with tailored fields and previews that ensure users are aware of content requirements and progress.

Before the start of the development process, the prototype underwent rigorous validation with users and stakeholders, ensuring the design met their needs and expectations.

The UI was crafted with a focus on simplicity and familiarity, adhering to Nielsen's 10 usability heuristics. The design drew inspiration from social networks and content creation platforms, ensuring users felt comfortable and confident while navigating the system.

The layout employed a 12-column grid with consistent spacing and font sizing, utilizing Figma's Auto Layout for efficient component distribution. The color palette was carefully chosen, with green accents for action buttons and contrasts, complemented by neutral tones for the rest of the interface. Accessibility was a key consideration, with color contrast checks ensuring inclusivity.

The project provided an opportunity to lay the groundwork for Medroom's Design System. This included defining a cohesive color palette, selecting text fonts, and creating a library of SVG icons. Design tokens such as spacing, borders, and shadows were standardized to maintain consistency across the platform.

Elements featured modern design trends, with rounded corners, shading, and transparency adding a sense of lightness and movement to the UI. On course management pages, user-driven organization tools like filters and layout options were prioritized to enhance functionality.

After finalizing the style guide, we proceeded to build the component system. Using Storybook, we documented the components and design tokens in a scalable manner, ensuring they could be easily reused across other Medroom products. The Storybook served as both a development tool and a comprehensive guide to the platform's UI components.

The redesign and redevelopment of Medroom’s platform significantly enhanced the user experience, transforming a previously outdated and difficult-to-use system into a modern, intuitive tool for medical education. By focusing on user needs and iterative design, we were able to create a platform that not only met the immediate goals but also laid the groundwork for future enhancements.

Key successes included the seamless integration of 3D models and VR content, which are central to Medroom’s offering, and the development of a user-friendly Content Builder that allows educators to create immersive learning experiences with minimal effort. The adoption of a Design System ensured consistency across the platform and provided a scalable framework for future product iterations.

One of the most valuable lessons learned was the importance of early and continuous user involvement in the design process. By conducting thorough research and validating our designs through prototypes and user testing, we were able to address potential issues before they became problematic, resulting in a more refined and user-centric final product.

Looking ahead, the platform is now well-positioned to expand its features, including advanced data visualization tools and enhanced 3D content capabilities. The foundation we have built allows for continuous improvement and innovation, ensuring that Medroom remains at the forefront of medical education technology

Creating a learning management system from scratch.

Medroom Platform

A major educational institution sought to revamp its website dedicated to selling postgraduate courses. The existing site was functional but outdated, with an uninspired layout and navigation that did not cater to the needs of prospective students. The institution wanted a new website that would not only attract more students but also position its postgraduate courses as premium offerings, reflecting the high standards of the institution.

The existing website had several challenges, including low user engagement and a high bounce rate. To address these issues, the project began with a thorough analysis of user behavior using Google Analytics 4 (GA4) and CrazyEgg for heatmap tracking. These tools provided invaluable insights into how users interacted with the site, revealing pain points in the user journey and areas that required improvement.

The information architecture of the new site was meticulously planned based on these insights. Pages were reorganized to create a more intuitive navigation flow, ensuring that users could easily find the information they needed. The content hierarchy was also restructured to prioritize key information, such as course benefits, testimonials, and enrollment processes.

The market research indicated that postgraduate courses are often perceived as premium products. This insight guided the design process, leading to the creation of a sleek, dark-themed layout that exudes sophistication and exclusivity. The color palette, typography, and visual elements were carefully selected to reinforce this premium positioning, aligning with the expectations of prospective students looking for high-quality education.

As the UX/UI Designer and Developer for this project, I was responsible for:

Conducting the analysis of the existing site using GA4 and CrazyEgg to understand user behavior and identify areas for improvement.

Planning and reorganizing the site’s information architecture based on data-driven insights.

Designing the new website layout, ensuring it conveyed a premium, sophisticated aesthetic that would appeal to the target audience.

Developing the site using Joomla, leveraging the SP Page Builder extension for a seamless and responsive user experience.

Collaborating closely with marketing and content teams to ensure the site’s messaging aligned with the institution’s branding and goals.

[✔] High-Fidelity Wireframes & Prototypes

[✔] Final UI Design in a Dark Premium Style

[✔] Fully Developed Website in Joomla with SP Page Builder

The primary challenge was to transform a basic, outdated site into a modern platform that effectively communicated the premium nature of the institution’s postgraduate courses. The existing site lacked a clear content strategy and failed to engage users, leading to a significant drop-off in the user journey before reaching the enrollment stage.

Given the competitive nature of postgraduate education, it was crucial for the institution to present its courses in a way that stood out in the market. The new site needed to not only be visually appealing but also strategically designed to guide users smoothly from landing to conversion.

User behavior data collected from GA4 and CrazyEgg was the foundation of our research. The analysis revealed key interaction patterns, areas of high engagement, and sections where users lost interest. Using this data, we restructured the information architecture to prioritize high-impact content, such as course descriptions, testimonials, and faculty profiles.

Based on the new architecture, wireframes were created to outline the site’s layout. The design incorporated clear pathways for users, with strategically placed calls-to-action to guide them toward course enrollment. The wireframes were then developed into high-fidelity prototypes.

The market research indicated a preference for dark-themed, premium layouts among competitors offering postgraduate courses. To align with this trend, the site’s visual design was created using a dark color palette with contrasting highlights, sophisticated typography, and high-quality imagery that reflects the institution’s prestige. The design was minimalist yet impactful, emphasizing clarity and ease of use.

Development with Joomla & SP Page Builder

The site was developed using Joomla, with the SP Page Builder extension enabling flexible and responsive design. This tool allowed for modular page creation, ensuring that the site could be easily updated and maintained. The development process included rigorous testing to ensure the site performed well across all devices and screen sizes.

The site’s homepage prominently features postgraduate courses with a premium design aesthetic, highlighting the unique selling points of each program through engaging visuals and concise copy.

The new information architecture ensures users can easily navigate through the site, with clear pathways leading to course details, testimonials, and enrollment pages.

Built using Joomla with SP Page Builder, the site is fully responsive, offering a seamless experience across desktops, tablets, and mobile devices.

The redesign of the postgraduate course website successfully repositioned the institution’s offerings as premium products in the competitive educational market. By leveraging user behavior data and market research, we were able to create a site that not only looks sophisticated but also effectively guides users through the decision-making process, leading to increased engagement and higher enrollment rates.

The project underscored the importance of data-driven design in creating user-centric experiences. Through continuous testing and iteration, we were able to refine the site’s architecture and design to meet the needs of both the institution and its prospective students. The modular development approach using Joomla and SP Page Builder ensures that the site can easily adapt to future needs, providing a scalable solution for the institution's evolving goals.

A new website for postgraduate courses.

Postgraduate Website

The client, a leading educational institution, needed to develop a Student Portal that would serve as a comprehensive web app for managing student information, course enrollment, academic performance, and faculty communication. The goal was to create a centralized platform where students could access all necessary academic resources and administrative services in one place.

The existing system was fragmented across various platforms, leading to inefficiencies and a poor user experience. The portal was outdated, with a cluttered interface and cumbersome navigation, leading to frequent user complaints.

The institution sought a modern, user-friendly solution that would integrate these disparate systems, streamline operations, and enhance the overall student experience. To address these issues, a complete redesign of the portal was initiated. This process involved in-depth user research, UX/UI design, and development of new functionalities. The redesign focused on creating an intuitive, accessible, and responsive web app that would cater to the needs of a diverse student body.

As the UX/UI Designer, I was responsible for overseeing the entire design process, from user research to final implementation. My key responsibilities included:

 Conducted surveys, interviews, and usability tests to gather insights from students and faculty, which informed the design decisions.

 Led the creation of wireframes, prototypes, and the final interface design, ensuring a seamless and engaging user experience.

The legacy portal was not meeting the needs of its users, leading to decreased engagement and satisfaction. Key issues included a confusing interface, slow load times, and a lack of mobile responsiveness, all of which contributed to a fragmented and frustrating user experience. Additionally, since the platform was developed by a third-party provider, the institution faced restrictions on development.

 The institution recognized the need to improve the portal to enhance student satisfaction, streamline administrative processes, and ultimately support better academic outcomes. To address development limitations, we focused in component styling, page organization, and the addition of new pages with integrations and content.

Extensive research was conducted to understand the pain points and needs of students and faculty. This included competitive analysis, surveys, and in-depth interviews. The research revealed that students valued a streamlined, visually appealing interface that allowed them to quickly access essential information such as course schedules, grades, and announcements. Faculty, on the other hand, needed a tool for managing student communication.

The project began with the development of a blueprint that mapped out the portal's new structure. Wireframes were created to outline the basic layout and functionality, followed by high-fidelity prototypes that allowed for initial user testing and feedback.

The dashboard serves as the central hub of the student portal, providing quick access to the platform’s key features. It includes shortcuts to essential links, messages from the university, a progress chart showing the student’s advancement in their course, and alerts for overdue payments.

In this section, students can access comprehensive details about their course, including their class schedule, completed and ongoing subjects, grades, assessments, attendance records, and academic history. Additionally, students can manage their enrollment and submit requests for documents.

These are dedicated pages within the portal designed to facilitate communication between the university and students. They include tutorials, important announcements, and information about available benefits. These pages can be customized to meet the specific needs of the institution and its students.

The UI design focused on simplicity and accessibility, adhering to best practices for web design and ensuring compliance with WCAG guidelines. The layout was structured with consistent spacing and font sizes to create a clean and organized interface.

Colors were carefully selected to align with the institution's branding while ensuring sufficient contrast for readability. The primary colors were used sparingly for action buttons and key elements, while neutral tones dominated the background to reduce visual clutter.

A comprehensive style guide was developed to ensure consistency across the portal. This guide included specifications for colors, typography, spacing, and component design.

The Student Portal redesign was a significant step forward in enhancing the user experience for students and faculty alike. The project underscored the importance of user-centered design in creating digital platforms that are not only functional but also enjoyable to use. By closely aligning with the needs of its users, the new portal has the potential to become an indispensable tool in the academic journey of the institution's students.

The complete redesign of an academic portal.

Student Portal

"A trip through RS" is a responsive website developed for GaúchaZH, a leading communication company in Rio Grande do Sul, Brazil. The project aimed to create a comprehensive digital travel guide, offering users a curated selection of destinations for short trips across the state. The website was designed to cater to the needs of both locals and tourists looking for cultural and recreational activities.

The project began with an extensive survey targeting GaúchaZH's audience to identify the types of content they most desired or felt were missing from the newspaper and website. The survey revealed a strong demand for a more interactive and personalized travel guide, highlighting lesser-known destinations and cultural events throughout Rio Grande do Sul.

With these insights, the website's structure was meticulously planned to function as an intuitive travel guide. Users could explore various travel options based on their interests, such as adventure, gastronomy, history, or relaxation. The navigation was designed to allow content customization according to the user's objectives.

As the Web Designer for this project, my key responsibilities included:

 Crafting a visually appealing and user-friendly design that aligns with GaúchaZH's brand identity while providing an engaging user experience.

 Selecting and editing high-quality images that capture the essence of Rio Grande do Sul's diverse landscapes and cultural attractions.

 Implementing the design using HTML, CSS, and JavaScript to ensure the site is responsive, accessible, and optimized for various devices and screen sizes.

[✔] Responsive Front-End Development with HTML, CSS, and JavaScript

GaúchaZH needed a digital platform that would not only attract users but also provide a valuable service by highlighting cultural and travel opportunities within Rio Grande do Sul. The challenge was to design a site that could cater to a wide audience with varying interests while offering a personalized experience that traditional travel guides lacked.

Given GaúchaZH's commitment to promoting local culture and events, the project was an opportunity to enhance their digital presence by providing a unique service that aligned with their editorial mission. The website needed to engage users, encouraging them to explore and appreciate the rich cultural offerings of Rio Grande do Sul.

The website's structure was designed to be intuitive, with a focus on ease of navigation. The information architecture organized content into categories such as destinations, events, and travel tips.

The design of "A trip through RS" reflects the vibrant culture and diverse landscapes of Rio Grande do Sul. The layout uses a clean, modern aesthetic with a strong visual emphasis on high-quality imagery, which serves as a gateway to the state's many attractions. The color palette and typography were chosen to evoke a sense of adventure and discovery, while maintaining readability and user engagement.

The front-end development focused on creating a responsive site that performs seamlessly across all devices. HTML, CSS, and JavaScript were used to build a flexible layout that adapts to different screen sizes, ensuring that users have a consistent experience whether they are browsing on a desktop, tablet, or smartphone. Interactive elements were integrated to enhance user engagement, including customizable itineraries and dynamic content filters.

Users can tailor the content based on their interests, selecting from categories like culture, nature, or gastronomy, and receive personalized travel suggestions.

The site prominently features high-resolution images of destinations, enhancing the user experience and providing a visual preview of each location.

The site is fully responsive, providing an optimized experience across all devices and screen sizes, from large desktop monitors to mobile phones

The development of "A trip through RS" successfully positioned GaúchaZH as a leader in promoting local culture and travel within Rio Grande do Sul. By combining user-centric design with high-quality content, the site offers a unique and personalized experience that encourages users to explore the state's many attractions.

The project demonstrated the value of in-depth user research in shaping content strategy and design. The personalized travel guide feature, combined with a responsive layout, ensured that the site met the diverse needs of its audience while providing an engaging and visually appealing platform. This project reinforced the importance of aligning digital products with user expectations and market trends, ultimately leading to increased user engagement and satisfaction.

adobe xd

A website based in users needs.

A trip through RS

Ecocitrus, a pioneering cooperative in the organic production of citrus juices and essential oils in Vale do Caí, Rio Grande do Sul, required a digital presence that would reflect its core values of cooperative work, sustainability, and the organic nature of its products. The project was developed in partnership with Cultivo Agency, with a focus on creating a website that would serve as both a branding tool and an information hub for the cooperative’s diverse audience, including consumers, partners, and other stakeholders.

The primary objective was to design a website that visually communicated the cooperative’s emphasis on people over industrialism, aligning with Ecocitrus's brand identity. The design process was guided by the principles of lightness, clarity, movement, fluidity, and modernity. These concepts were central to creating a site that not only looked appealing but also conveyed the strength and uniqueness of the Ecocitrus brand.

The layout and design were crafted to be organic and modern, reflecting the natural and sustainable focus of the cooperative. The design language incorporated fluid shapes, soft color palettes, and clean typography, all contributing to a cohesive visual identity that mirrored the values of Ecocitrus.

As the Web Designer for this project, I was responsible for:

 Developing a visual identity that reflects the organic and cooperative nature of Ecocitrus, ensuring that the design aligns with the brand's ethos.

 Creating a layout that embodies lightness and fluidity, using the company's logo as a foundational element for the design.

 Implementing the design using WordPress as the content management system (CMS), with additional functionalities developed using JavaScript and jQuery to enhance interactivity and user experience.

[✔] Interactive Elements with JavaScript and jQuery

Ecocitrus needed a website that would distinguish it from industrial producers by highlighting its cooperative model and commitment to organic practices. The challenge was to design a site that was both modern and organic, embodying the cooperative's values while providing a seamless user experience.

The website was an essential tool for communicating Ecocitrus’s brand values and reaching its audience in an increasingly digital world. It was crucial that the design not only attracted visitors but also effectively conveyed the cooperative’s mission and identity.

The visual design process began with an exploration of Ecocitrus’s brand identity, focusing on creating a digital experience that reflected the cooperative’s emphasis on sustainability, community, and organic production. The design was heavily inspired by the natural shapes and colors found in citrus fruits, with a soft, fluid aesthetic that echoed the cooperative’s values.

The layout was structured to guide users through the Ecocitrus story, from its origins as a cooperative to its current operations. The site’s information architecture was organized to be intuitive, ensuring that users could easily find information about products, cooperative initiatives, and sustainability practices.

The layout featured large, organic shapes and sections that flowed naturally from one to the next, symbolizing the fluidity and interconnectedness of the cooperative’s operations. The color scheme was light and fresh, using oranges, greens, and whites to convey a sense of natural purity and freshness.

The site was developed using WordPress, chosen for its flexibility and ease of use in managing content. A custom WordPress theme was developed to implement the unique design, with additional customizations made using JavaScript and jQuery to create interactive elements that enhanced the user experience.

Displaying Ecocitrus’s range of organic products with descriptions and images.

A section dedicated to sharing the stories of the people behind Ecocitrus, highlighting the cooperative’s focus on community and collaboration.

Pages dedicated to educating visitors on the cooperative’s sustainable practices and environmental impact.

The Ecocitrus website successfully embodies the cooperative’s values of sustainability, community, and organic production through its thoughtful design and development. By aligning the visual and interactive elements with Ecocitrus’s brand identity, the site not only serves as an effective digital marketing tool but also as a platform for educating users about the cooperative's mission and products.

The project reinforced that visual identity is not just an aesthetic choice but a reflection of the brand’s core values. The integration of interactive features using JavaScript and jQuery added depth to the user experience, making the site engaging and informative.

The successful deployment on WordPress demonstrated the platform’s capability to support a robust, scalable website that meets both current and future needs. This project highlighted the importance of flexibility in design and development, allowing the Ecocitrus team to easily manage content while maintaining the integrity of the site’s design.