Update Status

Based in Jakarta, Update Status is a free and confidential resource for sexual health services, with a particular focus on HIV. Using a risk assessment and clinic appointment booking tool, Update Status seeks to educate and empower their users to take charge of their sexual health.

SCOPE

Update Status
UX Consultant
8 Weeks
Figma, Mural, Google Hangouts
User task flow, heuristic audit, severity scale, spec sheet, wireframing

PROBLEM

Update Status launched in October 2020 with the goal of having 7,500 clinic bookings by their one year anniversary. As of July 2021 they have only met 52% of their goal. Update Status suspects that usability issues are creating serious barriers to their booking goals.

GOALS

Increase conversion rates for the Individual Risk Assessment (IRA) and clinic booking
Broaden Update Status from a risk assessment and booking site into a holistic sexual health resource
Identify usability problems
Develop new wireframes and templates for future growth and development

RESEARCH

STAKEHOLDER INTERVIEWS

In order to produce an efficient and effective research plan, it was important to interview key stakeholders.

Redesign: Initially, Update Status was a pilot program but is now being fully realized and adapted for other countries. With this expansion, the Update Status team would like to ensure the site is following UX best practices, providing more information and resources to users, and increasing conversion rates.

KEY THEMES

Information Architecture: While the current site allows users to complete primary tasks such as clinic booking and the individual risk assessment (IRA), calls to action for secondary tasks like information about ARV medication and the outreach program are missing.
Conversion Rates: Immediate clinic booking is available on the home page, which directs users to a third-party site Reservasi. Users can also make appointments through Reservasi at the end of the IRA. The IRA is the preferred method for booking as it provides rich user data, however the conversion rate for IRA completion and booking is only 7%.

INFORMATION ARCHITECTURE & TASK FLOW

The IRA and clinic booking system creates multiple pathways for users, making the website complex. In order to visualize these processes and gain a better understanding of the user experience, I developed a flow chart that includes back-end processes and user task flows.

KEY THEMES

Risk Assessment: Despite being a primary task the IRA is only accessible through the home page’s hero section. Creating additional calls to action (CTA’s) for the IRA throughout the site could improve conversion rates.
FAQ: In addition to general visual design principles, in order for an FAQ page to be successful it needs to employ grouping techniques. In the case of Update Status the HIV and STI section should be grouped with another health related FAQ.

HEURISTIC EVALUATION

Insights from the stakeholder interview and the task flow revealed cursory issues with the website. In order to identify more specific issues that were missed during these activities, a design review was conducted. The goal of the design evaluation was to:

Assess whether the primary pages follow principles outlined in Jakob Nielsen’s 10 Usability Heuristics
Ensure the site is following industry standard material guidelines
Identify areas for missing content.

While not a priority at this time, the Update Status team has considered moving away from Reservasi and Typeform to develop their own system for clinic booking and IRA. Doing so would provide the team with more visual design and content control. Should they choose to move forward with this development, usability issues were identified within these platforms to guide future designs.

Due to time differences and lack of UX knowledge within the Update Status team, work was completed primarily in Miro to ensure the evaluation was a collaborative process. Once this process was complete, a more formalized document of the primary pages was developed for stakeholders.

RECOMMENDATIONS

The results of the design review produced 22 major usability issues, some of which are more urgent or require more resources to resolve than others.

In order to support the Update Status team in identifying which problems to fix first, each usability problem was examined further and given a severity rating. The severity rating used for this activity is sourced from Jakob Nielsen and takes three factors into consideration: frequency, impact, and persistence.

To assist the Update Status team further, the severity ratings were transferred onto a spec sheet in order of importance, with recommendations and examples of best practices to guide improvements.

WIREFRAMING

LO-FIDELITY

Upon presenting the evaluation findings, it was discovered that the team was planning on implementing these recommendations in a new site that was around 25% built in Squarespace, without prior wireframing. Knowing this was the process used to design the first iteration of the site, I recommended that the build in Squarespace be paused to develop wireframes that consider structure, content, and design.

Using Procreate, I began the wireframing process by identifying the architecture of the new site. After this, I integrated recommendations from the spec sheet into lo-fidelity wireframes.

MID-FIDELITY

Upon completing the lo-fidelity wireframes it was clear that the Update Status site needed additional pages to create a holistic user experience. Built in Figma, the mid-fidelity wireframes include:

Navigation bar with drop down menu contents
Home page with hero, about, outreach, FAQ, and footer sections
About page
IRA page with information about the assessment (i.e., purpose, duration), direct link to privacy policy page, and a link to the assessment.
Outreach page with a CTA (call to action) to IRA
Privacy policy page
FAQ pages which will have the same structure for HIV, STI’s, ARV’s, COVID, IRA and Booking, Cost and Resources.
Contact form

SPEC SHEET & HANDOFF

The final deliverable for Update Status was to hand the designs and recommendations off to to the team. In order to communicate structure, content, and visual design effectively, wireframes and recommendations from the heuristic evaluation were brought into Miro then labeled.