Michelle Sue Agee
howdy@msueagee.com
Hi, I'm Michelle Sue Agee

I'm a user experience and visual designer with 3+ years of end-to-end experience creating digital products and facilitating  community building events.

Working with an integrated team is where I thrive. I enjoy the strategic aspect of design where I work to elevate the overall customer or community experience.

Rebrand and redesign of JFS Houston's website

JFS Houston ( JFS ) is an established non-profit that relied on 8+ websites to educate users about their programming and services. Their primary website was outdated, difficult to navigate, and did not communicate the quality of social/clinical services that they provided.

Project goal: create a web platform that scales with the organization, positions JFS as a welcoming, quality service provider and improves the overall user experience for all audiences.
Challenge: merge 5 of the websites into a single platform. As the lead designer, I designed 12 responsive web templates that address the needs of 3 organizations (JFS Houston,Houston Jewish Family Foundation, and Reelabilities Houston), 9 audience types, and spanned 2 websites.
Problems and Constraints
  • This project kicked off one week after the city of Houston announced a Stay Home, Work Safe order due to COVID-19. Both teams worked remotely throughout the entire project
  • The project scope was limited. I was to design 12 responsive web templates that address the needs 3 organizations, 2 websites, and 9 audience-types
  • We followed WCAG 2.0 principles and guidelines in design and development, to ensure JFS's site is inclusive to all of its different clients
Project Timeline
2020, 9 months
Client
Jewish Family Services of Houston
Team
Poetic Digital
My Role: Lead Designer
Creative Director: Jarred
Project Manager: Sophie
Solutions Architect: John
Strategist: Adrian Samaniego
Development Collaborators: Ana, Monsano Agency
In-House Developer: Yasha
Role
Stakeholder interviews
Define goals & recommendations
UX Design
Strategic visual Design
Visual QA
Editor Training
Tools
Sketch / Figma
Trello
Slack

Understand

Our project goal was to create a web platform that scales with the organization, positions JFS as a welcoming, quality service provider and improves the overall user experience for all audiences. Our challenge was to combine merge 5 of the websites into a single platform. As the lead designer, I designed 12 responsive web templates that address the needs of 3 organizations (JFS Houston,Houston Jewish Family Foundation, and Reelabilities Houston), 9 audience types, and spanned 2 websites.

Before
Process & Responsibilities

We worked in bi-weekly sprints to move through each phase of the project. The project kicked off in March 2020, one week after the city of Houston announced a Stay Home, Work Safe order due to COVID-19. Both teams worked remotely throughout the entire project.

The two websites launched one week before the 2020 winter holiday, in time for the 2021 ReelAbilities festival promotion schedule.

Research
March - May
Stakeholder Interviews
Comparison analysis
Define goals
Site Audit
Contribute to persona development
Strategic Planning
May - June
Capture recommendations
Sitemap and User Flow
Content archetiture docuemntation
Brand Design
July
Moodboard creation
Present logo refresh
Web Design
July - September
Wireframing
Visual Design & iterations
CMS Planning
Prototyping
Development
September - November
Setup CMS Sturture
Visual QA
Help implement custom features
Train Editors for content migration
QA & Release
November - December
Iteration on CMS functionality
Manage Usernsap Tickets
Ensure passing Lighthouse scores
Outcomes

The JFS website hosts information about multiple programs and services, event information, and many many resources; the site has exceeded 350 pages since launch. Comparing the web analytics 3 months before and after launch, the website now averages 170 visitors a day. Before launch, the original website averaged no more than 150 visitors a month.

  • 622% increase in visitors since launch
  • 756.8% increase in "Donate" views
  • The website is a finalist in the Non-Profit Category of the 2021 AMA Houston Awards

Research

At the onset of the project, it was clear that JFS would rely on us to help prioritize the goals of their many stakeholders. Throughout the project, we refined how we presented our work and recommendations.

We conducted 15 individual and group interviews with executives, staff, clients, and board members to understand the organization holistically. Learning of the agency's history of adjusting its services offerings and serving as a local emergency responder, the new website had to be flexible enough to expand and evolve with JFS.

We conducted 15 individual and group interviews with executives, staff, clients, and board members to understand the organization holistically. Learning of the agency's history of adjusting its services offerings and serving as a local emergency responder, the new website had to be flexible enough to expand and evolve with JFS.

We conducted almost all of our interviews in the first three weeks of the project. We learned how JFS facilitates its services, its plans, and we captured individual needs for the future website.

Comparison Analysis
I conducted a comparison analysis of 60+ non-profits, healthcare providers, and other JFS organizations to document common user patterns and design solutions to avoid them.

We shared over 40 design elements with our stakeholders including many board members we interviewed. We used this phrase to introduce some initial design recommendations such as a mega-navigation and a content-focused hero.

Answer key questions above "the fold" to quickly inform the audience
Employ a mega-navigation style to provide more context to the interior page
Do not abuse colors. Utilize strong visual hierarchy and color contrast to streamline information
In moments of crisis, a large-format announcement band to communicate important information concisely
I designed a landing page template that features a sub-navigation so departments and large services can feature all relevant programming and important resources.
Personas

