About
How do we relay scientific research to cater to both the patients and the GPs?

Project Antibiotic Conservation AotearoaUX RESEARCH   UI DESIGN   INTERNSHIP   During a six-month period at NIHI, I worked in the digital team to develop a website and create supporting infographics. These materials showcased the work of the UOA academic team in antibiotic stewardship, promoting safe antibiotic use for future generations in Aotearoa.

Team

Alex Rengifo, Designer
Adrianna Yiu, Designer
Elaine Umali, Digital Programme Manager
Ross Baker, Developer

What I contributed in

Competetive Analysis 
Wireframing
High-Fidelity Prototyping
Copy Writing
Mobile Designs
Stakeholder Communication
Design System

Results

A research study website that aids stewardship on safe antibiotic use for patients and GPs 

Infographic posters for distribution in clinics around New Zealand

Summary

1. Competitive Analysis

Competitive analysis with 5 healthcare and research NPO websites.

2. Stakeholder Interviews

Scope stakeholder goals and understand the project objectives.

Gathered accessibility and usability specifications.

3. Defining Requirements

Incorporated trend and insight from discovery into the wireframes.

4. Refinement

Created pixel-perfect wireframes and mobile versions. 

Background

Antibiotics are medicines used to treat bacterial infections. Antibiotic usage in Aotearoa is high by international standards.
This intervention aims to reduce antibiotic prescribing for people with common viral infection by 8% and to slow the spread of antibiotic resistance. This website and the knowledge gems are part this wider intervention to promote safe antibiotic use for future Aotearoa. Co-designing with general practitioners (GPs) and the research/expert team throughout.

An accessible decision support tool for GPs and patients. A website that displays the impact of the intervention at a wider scale.

Competitive Analysis

Why do current research websites feel so cold?
Through audits of similar research websites, we found that the same problems were coming up: feelings of a clinical and almost robotic ways of communicating information. 
KEY TAKEAWAY
Unfamiliarity of content and overwhelming appearance.

Medical jargon, in addition to the crowded layouts may cause users to feel overwhelmed upon onboarding. 
KEY TAKEAWAY
Lack of intuitive direction and exploration nudges.

Complicated navigation and lack of user control may cause users to feel out of place and give up on the task more quickly.


Initial Wireframes + Stakeholder Meetings

Co-designing with the research team.
Wether you are a well-versed clinician or a layperson part of the wider public, we wanted to pose a website that welcome the diversity of the people in Aotearoa—to imagine the website in homes and clinical settings. 

The initial set of wireframes presented as an idea generator for the stakeholders to capture visual preferences, as well as double-check if the content basis is covered.
 Key considerations for the initial set of wireframes.

1.  Exploration nudges

Experimenting with various ways of adding interactive portions to lead encourage exploration and nudge to leads, such as hover cards and switch tabs.

2. Information reliability

Adding visual markers that signify legitimacy of information. For example, utilising statistics for immediate context call-out.

3.  Designing with pending content

At sections with missing content, create versions that utilise a a character limit to eliminate surprise down the linePuzzling our way on route to the final designs.

CHALLENGE
Incorporating website standing by incorporating branding and researcher voice.
The challenge of weaving in study identity with seamless user workflows that effortlessly transitions from clinical settings such as a QR code from a poster to the website on your phone.
CHALLENGE
Considering the diverse skill levels of users interacting with the website.

Challenging how we can craft an experience that can rely on its intuitive design to help people of a diverse set to recover from errors, such as a wrong selection. 

Design System

Establishing a sense of warmth and dependability with type and colour.

We opted for a simpe, rounded typefaces aimed at creating feeelings of friendliness, and created a color palette that easily corresponds to different elements to deliver a smart and cohesive visual flow throughout the website.

How might we

Organise the information on the website so that navigating and understanding material is easy?  

Synthesis #1

We created a resource hub that arranges the material within a filter functionality. Separated into the main categories: Publications, Infographics and Videos. Following this, the task of classifying information that needs copy or a follow-up was noticeably more efficient. 




Special features and considerations of the resources pages for publications, videos and infographics.

1. Human-facing approach 

Softening the process of finding learning material which often times feels static and cold by specifying dates, resource type and authors. In this way, the response of feeling and interactions is immediate. 

2. Clear course of action

Designing elements and its function to display transparently on the screen so the users feel in control of their status and abilities throughout the website. 

3. Intentional suggestions

Increasing the flow by providing related suggestions, and having a multitude of actions available on a single page at a time.

Synthesis #2

Creating the research and about page to encapsulate the crux of the project advocacy in a sharp and considerate manner. Utilising layout options to transform visually chunky information into beautiful, easily digestible sections.

Synthesis #3

Translating the features and considerations to a smaller screen without losing the functionality. A straightforward approach that runs in seamless parallel with the larger resolutions.

Special features and considerations for the mobile versions.

1.  Providing “design limits”

Making a pushed version with the most characters to fit into a card to foresee appearance and liminate issues down-the-line, especially in development.

2. Opportunities for exploration

Designing a fun sorting filter and providing just enough friction cues for users to feel encouraged in exploring the other pages. Framing the journey as an experience rather than a task. Musings and Learnings
REFLECTION
Working in a close-knit team of product manager, developer and designers.

Developers often provide great insight on design scalability like how the hover cards may scale on mobile, or more efficient ways on animating prorotypes from designers. Grateful to widen perspectives on the production as a whole product and adopting skills from the team. 

REFLECTION
Adapting within the design process.

Leaning into stakeholder and team feedback and constraints like time. Utilising how to best use your skills and time as a designer to advocate for the end-user, and cater to the project as a holistic goal. Stakeholders may have different methodologies so learning how to continuously evolve into what the project needs or what would make the process more efficient. 
Other projects you may like