UX RESEARCH. UI DESIGN. INTERNSHIP
Jos Mundo Website RevampHow can we optimise the shopping experience while effectively communicating product story?
Team
Adrianna Yiu, Designer
Elaine Umali, Digital Programme Manager
Ross Baker, Developer
What I contributed in
WireframingMobile Designs
High-Fidelity Prototyping
Results
A research study website supporting cool roof research throughout its duration and representing the positive impact of research to the public for future access.A simple design template for subsequent research study websites.
Background
Extreme heat poses health, environmental, and economic challenges, especially in low- and middle-income countries where affordable solutions are scarce. The Reflect study examines how cool roof materials can reduce indoor temperatures to improve well-being in heat-affected areas.TThe objective was to design a website that supported the cool roof research throughout its duration and represented the positive impact of research to the public for future access.
Summary
1. Refining Objective
Aligning of project goals and constraints with the roadmapPerformed audits on an array of 8 NPO websites.
2. Synthesis
Experimented with content and page structure through rapid wireframing and feedback. 3. Design Development
Continuously iterated with the team toward a working prototype for stakeholder demonstration.Created pixel-perfect wireframes and mobile versions.
4. Documentation
Streamlined documentation for developer handoff and contributed to QA testing rounds.Refining Objective
Aligning resources with project goals.One of the main challenges during the production of the Reflect website was the time and technical constraints; Having to keep the pages down to a minimum and have MVPs rolling through to achieve the project timeline.
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.
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.
Rapid Wireframing
Points and findings after review with the design team.And our guiding principles when iterating on the final designs.
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. Our approach involved simplifying the pages as much as possible and including only the essential elements.
We conducted experiments on creating an engaging experience within the constraints of limited page requirements.
Aiming to ensure an enjoyable user experience while honoring this constraint.
How might we
Organise information in a simple but engaging way?Synthesis #1
Interactive site lead section for primary research membersInteractive research study steps section for context detail
1. Interactive 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.2. User Control
Building confidence by designing a transparent 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?Interactive news and publication cards
1. 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.2. 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?1. Consistency
This approach ensures users can smoothly switch between platforms without any confusing differences.2. Interactive
Preserving interactive elements like animations and touch interactions on mobile ensures users can seamlessly interact with content across platforms.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.
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.