Phi Delta Theta - California Nu

Phi Delta Theta - California Nu

Creating a website for Phi Delta Theta at Cal Poly SLO

Creating a website for Phi Delta Theta at Cal Poly SLO

As the lead reasearcher and designer on this project, I conducted and analyzed user research, ideated early concepts, ran design sprints, presented frequently to leadership, and delivered final assets for production. I worked with a product manager and engineers and presented to executives.

As the lead researcher and designer on this project, I conducted and analyzed user research, ideated early concepts, ran design sprints, presented frequently to leadership, and delivered final assets for production. I worked with a product manager and engineers and presented to executives.

Role

Lead UX/UI Designer

Lead UX/UI Designer

UX Researcher

Tasks

Wireframing

Prototyping

Usability Testing

User Research

Tools

Figma

Framer

Timeline

2 Months

Project Summary

Context

Phi Delta Theta at Cal Poly SLO was founded in the Fall of 2022. Over the past two years, this organization has been building its base of members and trying to increase its brand awareness on the Cal Poly SLO campus.

Problem

Phi Delta Theta didn't recruit as many new members as they would have liked in the last year. In addition, Phi Delta Theta did not collaborate with enough organizations on campus and in the surrounding SLO area. As a new organization, a lack of members, partnerships with organizations, and low brand awareness has been significantly impeding Phi Delta Theta's growth.

Solution

To address these issues, I designed and developed a new responsive website for Phi Delta Theta. The new website clearly explained the benefits of joining the fraternity and presented it as a multi-faceted organization with members with diverse backgrounds and interests. In addition, the new website displayed key information about Phi Delta Theta's values and philanthropy events in order to make them more attractive potential partners to other organizations.

8%

Increase in Instagram followers

70%

Increase in Rush Event Attendance

180%

Increase in new members

Process

Problem

Phi Delta Theta is a relatively new organization on the Cal Poly SLO campus, as it was founded in the Fall of 2022. Over the past two years, this organization has been building its base of members and trying to increase its brand awareness on the Cal Poly SLO campus. As a member of the executive board, I noticed that our chapter did not have a strong online presence and our current website did not market the organization well.

Constraints

While completing this project, I had to keep this constraints in mind:

  • I was the sole designer and developer

  • Limited Time Frame (July 2024 - September 2024)

  • Limited opportunities to meet with stakeholders

    • Only 2 meetings were available due to scheduling constraints

    • Meetings were on a strict time frame, so I had limited time to present my ideas and findings about the site

Initial Meeting with Stakeholders

To solve these problems, I proposed creating a new website to our executive board that effectively showcases Phi Delta Theta's values and the benefits of joining our Cal Poly chapter.

After meeting with me, the executive board agreed to the idea of creating a new website. In addition, through meeting with the board, I identified these primary business goals for our organization:

Business Goals

  • Recruit 10 new members during the Fall Recruitment cycle

  • Increase brand awareness on campus

  • Partner with more organizations on campus and in the community

Usability Testing

I conducted usability tests with students to better understand what their most important needs and issues are when using our old website. After conducting these tests, I came away with the following takeaways:

User Problems

  • Users didn’t have a good understanding of who the members of PDT were and what type of activities they do

    • Lack of photos and info on old website

    • Photos on website incorrectly expressed our organization's brand

  • Users couldn’t find out much about PDT’s recruitment process through the website

  • Users were not able to understand PDT’s unique value as a fraternity and what made them stand out amongst other Fraternities on campus

User Needs

  • Users want to see photos of brothers in the fraternity participating in activities so they can get a better understanding of who they are

  • Users want to know how they can benefit from joining this fraternity (academically and professionally)

Competitive Analysis

Now that I had the support of the executive board and defined the business goals, I conducted some competitive and user research.

I analyzed the websites of 3 other Phi Delta Theta chapters on the west coast (USC, UCLA, and UC Berkeley) and 1 other high performing fraternity at Cal Poly SLO (Zeta Beta Tau).

Now that I had the support of the executive board and defined the business goals, I conducted some competitive and user research.

I analyzed the websites of 3 other Phi Delta Theta chapters on the west coast (USC, UCLA, and UC Berkeley) and 1 other high performing fraternity at Cal Poly SLO (Zeta Beta Tau)

