Diego Cagara

REBOOT & RECOVER


Applying UX research, design and

a new style guide to improve web user engagement.

Reboot & Recover is a non-profit that offers resources for people with screen addiction. Its updated landing page (above) has information hierarchy, a bold headline, clear CTAs and a carousel design that prioritizes certain resources to the viewer.

The original landing page did not have clear information hierarchy, had lengthy copy and struggled to immediately inform the viewer of what resources it hopes to provide.

— PROJECT NAME

Reboot & Recover


— WHAT MY TEAM DID

Content strategy

UX writing and research

Content style guide

User persona and journeys

Wireframes


— TOOLS

Figma, Google Docs, Google Slides, Google Forms, Whimsical


— DATE

Ongoing (since spring 2020)

Reboot & Recover is a non-profit organization providing resources and a professional help hotline for people struggling with screen addiction. It also depends 100% on public donations to stay running.


PROBLEM: The original website had too much jargon, a confusing design layout and minimal user engagement/donations.


SOLUTION: To improve the website's design and user engagement, my team of 10+ UX Writers/Designers and I conducted UX research to develop a new content strategy, rewrite concise copy with a new brand/voice style guide, and pitch wireframes.

PREPARING FOR SUBJECT-MATTER EXPERT INTERVIEWS

Over two weeks, a teammate and I interviewed 3 licensed health professionals to learn more about screen addiction.


We created interview guides with questions like how they each define the term “screen addiction”, what factors/symptoms are common in screen addiction, and what types of people are more likely to seek professional help for it.

One thing I learned from my expert interviews is that the term “screen addiction” is not universally understood as my team initially assumed.

REFRAMING OUR ASSUMPTIONS

My teammate and I shared our findings in a presentation, including how not many Americans fully comprehend what screen addiction truly is and how severe it can be.


Our interviewees also said a loved one (e.g.: parent, sibling) of an individual struggling with screen addiction is more likely to reach out for professional help on behalf of the individual, without the individual knowing.

Our presentation became a valuable source of information for my team during our UX Writing process later.

FROM DATA COMES USER PERSONA

The client shared data analytics that showed the website received just 426 views and 6 customer calls in April 2020, and 125 views and 3 calls in May. We also found that website clicks and customer calls mainly come from concerned mothers (aged 30 to 50) who are seeking professional help on their child’s behalf.


These findings helped one of my teammates develop a new user persona (below):

Meet Jennifer: A concerned 41-year-old mother with a child struggling with screen addiction.

NAVIGATING WITH USER JOURNEYS

My team envisioned the website's new landing page would quickly show Reboot & Recover's top resources upon first glance, without information overload.


With this information, my teammate developed the following user journeys, where she broke down how and why a person would likely come across Reboot & Recover, their motivations when exploring the website, their possible pain points and what factors can make Reboot & Recover a trustworthy resource for information and help.


DEVELOPING THE CONTENT STYLE GUIDE

Our research found that screen addiction carries a negative stigma and is a very sensitive topic for people who can feel shame and judged for having it.


My team realized it was important that when rewriting the website's copy, it should not sound judgmental or invasive. Hence, my teammate developed and presented the following content style guide to us, which set the web copy's voice/tone guidelines:

ENGAGING AND EMPATHETIC UX COPY

The website includes free Yes/No tests that ask people how screen addiction has affected their lives. However, these tests don't look visually attractive and are not fillable forms that the organization can collect and quantify.


My team and I used Google Forms to make the tests interactive and people's responses can be collected for review and data. Following our voice/tone guidelines, we made the copy concise and empathetic:

Test – Before

Test – After


WEB LAYOUT REDESIGN WIREFRAMES

Using card sorting, my team and I determined that the new home page should immediately promote: what Reboot & Recover is/does, what screen addiction is, encouraging public donations, the Yes/No tests, and how the ongoing COVID-19 pandemic can affect screen addiction. Applying a carousel design allowed my team to organize and show multiple headlines, resources and CTAs to a reader.


The following are wireframes for the new landing page (with helpful CTAs):

WEB LAYOUT REDESIGN WIREFRAMES

As the user scrolls down on the landing page, they would see more helpful step-by-step links, user testimonials, the confidential hotline, as well as links to donating and joining a weekly newsletter for mental health tips:

NEXT STEPS

The website has recently been updated after the client reviewed my team’s UX research, work and pitched Figma prototypes.


The client liked that our copy was more empathetic and concise to users, enjoyed how our web redesign wireframes prioritized Reboot & Recover’s top resources, and appreciated how the Yes/No screen addiction tests were more engaging and interactive.


Moving forward, I would ideally like to recruit users to conduct usability testing on the updated website. I’d like to also measure online traffic engagement, track how many people take the Yes/No screen addiction tests, and track how much public donations the client receives.