Designing interactive wireframes for Austin Public Health
I lead the UX development of a new microsite for Austin Public Health’s 2024 HIV/AIDS awareness and testing campaign that connected currently diagnosed and at-risk individuals with community support networks, free testing, and preventative resources, with a central focus on earning the trust of some of Austin’s most vulnerable citizens.
Client
Austin Public Health, in collaboration with our UI & visual design partnership agency, Belmont Icehouse.
Role & Timeline
I led the UX development over the course of 6 weeks, working closely with internal stakeholders for APH, and creative directors for our agency partner.
Delivered
Responsive wireframes featuring interactive animations, dynamic layout, original content.
Advised Belmont’s UI team on high fidelity prototype design.
Inventive custom code generation feature to track appointment booking suce to incentivize users.
Project Overview
I worked with 3 internal stakeholders for APH to develop responsive and fully interactive wireframes that reflected their needs for brand anonymity, testing and treatment incentives, and community support awareness.
I collaborated with two UI designers from Belmont Icehouse to advise on visual and layout design, and development of a microsite that contained dozens of HIV resources for Austin residents in one place.
Kickoff
APH’s stakeholders had shared conducted their own user research, and presented their findings to us to kickoff our project. Their research of currently diagnosed and at-risk communities revealed that
The stigma of a positive diagnosis was the main reason at-risk individuals didn’t seek testing or treatment.
People are afraid of reaching out to a public health & government agencies for diagnosis and HIV support for fear of being tracked, targeted, or discriminated against.
Incentivizing testing initiatives made a significant impact on people’s willingness to get tested.
User Profiles
Our stakeholder kickoff meeting revealed 4 consistent user types who would be most likely to seek out and utilize the new platform
Users with a positive diagnosis who were actively in treatment.
Newly positive users who may be feeling scared, overwhelmed, and unsure about what their next steps should be.
Users who know they are at risk and are looking to get tested.
Family members and friends of the aforementioned.
“How can stakeholders support people who might be afraid to ask for help?”
The Process:
Mapping journeys for users with trust-building at the front-and-center.
APH’s researched revealed that when users decide to confront their fears and seek out testing or resources, roughly half of them do so on shared computers, like a library or family/friend’s computer.
I collaborated with another agency UXD on present and future state journey maps to outline how we imagined the path might unfold four our users.
Key areas for opportunity that surfaced in our future state journey map included
Marketing & content: by moving away from clinical “public health agency” language, we could reassure users and treat them with the dignity they deserve.
Education: people who don’t currently know their status or aren’t actively in treatment may be overwhelmed with the steps they need to prioritize.
Community support: while the stigma around a diagnosis is still very real, we’ve come a long way, both in terms of treatment and acceptance. Per the **National Library of Medicine,** strong social support is directly correlated with maintenance of lower viral loads and risk of transmission.
User flows: Closing the loop between distinct users, similar needs, and an abundance of resources
I developed a user flow that reflected stakeholder’s initial ask for this platform to be developed as a single page brochure site, meaning our ideal path was pretty straightforward.
Users needed to be able to quickly identify the right path for their specific circumstance without the blunt-force copy of a government agency website, and while individual stories would be through-lines as storytelling devices, each content subset that wasn’t directly linked to directory information would be framed as a real end-user’s personal experience.
In addition to the flow, considerations for the microsite experience elevated the importance of:
Quick jumps
Users on different paths needed information quickly, including a potential need for emergency information.
Informative and minimalist content
Users had varying levels of knowledge around what happens after getting a positive diagnosis. While they needed to be able to navigate with ease and relative speed, depending on where they were browsing from, they also needed enough information to guide them confidently through the site.
Visual Appeal
Stakeholders wanted the site to be visually engaging and interactive to make users feel more interested, at ease, and less anxious about their purpose for engaging with the platform.
Wireframes: Designing mobile-first layouts for user privacy
First iteration
My first round of wireframes was a static, mobile-first brochure site that had all APH’s required content mapped to a single page. To incorporate the interactive animations users were looking for, the concept included a right-hand column nav schema that was mapped to each content section. Users could tap on a number to scroll to content, or take a leisurely scroll down the page, triggering delightful interactions as they navigated.
What worked
High priority for mobile lookup content, so users weren’t forced to scroll for the most actionable content.
Bubbly, “stacked” layout that evoked tangible layers.
Easy navigation which mapped content sections to the vertical column of numerical tabs, allowing users to jump across content on the same page with ease.
What got cut
Single page layout - when tested internally, stakeholders realized they wanted to add more depth of functionality than a brochure site, and approved development of individual pages for resources, support, and testing/clinic lookup.
Right-hand nav - implementing additional pages for content lead us to the conclusion that we could also collapse the scroll depth of the landing page to make high-level content less dense, and more leading. Thus negating the need for an expansive nav schema.
Second iteration
To fulfill stakeholders Big Ask for engaging interactions, seamless parallax scrolling, and captivating motion design while still balancing the gravity of our user’s purpose for visiting, I broke down our flows into content blocks, beginning with our mobile layout.
The decision to expand to a multi-page platform ended up being the answer to balancing content gravity and engagement. By containing complex interactions to the homepage as a means to highlight content, we kept secondary pages largely static which reduced the risk of distracting users from priority content.
Updates included:
Progressive disclosure made fun: the first round of wireframes reserved plenty of space for visual cues, while using scroll interactions to populate high priority content to keep users engaged.
Early survey feature configuration.
Hamburger menu to replace the sidebar numerical nav from V1.
Signifiers: making sure visual cues like leading icons were baked in was how I planned to guide users through an experience that might be a little more active than they expected.
Early demos for parallax scroll interactions
Original copy - APH stakeholders didn’t have a content team on this project, so I flexed those “I’ve always wanted to be a writer” muscles and roughed out first draft content copy to make sure I could hand off scalable frames with typography guidelines fully accounted for
Utilizing surveys as a measure of success
The biggest update to the second round of updates was the inclusion of a custom coupon code as a tool to anonymously track the platform’s success. Stakeholders and APH engineering partners ideated a flow that included an optional survey that, upon completion, would generate a custom coupon code that could be redeemed for a gift card at one of APH’s clinics.
Different visit types would qualify for different tiers of rewards, and APH intake staff would log the coupon code & visit type in a database that didn’t include any patient information so APH could figure out
Campaign & platform success
Predominant user & appointment types
Most frequented clinic
Users on the platform would not be asked to enter any personally identifying information, and were assured that custom coupon code information was not retained by the platform.
Third & final Iteration
Once I had the basic interactions down and layout approval, I started assembling all the pieces and prepping for handoff to our visual design partnering agency for this project, Belmont Icehouse.
Final round of approvals included:
Video content - stakeholders had started producing video content to accompany the campaign to be featured as testimonial and support guides.
High-fi parallax & scrolling interactions.
Finalized layout and content that expanded on support partnerships, and reduced any mention of APH to just the footer.
Early demos for Belmont to communicate visual design and brand styling direction.
Handoff
Wireframes and technical design documentation were handed off to the UI development team at Belmont Icehouse for visual design implementation.
With a stakeholder launch date set for Q1 2024, this space will be updated with metrics & impact as the data becomes available.