Lit Path Redesign

The Progress

Design

We held weekly client meetings to present progress, gather feedback, and refine the design for seven key pages. Clients actively contributed to iterations, while a dedicated development site with GitHub automation enabled seamless testing.

Primary Research

We surveyed Lit Path’s three main user groups to understand their needs. Donors seek mission clarity, transparency, and impact updates. Therapists assess credibility through partnerships and success stories while seeking scholarship details. Scholarship applicants face financial barriers and lack awareness of mental health resources. These insights emphasize the need for clear communication, transparency, and accessibility.

Persona

Research insights shaped three user personas, helping us understand their goals and challenges to design effective solutions.

Scholarship Applicants

User Journey Map

Users feel unmotivated at various stages of their journey—whether starting out, encountering unclear information, or questioning if their donation will have an impact. However, YouTube does nothing to address this. Therefore, we identified key demotivation points to ideate solutions around.

Site Map and Information Architecture

Before creating low-fidelity mockups, we mapped the site’s hierarchy and structure to analyze page labeling, linking, and content.

Then, we did a reconstruction of the site map that improves the navigation system, and reorganizes the content to fit accordingly to their respective pages. Some of the proposed revisions were:

• Create an “About Us” page that includes Lit Path’s story, core beliefs, team, etc.

• Add “Therapist Application” and “Log In” for therapists to the primary navigation.

• Move “Mission and Vision” information from the “Home” page to the newly created “About Us” page.

• Rename the “Get Support Now” page to “More Resources”, and adding information for 3 different programs.

Low-fidelity & Mid-fidelity Designs

Here are the low and mid-fidelity homepage designs created in Figma! The low-fidelity wireframes (left) allowed quick iteration and exploration of design concepts, while the mid-fidelity wireframes (right) refined hierarchy and interactions before moving to high-fidelity designs.

User Testing

With the idea solidified, we went through multiple rounds of wireframing, critiques, and user testing with the original interviewees. Overall, the feedback focused on enhancing visual appeal, adopting an empathetic design approach, and improving content organization and hierarchy.

Design System and High-fidelity Design

To address inconsistencies in high-fidelity designs, our team developed a comprehensive design system with guidelines, principles, and standardized components for visual cohesion.

Our design system ensured consistency by defining typography, colors, spacing, and interactive elements. It streamlined workflows, allowing the team to focus on creativity and user-centric solutions. This led to polished high-fidelity designs that strengthened brand identity and improved Lit Path’s user experience.

Responsive Design

In addition to the desktop redesign, our team created a responsive mobile design. Each designer adapted desktop elements for mobile screens, making necessary adjustments while keeping the design intuitive and consistent with the organization’s brand.

Desktop (left) and Mobile (right) Responsive Designs

Desktop

Demonstrating the Project Vision

A large part of the project focused on crafting a compelling story to present the vision to the LitPath team. This involved creating high-fidelity prototypes, aligning with personas, and refining the brief. The efforts paid off, and the project is scheduled for implementation in 2023.