FreedHearts OrganizationRedesigning how parents communicate with their LGTBQ kids.


About FreedHearts
The mission of FreedHearts organization is to help faith parents rekindle the relationship with their LGBTQ children. The organization produces content in various forms such as books, blog posts, videos and online support groups.


My Role: UX Designer & UX Researcher
Project Type: Website Redesign

Challenges

The previous website did not fully convey the mission of the organization and the resources they provide. The website was unorganized and not user-focused. Very few FreedHearts followers used the website due to issues of getting access to content. While FreedHarts is on of the most well-known organizations in the faith community, the website struggled to keep up with similar organizations. The website contained many embedded third-party videos and features, which often linked users away from the website and slowed down speed times due to heavy amounts of HTTP requests. The client wished to stay with the website host and a few third-party features.

User Research
To keep the website user-centered, I developed a series of interview questions and surveys for both faith parents and their LGBTQ kids. Before designing a new website, I wanted answers to five specific questions:
1. How often do you use the website
2. What information are you seeking?
3. Are you able to find it on the website?
4. What could we do to improve your website experience?
5. How/where do you get this information now?

I had face-to-face interviews with 3 people as they navigated the site as well as collected 248 survey responses for current FreedHearts followers.

My findings show that while many people have visited the website, they do not use it, nor do they know what resources the website offers. Main issues include poor navigation, content structure, and inability to search for specific content. New insight showed that many users do not use the website because the majority of FreedHearts users find their information.

How Often Do You Use Each FreedHearts Resource?

  • Very Often
  • Not Very Often
  • Never Used

Have You Ever Visited FreedHearts.org?

  • Yes
  • No
  • I'm not sure

How Often Do you Visit FreeHearts.org

  • Not very often (couple times a month)
  • I never use FreedHearts.org
  • I use it often (once a week)
  • Very Often (daily)

Heuristic Analysis
I gathered analysis from the websites of two “competitive” organizations that many of our surveyed users mentioned they use often. The heuristic analysis allowed me to see what functions each organization used to enhance the usability of their website. Specifically, I wanted to know what features they used to improve the donation and content search process.

Personas and Empathy Mapping
To provide deeper insight into the users that will be using the website, I worked with the founders to build a detailed persona summary. With each persona, we developed an empathy map to understand the pain points that a new site design would be able to solve.

Persona 2: Meg
Meg recently left the church after years of struggling to explore their identity. After years of suppression their feelings, they have come to identify as Queer, Bi, or Asexual “Ace”. While mostly identifying as female, often times they wish to present as male. Meg prefers they/them pronouns and tends to dress in “soft butch” apparel. They currently live with friends they met outside of their old religious community and are regularly trying to find LGBTQ events to attend and make more friendships. The relationship between Meg and their parents is complicated. Their parents do try to love Meg; however, they believe that Meg is “confused” “needs help” or has just “lost their way” from their religion.

Early Sketches
I spent an hour sketching some ideas that I could produce keeping the website user focused. I knew that the design had to be fairly simple in layout and design.

Due to the WIX platform as well as other external features the clients use (PayPal, Gumroad, Woocommcerce) I was limited on the redesign when it came to product display, blog page, and video features.

Given the audience age (45+). I thought the design should be fairly simple with little graphics and animation with the flow going from top to bottom, left to right.

Information Architecture
With post-it notes, I worked with the co-founders to lay out all the article posts, books, and video courses into their proper categories. Some articles and video courses could be used in multiple categories, which is why we put some post-it notes in between each white paper. There were some articles that were hard for us to determine which category they fit into, so we created a question category.

We color coded the content based on what type of form the content was produced. Pink= Blog Posts, Dark Blue= Books, Light Blue= Video Courses.

The user stories spreadsheet outlines a list of scenarios that may occur on the website. I sketched each scenario to ensure users did not run into system errors.

Sitemap
The Sitemap was created in Draw.io to determine how the site navigation should be laid out. The dotted lines represent the order in which information will be presented on that page. Small black arrows represent links to other pages. Diamond shaped pages represent external pages.

Based on survey results, we determined that order in which content should be displayed on the Parents and LGTBQ page be organized in order of most used resources to least used resources.

Wireframes
After an hour sketching section, I drew low-fi wireframes using graph paper and pencil. In order to walk the client through my designs, I uploaded the wireframes into Invision to create a workable prototype.

The section breaks mimic the torn pages found on each of their book covers in order to show brand consistency.

During the conference call, the client did not like the original homepage with the book below the fold They wanted to target the website mostly towards parents with a brief mission statement and accolades at the beginning. I designed this new wireframe with the mission statement and scrolling media logo gallery just below the fold.

When viewing the website on mobile, the hamburger menu does not show users who are LGBTQ the option to go to the LGBTQ page. This is our workaround to give users easier access to make decisions, whether on a desktop or on mobile.

Shopping cart checkout process.

Style Guide
For ideas and inspiration, I spent a few hours creating a mood board on Pinterest of designs that I thought fit well with the FreedHearts brand. As a jumping off point when searching for designs, I used the cover art for the current FreedHearts books as inspiration as well as the current FreedHearts logo. I wanted to create some brand consistency with the torn page effect found on each book cover.

Once I developed a good idea of color schemes and design concepts, I developed the final style guide in Photoshop.

Final Design

Nestlé

Product Research

VittleWise

Product Research

Food Fanatics

UI Design

Checkin App

UX Design

FreedHearts

UX Design