Website build

hera ovarian cancer foundation

HERA Ovarian Cancer Foundation was in need of a new, user-friendly, website in order to continue their mission of Health, Empowerment, Research, and Awareness/Education for ovarian cancer. I helped to define HERA's online content strategy and design a stylish website showcasing their story and mission and increase visitor discoverability.

ROLE 

  • Information Architecture

  • Content Strategy

  • UX Research

  • Prototyping

  • UX Design

  • UI Design 

  • Copy Writing

  • Webmaster

PROJECT DURATION

  • November 2021 - March 2022

 

TOOLS USED

  • AdobeXD

  • Pen & Paper

  • Wordpress

  • Wix

RESEARCH

  • Competitive Analysis

GOAL 

Design a website that is in-style, easy, and less confusing to use for it's visitors. 

OBJECTIVES 

  • Update style and simplify information presented by removing old and irrelevant information throughout site.

  • Design that is easy to use and not confusing.

  • Integrate real photos from their foundation.

  • Re-organize navigation menu and build content strategy. 

  • Build SEO

  • Create branding kit

USABILITY FINDINGS & RESEARCH

USABILITY FINDINGS

  • Feels very outdated. 

  • No new information most places, or pictures.

  • Both old and new logo used on site at same time, creating confusion.

  • Conflicting information throughout site on same topics.

  • Copy used is disorienting / doesn't make sense in relevance to the topics.

  • Videos are ill-placed throughout website.

  • Favicon is basic search favicon, not logo.

  • Navigation menu:

    • Header does not match footer navigation menu

    • Overlapping purposes, as well as overlapping items (ex: "Events" heading and also as a submenu under "What We Do". 

  • Frustration that donating re-directs to another page.

  • Clickable links direct to pages that don't exist or are hidden from normal navigation (aren't found anywhere except when clicking link). 

  • Climb4Life is the only event discussed under "Events", leading to uncertainty.

COMPETITIVE ANALYSIS

  • 3/4 of competitors had 5 or less 5 categories in navigation menu. 

  • Outdated in style according to 50% of the non-profit sites researched.

  • Organization and content structure is incredibly clunky compared to 90% of competitors.

  • 70% competitors had an update style.

  • 50% presented simplified information.

  • Logos on all competitors sites matched, unlike HERA's.

  • 90% of competitors had additional ways to donate listed on donation page.

  • 90% non-profits had up-to-date and relevant information (within 1 year, to date). 

  • 50% nonprofits donation pages redirected to a different website.

INFORMATION ARCHITECTURE

HERAnewInfoArch.png

After removing irrelevant information, I narrowed down remaining information and put them into categories aligned with HERA's mission and pillars to build out their navigation menu.

OUT WITH THE OLD & IN WITH THE NEW

HERA Branding Kit.png

Created branding kit to align colors and typography.

EXAMPLES OF UPDATES:

oldHERA WhatWeDo screen.png
HERANavi Screenshot.png

Concise copy writing/editing. Clear message to end user. Refreshed colors to make all text pop. 

oldHERA Footer screen.png
newHERA footer.png

Reformatted information architecture to make less confusing for end user.  Added subscription button for interactivity and ease of gathering visitor information.

oldHERA Contact screen.png
newHERA contact.png

Removed unnecessary form on right, made user feel anxious or bored and didn't use it. Added social media buttons for additional user engagement. 

ACCESSIBILITY

  • All colors easily readable for color blind and macular degeneration

  • All colors WCAG and AAA checked & approved

  • All fonts kept above size 14

KEY PAGES

RESULTS

  • Allows users to easily find information needed.

  • Drives visitors to get involved with HERA through the website via contact forms and applications created and implemented.

  • Created simple flow of navigation.

  • Increased user discoverability of information in search of.

  • User capability of donating directly through website, instead of being re-directed.

  • Old information removed to show only relevant and current information, increased user engagement.  

  • Updated style increased user attention and engagement. 

If you're interested in this project or would like to hear more, get a hold of me!
neon arrow (1)_edited.png
neon arrow (1)_edited.png
neon arrow (1)_edited.png