Insights

  • It’s critical to display photos of brothers participating in activities on each page (Home, Recruitment, Philanthropy, etc.)

  • Several of these websites had clear, easy to find links to most important pages of the website (Recruitment, Philanthropy, etc.)

  • Consistency between the visual brand on the website and the overall Fraternity is critical to making the website appear appealing and legitimate

Stakeholder Meeting #2

I met with our executive board again and presented my findings from user research and usability testing. Using my findings, I created a sitemap to map out what my pages are going to be on the website and presented this to stakeholders as well. I was able to get feedback on what they like and what they want to improve. Here are the main takeaways from this meeting:

  • Ensuring that branding on the website is up to date to best represent our chapter and the national Phi Delta Theta fraternity is a top priority

  • My plan for the structure of the website was approved

  • Solidified timeline for completing the website

Project Goals

Now that I had a strong understanding of both user and business needs, I created a list of goals to accomplish through this project

  • Increase the size of this year’s pledge class compared to last fall

  • Create a positive perception of PDT Cal Poly SLO that accurately reflects the unique values of the fraternity

  • Show that PDT is a well rounded organization that values several fields, including academics, philanthropy, professional development, athletics, and socialization

  • Show that PDT has members of diverse backgrounds, interests, skills, and professional aspirations

Wireframing

Now that I had the structure of my website planned out with my site map, I began to create low-fidelity wireframes for the main pages of the website.

Style Guide

I created a style guide in order to ensure that all of my designs on the website were consistent and to create a more seamless design process. I referenced Phi Delta Theta's national brand guidelines to choose the fitting brand colors and logo for this website.

High-Fidelity Designs

With my style of my brand more defined, I created High-Fidelity wireframes in Figma.

Building the Website in Framer

Now that I created my high-fidelity wireframes, I began to build the live website in Framer. Some of the challenges I faced:

  • Keeping the designs consistent with the high-fidelity wireframes I designed in Figma.


    • I referenced my style guide to make sure colors, logo, and typography were consistent.

    • I had to recreate color styles in Framer including solid and gradient color styles.

Keeping the designs consistent with the high-fidelity wireframes I designed in Figma


  • I referenced my style guide to make sure colors, logo, and typography were consistent.

  • I had to recreate color styles in Framer including solid and gradient color styles.

  • Ensuring that website design was responsive for desktop, tablet, and mobile breakpoints


    • Established margins and spacing for each breakpoint.

    • Researched how to set width and height resizing options to create a website design.

  • Ensuring that website design was responsive for desktop, tablet, and mobile breakpoints


    • Established margins and spacing for each breakpoint.

    • Researched how to set width and height resizing options to create a website design.

Insuring that website design was responsive for desktop, tablet, and mobile breakpoints


  • Established margins and spacing for each breakpoint.

  • Researched how to set width and height resizing options to create a website design.

Presenting to Stakeholders and Revisions

After completing the website in Framer, I sent the website to our executive board. After hearing feedback from the executive board, I decided to make the following changes before launching the live website.

  • Changed the hero section image on the Social page to better align with our organization's brand

  • Made some images on the phone breakpoint larger because they were small and difficult to view

  • I made several ongoing edits, such as updating our rush schedule and info on home page, updating the athletics page, and more to keep the site up to date

  • Changed the hero section image on the Social page to better align with our organization's brand

  • Made some images on the phone breakpoint larger because they were small and difficult to view

  • I made several ongoing edits, such as updating our rush schedule and info on home page, updating the athletics page, and more to keep the site up to date

Usability Testing

After the website was launched, I conducted more usability tests with students to better understand there needs are met and what other changes they would like to be made. After conducting these tests, I came away with the following takeaways:

  • Users perception of the fraternity after viewing the website aligned with the fraternity's intended brand and values

  • Users were able to easily navigate to different pages on the website to get important information about the fraternity

  • Users mentioned that some images were not formatted properly

    • I edited all of the images based on this feedback

Results

After publishing the new Phi Delta Theta website, we observed the following impacts on our organization:

  • 70% increase in rush (recruitment) event attendance

  • 180% increase in new members

  • 8% increase in Instagram followers

  • Users were able to easily complete key tasks on the website and perceived our brand in the intended way

Final Website Designs

Here are some mockups of my final website designs.

View Live Website

View Live Website

View Live Website

Thanks for Reading!