high-fidelity Ui prototypes

Rosemont Web Refresh Project

A redesigned user experience and content strategy for Rosemont College.


  • Category: UX and UI Design, Content Strategy, Information Architecture, Frontend Web Development, SEO
  • Client: Rosemont College
  • Role: Director of UX and Content Strategy, Front-End Developer
  • Skills Used: UX wireframing, XML/XSL, Figma, usability testing, UI design, UX writing, HTML/CSS, JavaScript, SEMRush, Bootstrap, user flows.
  • Goals Achieved: Functional and user-friendly website upgraded sitemap, navigation, user flows, upgraded UI design and layout, upgraded site responsiveness.

Context and Challenge

Rosemont College is a small liberal arts college located on the Main Line of Philadelphia. Offering bachelor and master's degrees, the school focuses on delivering a high-quality private education to any student with promise, regardless of their financial resources.

Prior to my start, the website and general digital presence had no governance, weak SEO, an inconsistent voice, and chaotic information architecture. As a small organization, coming into this role and project meant that much of the project lay on my shoulders, with limited assistance.

I was tasked with managing the project, designing and implementing new web assets and layouts, and conducting a content audit.

All components of the project were carried out to add to the launch of a newly-optimized and userfriendly website. PS&L contributed to the project as a third-party vendor.


Site Health, UX, and SEO Improvements

The following report displays the dramatic and positive change in site health. These improvements included fixing broken links, reducing duplicate content, implementing standards of WCAG web accessibility, and creating/implementing brand standards. These stats are generated from SEMRush.com.


Information Architecture and User Flows

Before delving into active revisions and optimizations, we laid out the ideal information architecture to make navigation more aligned with our users' needs. The ensuing collaboration resulted in the following sitemap and user flows.

A content audit was performed, highlighting all the current errors and areas to improve upon. A selection of the documents produced during this phase are included below. P,S&L assisted with this phase.


Homepage Design and Implementation

this phase of the project, I created wireframes, prototypes, worked with third-party vendors, and collaborated on frontend development to make sure our technical launch and aesthetic needs were met and exceeded.

After collecting the technical specifications from stakeholders in the project, I drew wireframes of the new layout, then drafted prototypes with color and detail.

Then, in collaboration with Omni CMS, we brought the new designs to life with HTML/CSS, JavaScript, and XML/XSL. A primary focus of the redesign was to make sure that it was responsive and compliant with WCAG standards of accessibility. The revised homepage is responsive and accessible on mobile, tablet, laptop, and desktop screen sizes.

homepage sizes

Brand Style Guide

View Brandbook

Developing a consistent brand starts with creating a brand style guide. These branding rule books help graphic designers, marketers, web developers, and community managers all stay on the same page, and present a unified vision.

In collaboration with our Graphic Designer, we drafted this working document to address the use of the logo, colors, writing conventions, and typography for the organization. This ultimately led to greater understanding and cohesion across digital and print properties.

homepage sizes

UI Design and Components

To make the website branding and user experience more cohesive, I designed web assets/components using html/css, Bootstrap, JavaScript, and XSL/XML to match our new color webpage layouts and color pallete.

I used these new UI components to showcase testimonials, programs, CTAs, and other featured pieces of information. Calling out specific pieces of information and crating clear and user-friendly navigation markers eliminated the tendency to clutter up and improvise content design decisions.

style guide

Additional Samples

View Sample of Old Webpages