Informed by our stakeholder interviews and previous meetings, the strategist organized the goals, responsibilities, pain points, and needs of all prospective personas. We documented 9 primary audiences.

The persona phase helped the strategist and I employ the same language and understanding of the target audiences that the website and new brand would be serving. Because JFS applies to grants as a profit, our client utilized the persona sprint to document the granular needs, roles, responsibilities, needs of 35 unique personas to inform future applications.

  • Prospective Clients
  • Current Clients ( 8-types )
  • Prospective and current donors
  • Volunteers
  • Partners and Sponsors
  • Community and Business Leaders
  • Event Attendees
  • Media Member
Sitemap & Content Architecture

Using our initial site audit and insights gathered, I organized a high-level structure of the two websites' pages. This helped me visualize page hierarchy and group page type so I could define each template's purpose. We collaborated closely with our client over 3 weeks to iterate and finalize our plan. We learned the site design would need to be modular.

With a visual sitemap, I was able to define the content structure of the 12 templates. The challenge was to restructure the services pages because JFS had recently reorganized their service departments before this project kickoff and was still determining how they might present these services to the public.

Our stakeholders did not want to approve our content architecture documentation without seeing wireframes as they struggling to visualize the templates from a perspective. To gain approval on the sitemap and the strategy document, we provided initial wireframes of the homepage.

The project limited the website to 12 unique page designs across 5 departments, 3 organizations, and 2 websites. Below are the 12 template types:

  • Homepage
  • Landing Page
  • Program Details ( "catch-all page" )
  • Dynamic Content Landing Page
  • Event Details
  • News Post ( "catch-all page 2" )
  • People page
  • Impact / Financials
  • Sponsorship
  • Signup form pages
  • Donation
  • Search / Search Results

Design

We completed four sprints in the design phase, I created, iterated, and presented on 4 templates at a time over a 2 and half week sprint.

Wireframing

I designed 4 high-impact templates during the wireframe sprint. The client had begun writing content for the new site, during this sprint, we iterated on high-level design solutions as new use-cases emerged.

The wireframe sprint ensured that the client and I could focus on high-level design solutions without the distraction of colors and images. When I had extra downtime, I captured ideas and blocked out the layouts of the other templates. The wireframe phase was successful from my perspective because the high-fi sprint incorporated the majority of the solutions established during this time. However, our client was overwhelmed with the pace of the project and struggled to deliver timely feedback so both teams could hit the launch date.

We iterated on 4 high-impact pages during the wireframing phase so we could address the many use-cases required from the modular design.
I always start with pencil and paper before moving into drawing rectangles on the computer.
Visual Design

With the new logo in place, I defined the visual style of the website and planned out the CMS structure. During the 4 hi-fi sprints, I continuously updated the design library of 40+ responsive components.

As the sole designer of all things web, I had to keep pace with the many revisions, what-if questions, additional recommendations, and documentation. I created 2-5 static mockup examples per template to demonstrate our modular design in action at two breakpoints.

The primary goal of the website was to improve the overall user experience for each audience type and increasing the total volume of donations. We knew this site would push Webflow to the limits, my challenge was designing modular components per template to give Editors as much control/flexibility as possible. Our client was deep in content writing during this sprint, so our list of technical features grew during this phase.

Because of the many unique needs of the websites, some of our templates are multi-purposed. Seen below is one of the most used templates across the site because almost every section is optional, or dependent on content.
Development

Between annotated mockups, word-docs and, late-night slack messages the Webflow Designer and I built out all collections and templates in 10 weeks.

The JFS site would rely on custom code and multi-reference logic to support this massive, modular website. We did not initially plan to out-source the development so I was not prepared to hand off annotated files. To keep our Webflow designer on schedule I had to straddle CMS setup while wrapping up the final hi-fi design sprint.

I worked with the solutions architect and development teams to implement several custom features such as the event calendar, recurring events, on-page collection filtering, and mega-navigation interactivity.

During the content migration phase, some templates and collections required change and I had to restructure some of our CMS-driven pages. I completed the final QA sweep alongside our clients and their stakeholder, we implemented UserSnap to manage tickets and other feedback. My team was on standby to launch the site in early to mid-December.

Outcomes

We launched both the new JFS Houston and ReelAbilities Houston websites right before the 2020 winter holiday. The JFS website is a finalist in the Non-Profit Category of the 2021 AMA Houston Awards.

Comparing the web-analytics a 3 months prior and  after launch, we saw

  • 622% increase in visitors  since launch
  • 756.8% increase in "Donate" views
  • a 20% increase in average session duration, with regular and organic search users spending the most time on the site.
Lessons Learned

Whew. This project presented challenges at all angles. design, development, planning and other professional challenges.

Final Deliverables
  • 12 responsive, modular web-page templates
  • 2-5 static mockup examples per template to demonstrate modularity
  • Responsive, accessible, CMS powered Webflow site
  • Style guide and photo size guidelines of JFS Houston and Reelabilities colors and web-styles
  • Webflow Editor training & instructions
I designed a dynamic news template that is flexible for a wide variety of use-cases such as blog posts, resources, videos, general information, or a photo gallery.