The Puerto Rico 100% Renewable Energy (PR100) Study

  • Challenge

    Create an accessible website to share the results of the PR100 study, allowing users to view data and research findings in both English and Spanish. Joining the project after most of the user research phase, my role was to analyze and leverage the existing data to design a bilingual website that was user-friendly, accessible, and catered to both native English and Spanish speakers.

  • Process

    As the UX Design Lead, I applied a user-centered design approach to create a bilingual website. I led the development of the UI, UX, and information architecture, ensuring the website was easy to navigate and the data and research findings were clearly presented. My goal was to create a seamless experience, ensuring that both language versions offered an equally informative and user-friendly interface.

  • Outcome

    The website effectively showcased data and research findings in a clear, easy-to-navigate format, allowing for intuitive usability and accessibility in both languages. Delivered on time and meeting project goals, the outcome pleased Puerto Rican stakeholders, who have since engaged our team for further projects related to their renewable energy transformation. Visit pr100.gov.

UX Research Analysis

In my UX research and analysis role, I leveraged existing research and insights to make informed, user-centered design decisions. I reviewed extensive user, stakeholder, and advisory group interviews so by the time I began design, I had a deep understanding of user and stakeholder needs, allowing me to quickly start the design process. I facilitated working sessions in FigJam, collaborating with the team to define an intuitive top navigation and footer structure that would enable users to easily find content. We continuously referred to the user research data throughout these sessions, ensuring that all decisions were grounded in the users’ needs and behaviors.

UX/UI Design

During the prototyping phase, I translated research insights into low- and high-fidelity wireframes, ensuring a clear and intuitive user experience. Developing an interactive Figma prototype allowed stakeholders to fully navigate the site, providing a tangible representation of the product’s look and functionality. This hands-on approach facilitated meaningful feedback, ensuring alignment with user needs and project goals before development. The prototype served as a critical tool for refining interactions, optimizing workflows, and validating design decisions through iterative stakeholder reviews.

Prototyping & Usability Testing

In the prototyping and usability testing phase, I worked closely with our User Experience researcher to test A/B prototypes. We developed two prototypes for Amber to conduct usability testing, and through this process, we quickly identified that users preferred one prototype over the other.

Functionality was a key focus during this phase, as we needed to showcase the user flow and key features of the site, particularly the results of the study, which we anticipated would be of high interest to users. We created a fully functional prototype to share with stakeholders and usability testing participants, ensuring that it effectively demonstrated the site’s functionality and user interactions. This approach allowed us to gather valuable feedback to refine the design and improve the overall user experience.

Deployment

In the deployment phase, I collaborated closely with developers using GitHub, Terminal, and VS Code to run the code on my personal computer. This setup allowed me to respond to pull requests quickly and effectively, ensuring smooth progress during development. Deploying a bilingual website presented unique challenges, particularly in ensuring that content seamlessly translated between English and Spanish. I worked alongside the team to ensure all elements, including alt text, ARIA labels, data visualizations, and graphics, were properly translated and accessible in both languages. This required close coordination between all team members to maintain consistency and functionality across the site, ensuring a seamless user experience for both language audiences.