I redesigned key pages and features of the website including the homepage and online course pages. But before making any changes to the website, I applied various design methods that I learned from completing the UX + Product Psychology Masterclass by growth.design prior to starting this project.

For projects with an existing website or application, I typically start with a heuristic evaluation, also known as a design audit. It involves using Jakob Nielsen’s 10 Usability Heuristics for standard analysis. I evaluated the unique pages and features of the Good Tree Institute website in both desktop and mobile view.

I discovered a number of issues and provided recommendations for each. Here are the critical issues that I noted:

• The navigation menu interface has long lists of menu items that are not sorted alphabeticallly, thus making it ch

The recommendations of the design audit will help the website adhere to best practices for usability. However, it alone doesn’t reflect the full user experience. Storyboarding is a method for visually capturing potential user experiences to help bring forth thoughts, opinions, and emotions – both positive and negative – that people may face in achieving their goals beyond using the website. This brings the end user front of mind as storyboards are used to identify gaps and opportunities for improving the overall user experiences. Here is one storyboard set that I created:

Storyboard Narrative

A woman who recently converted to Islam is looking for local support from the Muslim community. She discovers the Good Tree Institute website through Google searches. After clicking through the website, she learns about their Sadeeq program for New Muslims. She signs up for their next event, but she’s worried about what to wear and occasionally has feelings of loneliness in the meantime. On the day of the event, she’s feeling nervous, yet, courageous as she prepares to meet new people.

Gaps & Opportunities

• There’s no quick way to save the event to calendar after registering, so users may forget about the event.
• Sign up confirmation is plain, lacks enthusiasm.
• Individually contact everyone who signed up to establish personal connections and increase attendance percentage.

While storyboards highlight experiences other than viewing screens, customer journey maps focus on users’ psychs through navigating user flows within the website. Each screen in a user flow is reviewed for how it impacts a user’s motivation and ability to follow through on their goal.

Scenario: A user is seeking a program for supporting New Muslims

Customer Journey:

1. The first thing the user sees when opening the Good Tree Website is a video playing in the background of the different programs, which provides the users with a sense of the community within the organization.
2. But the user doesn’t immediately see which programs offer support to New Muslims from the homepage, and it’s not immediately clear what each program is just by it’s name in the website menu.
3. After clicking on “Mentorships”, the user finds another page about the Sadeeq program for New Muslims that appears to be what they are looking for.
4. However, the user can’t tell how active the Sadeeq program is because the information is not up-to-date. They can’t find upcoming event dates and they do not want to apply to the program right away.
5. The user returns to the homepage, scrolls down, and finds the date for the next Sadeeq program event. Clicking on the event takes the user to the registration page, and they sign up.

Within the customer journey map, I identified the peak moment in order to determine how to elevate that experience for users. I also identified the pitfall moment in order to propose ways to prevent that experience for users. And I explored reordering the steps taken on the journey so that users may have a more positive experience and an increased level of psych.

The final design method applied before making any page redesigns is the B.I.A.S. Framework, which outlines a way to review screens and user flows from the perspective of how users block, interpret, act on, and store information. Various psychological principles are considered when brainstorming ways to reduce the chances of blocking content and to better interpret and follow through on completing actions.

All of the outcomes from the Design Audit, Storyboarding, Customer Journey Maps, and B.I.A.S. Framework are then applied to the redesign of every page in the Good Tree Website. The image below shows a design process fore redesign on of the program pages.