PREPARE

Web Design

PREPARE website pages mockup
Timeline
Feb - Mar 2022
My Role
Contribution
Product Review Product Strategy UX Design UI Design
Team
x2 Co-Founders x1 Project Manager x3 UX/UI Designers

Change of Website Intention Beckons a Redesign

PREPARE is a nonprofit organization whose mission is to help empower people to make their best case for parole. Their original website design was designed to support their existing programs and its attendees. Since COVID redefined in-person meetups and remote information accessibility, PREPARE stakeholders decided to redesign their website to better reach and educate their target users.

How can we redesign the website so that their target audience can easily access pertinent information and offered resources now and moving forward?

During a design hackathon event, I stepped up to be the lead UX designer on the team. I worked to redesign the organization’s website to meet their top goals: increase site traffic, increase donations, and sign-ups for getting involved in their programs.

Clarified User Task Flows and Enhanced Information Hierarchy Presented in a Tangible Site Template and Key Page Wireframes

I redesigned and delivered PDF files of the branding system, the website design system, and the site wireframes and templates for implementation. Watch this video overview of PREPARE’s updated site design:

Clarified User Task Flows and Enhanced Information Hierarchy Presented in a Tangible Site Template and Key Page Wireframes

I redesigned and delivered PDF files of the branding system, the website design system, and the site wireframes and templates for implementation. Watch this video overview of PREPARE’s updated site design:

Design SNAPSHOT

Design Hackathon Process Overview

  1. Project Initiation. Our team discussed the organization’s project guidelines and began conversing with the stakeholders about the project scope and direction.
  2. Desk Research. I performed a heuristics inspection and our team met with the organization’s stakeholders for a Q&A session.
  3. UI/UX Design. I owned the about page redesign and significantly contributed to the navigation menu, home page, and stakeholder communication.
  4. Project Presentation. I presented our designs to the stakeholders and leaders, answering any questions.
Team Zoom Video Capture
Usability Analysis Overview
UI/UX Redesign Task List
PREPARE Stakeholders Meeting
No items found.

Headway with Initial Discussions and Research

While determining the objectives and to clarify the scope of the website redesign, we relied on my heuristic inspection in conjunction with the stakeholders meeting. I advocated for and inquired about user-centered site metrics, user findings and insights, and business goals in order to establish the project direction and to address any of the stakeholder’s concerns. Here are some of the key findings and insights:

Inspection Key Insights Overviewing What Was and Wasn't Working Initially
3 Proto-personas
Redesign Goal: To help tthe taarget audience easily find, access, and get involved with the organizatiton's offerede programs, resources, and related opportunities
No items found.
Design SNAPSHOT

Headway with Initial Discussions and Research

While determining the objectives and to clarify the scope of the website redesign, we relied on my heuristic inspection in conjunction with the stakeholders meeting. I advocated for and inquired about user-centered site metrics, user findings and insights, and business goals in order to establish the project direction and to address any of the stakeholder’s concerns. Here are some of the key findings and insights:

Inspection Key Insights Overviewing What Was and Wasn't Working Initially
3 Proto-personas
Redesign Goal: To help tthe taarget audience easily find, access, and get involved with the organizatiton's offerede programs, resources, and related opportunities
No items found.

Mapping a New Direction

The discovery phase led me to discover that the content for the “About PREPARE” page was scattered across ‘Parole Program,’ ‘Maryjoel,’ and ‘Our Board’ pages. I realized new users would not know where to go to learn about the organization or how they can get involved.

This lack of organized content and of clear user flows prevented new or interested individuals from signing up and increasing their involvement with the nonprofit. So, I worked closely with the project lead to map out a more intuitive and independently took charge on helping standardizing information hierarchy by way of a site map. This asset helped guide our team's work.

prototype of user task flows gif
prototype of user task flows gif

Informative Storytelling Using the About Page

Key Features

  1. PREPARE’s Mission. An improved emphasis on the organization’s purpose allows for site visitors to quickly assess how they can help make an impact.
  2. Inspirational Figure, Maryjoel. The stakeholders particularly appreciated that I chose to highlight Maryjoel Davis on the about page as they expressed her importance to the foundation of their nonprofit.
  3. Nonprofit Leaders and Staff. In showing the many supporting faces of the organization, site visitors can learn more about the people behind their efforts.
  4. Call-to-Actions. Clear and consistent CTAs across the website allow for interested parties to have a direct understanding and access to how they can benefit from and become involved with PREPARE ‘s offerings.
prototype of user task flows gif
Project TAKEAWAYS

Deliverables that Outmatched Expectations

  • Information Architecture. Now different user types can quickly and easily locate relevant information on the nonprofit’s website.
  • Scalability. PREPARE can more easily move on to adjust and to flush out their website as their organization continues to evolve.
  • Satisfaction. PREPARE’s leaders were happy with and amazement at our progress within the project scope.
  • Implementation. PREPARE worked on putting this redesign into action following this hackathon. I look forward to its positive impact on the organization and its efforts.
Information Architecture
Scalability
Satisfaction
Implementation
No items found.

Hackathon Reflection

We accomplished a lot within the constraints of this project and successfully went above and beyond PREPARE's expectations for the project.

Gained Skills and Experiences:

  • valuable experience working with a team remotely
  • prioritize tasks given a limited budget and time frame
  • communication and collaboration skills working with a team and stakeholders
PREPARE website pages mockup

“In just one day, our website has transitioned to a sleek, attractive, and organized space that more accurately conveys our mission, introduces our teams, and welcomes those who may wish to join our project. We appreciate everyone's tremendous investment of time and expertise.”

PREPARE stakeholders

More projects

Let's Work Together!

If you're seeking an enthusiastic designer, reach out below to tell me about your project. I aim to respond within one business day.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.