HERA Website Build | Kate Shelley Design

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.

VIEW WEBSITE

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

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

Created branding kit to align colors and typography.

EXAMPLES OF UPDATES:

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

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

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.