INTRODUCTION
Working with the digital team to develop a website outlining the research of the global multi-institutional academic team. The Reflect study assesses cool roof materials' efficacy in mitigating indoor temperatures, aiming to enhance well-being in heat-affected areas.TEAM
Adrianna Yiu, DesignerElaine Umali, Digital Programme Manager
Ross Baker, Developer
WHAT I CONTRIBUTED IN
WireframingHigh-Fidelity Prototyping
Developer Handoff
RESULTS
Research study website and a design template for subsequent research study websites
BACKGROUND
REFLECT Research StudyLocation of study sites (from left to right) Hermosillo, Mexico; Ouagadougou, Burkina Faso; Ahmedabad, India; Niue; Oceania.
Housing typologies in Hermosillo, Ouagadougou, Ahmedabad, India and Niue.
Houses made from earth block or adobe.
Defining project goals to set design focus
IMMEDIATE GOAL
🔬 To promote the Reflect groundwork.To reflect the work of sponsors and partners, research members and study participants. For the stakeholders to be made known of the impact of their involvement.
LASTING GOAL
🌐 Have a standing platform that present the real-life value of research studies.For this study, to see the impact of Reflect’s cool roof solutions in people’s daily life and future wellbeing, and display the significance of climate awareness.
CHALLENGE
One of the main challenges during the production was negotiating with technical constraints such as time. To keep the pages down to a minimum and ongoing element refinement to achieve the production timeline.RAPID WIREFRAMING
Determining requirements through mixing and matching elementsAfter auditing a mixture of NPO and news-focused websites, wireframing for the News and Publications and About Us page. The example below shows the culling from rapid wireframes to a working latest working copy for the after a feedback round.
Our guiding principles iterating on following refinements
FOCUS #1
✂️ We made a deliberate choice to avoid adding extra sections and instead focus on the provided copy. This decision was driven by a careful consideration of development time. Including only the essential elements, simplifying the pages.
FOCUS #2
⚙️ Experiments on creating an engaging experience within the constraints of limited page requirements.Challenging ways to push the ways of diplaying information.
FINAL DESIGNS
How can we display comprehensive research in a simple but impactful form?HOW MIGHT WE
Illuminate the work of the global research team in a beautiful and concise way?SYNTHESIS
Interactive site lead section for primary research membersInteractive approach.
To depart from the typically dull approach to research study websites, we leveraged interactive motion to engage users and enhance their browsing experience, sparking interest in the content.
SYNTHESIS
Interactive research study steps section for context detail
User control.
Building confidence by designing an experience that relies on user engagement for accessing further information.
HOW MIGHT WE
Introduce news and publications in a way that lessens production time and keeps site load light?SYNTHESIS
Interactive news and publication cards
Site load.
By using links instead of embedding resources directly onto the site, not only does this approach lessen the load on the site, but it also aids in meeting target production times.
Abstract on hover.
Makes the browsing experience interactive, allowing users to efficiently scan through resources and quickly find what they are looking for.
HOW MIGHT WE
Translate to mobile responsive design?
SYNTHESIS
Keeping consistenty
Working in a flexible grid ensures users can smoothly switch between platforms without any major differences.
Interactive element.
Preserving interactive elements like animations and touch interactions on mobile ensures users can seamlessly interact with content across platforms.
REFLECTION
💡 Adapting to project constraints. Utilising limitations like the page limit to drive the design forward. For example, innovating on how to best use space to emphasise certain affordances and constantly leaning into challenges such as these. It was particularly fun discussing design options during reviews.
REFLECTION
🗓️ Abudant learnings despite a short timeline.A highlight was the rapid-iterative approach, which allowed us me to experiment, fostering an environment where diverse ideas were embraced and designs were approached with greater depth. This led to many interesting outcomes. Additionally, I learned valuable lessons from the team, such as refining prototypes and motion.