Lit Path Redesign

The Progress

Design

Testimonials

We conducted weekly meetings with our clients to present ongoing progress and gather feedback. The clients shared insights of users' needs, along with their vision for restructuring and redesigning the website. Subsequently, we refined our focus to revolve around designing and implementing the critical 7 pages.

Throughout the design phase, the clients actively participated by offering comments and input during every design iteration. On the development front, the clients set up a dedicated development site, which leveraged GitHub for automated updates, allowing engineers to assess and test the functionality seamlessly.

Primary Research

To better understand Lit Path’s target audience, we conducted personalized surveys for the 3 main user groups: potential donors, therapists, and potential scholarship applicants seeking mental health care. The findings from our research gave us more insight into users’ thoughts, motivations, and needs that would help guide our design decisions throughout the process. Some of the key insights we discovered were:

The research findings we collected from the compilation of surveys revealed areas of design opportunities for the new Lit Path website that would help improve the overall user experience. It reinforced the need for the design to be easy to understand and thoughtful, while addressing the users’ needs.

Persona

Our insights gathered from research led to the creation of the following personas based on the target audience. With the 3 personas, we were able to further empathize with the users by understanding what their goals and current challenges are, so that we could design and develop solutions that would meet those needs.

Scholarship Applicants

UserJourneys

After creating the personas, we complemented each user persona with their respective user journey mapping. With these journey maps, we were able to further empathize with the users we were designing for. The mapping of experiences for each persona helped us to visualize how each user may interact with the current Lit Path website to achieve their end goal. As we go through the users’ actions, we gained a deeper understanding on how they think and feel at every step of their journey exploring the site.

The user journey maps supported the existing user pain points shared by our clients, as well as highlighted new pain points to consider when starting the design process. The identification of these new pain points allowed us to see opportunities for improving the user experience.

Site Map and Information Architecture

Before starting on low-fidelity mockups, we wanted to get a sense of the current website’s hierarchy and structure. We created a site map to see how pages are labeled and linked, as well as what content is on each page.

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

Below are the low and mid-fidelity designs of the homepage that were all created on Figma! We created these low fidelity wireframes on the left to quickly visualize and iterate on various design concepts without being bogged down by the details. It also helped our team work at a rapid pace, enabling designers to explore multiple design directions and make quick changes based on feedback. The mid fidelity wireframes on the right helped us refine our concept, visualize our hierarchy and interaction, and keep the focus on the structural and interaction aspects before transitioning into the high fidelity designs.

User Testing

We conducted usability testing to see how potential visitors to the website would react to our mid-fidelity designs. This was extremely important because it helped us see any gaps and bring up questions that we had not brought up beforehand. When users responded well to different design features, it further reinforced certain decisions we made when we created the mid-fidelity wireframes.

Design System and High-fidelity Design

In response to inconsistencies observed in the high-fidelity designs, our design team executed the development of a comprehensive design system. Recognizing the critical need for cohesive visual elements across all team members' contributions, we initiated an effort to establish design guidelines, principles, and standardized components.

This design system became a unifying framework that enabled our team to maintain consistency throughout the design process. By meticulously defining typography, color palettes, spacing, and interactive elements, we ensured that every design iteration adhered to a unified aesthetic and functional standard. The design system not only addressed the initial issues of inconsistency but also streamlined the workflow, allowing team members to focus more on creativity and user-centric solutions rather than spending excessive time resolving design disparities. As a result, the adoption of the design system resulted in polished high-fidelity designs that effectively conveyed the brand identity and enhanced the overall user experience of Lit Path's new website.

Responsive Design

On top of redesigning the desktop website, our team created a responsive design for mobile devices. Each designer adapted a part of the desktop design to fit mobile screens. Since the design had to transition to fit a smaller device, there were some adjustments that had to be made to the design, but we achieved our goal in making our design intuitive and maintaining the organization’s brand into a smaller design.

Desktop (left) and Mobile (right) Responsive Designs

Desktop