Website Redesign

As phase two of the rebrand, Maroon PR along with website design and development partner ORANGEHAT, led a website redevelopment project.

Balancing the site navigation for two very different site visitors was paramount to provide both visitor groups the content needed. The main visitor groups are those in need of help and support of their situation; the other group are the donors and volunteers to support the mission. Two very different groups with different needs and interactions.

A robust review of the content and overall site experience was needed to best identify the main areas, or features, that should be priority for a proper user experience, while encouraging the proper actions by the users. In addition to the content and user experience, the new site also needed to be better supported for all devices, continued expansion and identification of the new branding, and a more simplistic way for House of Ruth Maryland to update content throughout the year.

Content was prioritized, combined, or removed based on discussions between the ORANGEHAT, Maroon PR and House of Ruth Maryland teams. A more streamlined site map was developed, creating a more natural content flow and ways to deeper interact with the website, without a sense of getting lost inside the site. We also identified the page priority and developed three positions for navigating the website: main links/action items that was to be accessible at all times; secondary content to support the main action items, available with a small scroll movement; and the full content of the organization accessible via a series of dropdowns in a traditional navigation experience.

Time was spent crafting adjusting these navigation priorities on the major viewports of the website between desktop, tablet and mobile devices, leveraging their display sizes and how the users would plan to interact with the site based on those displays.

Coupled with the new branding, a consistent color identification was used for each of the main audiences, providing additional cues to recognize content. A grid-based layout for the homepage provided strong visual cues to assist visitor to the four main areas of content. A design system was created for each type of content, creating a cleaner visual look and layout to digest content and encouraging interactions and learning more about House of Ruth Maryland.

*Project overview provided by Orangehat