Mary's Place Screen.png

Mary's Place

UX content strategy, wireframing, performance/accessibility testing

Mary's Place Discovery/Content Audit

Mary's Place

Objective: Deliver a complete content strategy for Seattle's largest homeless support system

Core Skills: Content Strategy | UX Design | Web Accessibility & Performance Testing | Project Management

Duration: 3 months, January-March 2018, Work completed through the University of Washington, Master of Communication program

 

Working individually and on a collaborative team of four Master's candidates, I audited the messaging, user experience, mobile responsiveness, performance, and accessibility of the Mary’s Place website. Following review, I delivered recommendations along with original wireframes of key moments to design to increase ease of understanding and action for key target audiences.

Process

Discovery began with an initial call to understand the organizational history, business objectives, and longterm goals. Learning more about the Mary's Place target audience enabled me to organize the diverse set of stakeholders by need.

 

 

NEED (INFO + HOUSING)

  • Families
  • Single parents
  • Women
  • Children
  • Community members
     

GIVE  (TIME + MONEY)

  • Congregations
  • Younger, high-tech workers (Amazon, Microsoft, Facebook, Google, etc.)
  • Corporate sponsors
  • Foundations and grantors
  • Volunteers (individuals and community groups)
     

Initial Observations

CONNECT (ALLIANCES)

  • Social agencies/community partners
  • Housing providers
  • Press
     
 

PACE OF GROWTH
The mission and resourcing of the shelter has increased significantly. Improvements to the website have not matched this pace of growth.


LACK OF UX PRIORITIZATION
UX of the website is not designed with “F-shaped” eye tracking in mind. A meaningful statistic about mental health and homelessness was placed in the attentional desert of the homepage (bottom right above the fold, before the first scroll).

AUDIENCE EXPECTATIONS

Mary’s Place seeks to attract younger donors and volunteers from the tech sector. However, our Mary’s Place liaison described the forms on the website as contributing to a “second class (digital) experience”. Failure to address functionality may cause Mary’s Place to lose credibility in the eyes of this audience with high UX expectations.

SITE OPTIMIZATION

The website has not been optimized for search or viewing on small (mobile) screens.

BURIED CTAS

Calls to action with the potential to increase engagement with Mary’s Place are not featured on the homepage. Rather that are buried at the bottom of body pages. (Ex. Mary’s Place Event and Drive Toolkit →, Sign-Up to Volunteer)

MATCH CONTENT WITH VISION

No calls to action on the homepage speak to the organizational goal to increase messaging to development + property owners and subsequently expand the pool of unoccupied buildings that can be turned into temporary shelters.

Content Audit Findings

Content Audit Sample 1
Content Audit Sample 2

Goal: Develop & Market Housing Programs
Content advertising this capability is not given priority on the homepage.

Goal: Increase Shelter Capacity by Filling Empty Buildings
Content highlighting this need is buried in a drop-down menu in the primary navigation, fourth from the top.

Goal: Increase Corporate Volunteer Team Participation
No volunteer CTA is listed on the homepage or in the User Action Module repeated on nearly every page.
The CTA button on the Volunteer page is placed beneath a large image, which may limit visibility and conversion when viewed on mobile.
 

 

UX Finding: Competition

CTAs compete for space/attention in the user action module. Options include donation, information gathering, and newsletter subscription.

User Action Module

Optimize for Responsive Delivery

Mobile Homepage

An ever-present CTA button bar at the top of the page features the most common user actions tied to business needs. A featured updates section gives the communications team more control over temporal homepage messaging allowing them to drive strategic, seasonal initiatives with an optional announcement bar for time-sensitive news. Services are presented visually, at-a-glance.

Mary's Place Homepage Mobile

Mobile Body Page

Mobile Body Page

Desktop Homepage

Desktop Homepage

Audit for Accessibility

Mary's Place Visual Contrast

RECOMMENDATION: Consistently label elements in the page’s markup (code).

  • Ex. When using a screen reader to review the links to social channels on the top of the homepage, users initially hear the first letter of the social channel. After a few seconds, Facebook is read aloud. The user’s experience would improve if Facebook was read initially rather than “f”.

RECOMMENDATION: Consistently label elements in the page’s markup (code).

  • Ex. When tabbing through the website, the screen reader skips the excerpts in the recents blog posts section on the homepage. These sections are read when the user mouses over them, but users with limited mobility and visual impairment rely on the keyboard to tab through content. The inability to hear this content read prevents them from fully accessing information in the section/on the site.

RECOMMENDATION: Ensure each picture integral to the page’s content is labeled with an alt tag.

  • Ex. The images included in the carousel on the homepage lack this alt text. As a result, the screen reader recognizes it only as a link. Users with visual impairment would miss out on the impact this content provides for visually-able users.