BeatHIV Interactive Tool
An interactive tool guiding users to their next steps
Expertise
Iterative Development, UX Design
Client
Tarrant County HIV / Belmont Icehouse
Timeline
6 months
Challenge
Overview
Beat HIV is Tarrant County’s initiative to help members of their community diagnosed with HIV, and suppress the viral spread.
Beat HIV recognized how chaotic and scary it was for people who had just received a positive diagnosis for HIV. For some, it was essential to get quick, discreet, and informative directions as soon as possible.
What our clients asked for
They wanted to create a tool that users could interact with to find out what they should do next. The tool would be accessible via QR code, so users could quickly scan with their phone in a healthcare provider’s office. It would then connect users to more information on the main website.We worked with our partners at Belmont Icehouse to create the UX framework, initial design layouts, and development.
How might we create tool that jumpstarts people newly diagnosed with HIV on their steps to living healthy and happy?
Scope
We created mid-fidelity wireframes and developed the final iteration with high-fidelity mockups from Belmont Interactive.
Constraints
Our timeline was not consecutive as we worked with Belmont to coordinate the project. The tool needed to be able to work with the existing website and draw on its information.
Implementation
We implemented this tool as a microsite within the existing BeatHIV website. The tool’s landing page used custom fields to dynamically display information.
Our Goal
We needed an interactive tool that encourages users to engage, learn about their condition, and feel hopeful that they will not be alone.
The goal of the project was to create an engaging tool that would encourage exploration and ease the fears of the initial positive diagnosis.
Our goals included:
- Provide an engaging way to display information.
- Create a way to display lots of information without becoming overwhelming.
- Make the tool effective and pleasing on all devices.
Our Solution
We created a single, dynamic page that houses HIV resources for Tarrant County residents. The page featured sections for quick access to information and resource contact information.
Results
The final microsite connected dozens of HIV resources for Tarrant County residents in one place.
It was also easy to maintain and update, and the client is able to make changes easily without third-party help.
The BeatHIV interactive tool launches in 2023.
Our Process
Understand
We first spoke with stakeholders to understand the nature of the tool and what they wanted to see. We used a vision board, collaborating to find the key points to focus on.
User Profiles
From the stakeholder meeting, we determined several important points about the target user that would inform our design decisions.
- Users would have just tested positive for HIV, or would be further along in their journey towards a lower viral load.
- Newly positive users would feel scared and may be overwhelmed with the steps they need to prioritize.
- Users may not be in a situation or location that is comfortable or safe to look into help around HIV.
Explore
Inspiration
We started looking at the inspiration BeatHIV gave us to get an idea of their vision.
We found that the client liked a parallax scroll would make the page engaging by simulating dynamic movement. With this in mind, we went forward with a layout and animations that would create a sense of movement and ease to scroll about the page.
User flows
Our three main users had different needs and tasks to complete on the microsite.
- The user who doesn’t know where to start.
- The user who has an idea what their next step is, but needs resources.
- The user who is in crisis and needs immediate help.
User flow diagram
Quick jumps
Users on different paths needed information quickly, including emergency information.
Insights and Opportunities
1The initial start screen would need to branch and allow users to navigate in the tool depending on their circumstances.
Informative and minimalist
Users had varying levels of knowledge around a positive diagnosis and what to do. While they needed to be able to use the tool quickly, they also needed enough information to guide them.
Insights and Opportunities
2As a jumping off point, the tool needed to be quick and succinct, but cards needed to be able to provide enough content to guide users.
Visually Appealing
Stakeholders wanted the tool to be visually engaging and interactive to make users feel more interested and less anxious about their situation.
Insights and Opportunities
3The designs needed to be modern and visually appealing to help ease users’ initial fears and anxieties.
We spent time considering how users would interact with the site. Because users were most likely to land on the site from a mobile device, we focused on designing the mobile views, first. From there, the site progressively enhanced.
The mid-fidelity wireframes set the layout and tonal contrast for the landing page. Usability was key, so we developed a prototype to demonstrate how users would interact with the information.
Create
Belmont handled the visual design on the site. They used our wireframes to apply branding and the look and feel before returning them with annotations for development. In order to create an interactive experience that would function well responsively, we gave Belmont recommendations that would engage users across different devices. This included utilizing header hierarchy that would translate from desktop to mobile, giving solutions to how components such as menu items and cards would interact, and how body text could populate on a card.
Since the information on tool would need to link to the main site, as well as populate addresses from the locator tool on the main site, cards would need to connect and populate information from outside the tool itself.