Case Study

Psi Chi Omega
Fraternity Website

Case Study
Image of Poseidon statue in Berlin. Psi Chi Omega Mascot.
Psi Chi Omega Website homepage mockup.
End 04/22
Role

Research

Strategy

Design

Development

Technology

Figma

HTML/CSS/JS

Next.js/React

TailwindCSS

Strapi CMS

Heroku

In the spring of 2014, I joined Psi Chi Omega during my first year at UC Davis. It would take several years later for me to begin to fully appreciate just how important and special these student-run communities are for the larger Asian-American community. To support and give back to the community, I created the official UC Davis Psi Chi Omega Fraternity Website. Here, I share my design process and how I tackled this project.

What is Psi Chi Omega?

Psi Chi Omega is an Asian-American social fraternity with several chapters throughout California. Asian-American fraternities are unique because they cater to students in Asian-American communities who often struggle with identity issues and other race-related issues.

The Problem

During my time there, the brothers and I grew the fraternity to become the largest Asian-American fraternity at UC Davis. However, our success highlighted significant blockers to address if we want to continue our fraternity’s growth. Some of these included:

  1. An outdated & ineffective recruitment process.
  2. Lack of online resources to help students see the value in our fraternity.
  3. A negative stigma associated with social fraternities.
  4. Shifting interest in favor of business and professional organizations.

The Solution

Create a fraternity website to help members recruit students by integrating it in our recruitment process and social media campaigns. It should act as an accessible, online resource to help students discover and learn about our fraternity, as well as represent and shape our fraternity chapter’s brand identity, image, and culture.

test
An iteration of the Psi Chi Omega homepage.

User Research

We begin by learning about our archetypal users to understand their motives, needs, and pain points. The research plan primarily tackles three broad questions: Who are our users? How will they use the website? And who are our competitors?

As a starting point, I leverage my experience as a fraternity member to map current assumptions about our users, which were then used to identify further avenues for research. Some generative research methods such as empathy maps and user journeys were also used.

In addition, I reviewed scientific literature that examines Asian-American issues in college, the role of Asian-American fraternities, and general college student psychology. These results provided an in-depth understanding of our users and their needs, motives, and goals related to student organizations in academia.

Lastly, I conducted a competitive analysis to compare competing student organizations. These findings define our UX strategy and help develop empathy among stakeholders.

Who are our users?

Demographics

Our primary users are male Asian-American undergraduate college students aged 18-21. They are 1st-3rd year students, generally middle-class or above, and are socially and academically motivated. While our demographics change year by year, our historical data shows that our members have predominately been Chinese-Americans and Vietnamese-Americans, who make up roughly 60%, while the remaining identify as Taiwanese, Filipino, Cambodian, Asian Indian, Thai, Hmong, and Korean, or other.

User Persona
Psychological Profile

When applicants were asked in interviews for their reasons for joining a fraternity and what they wanted to get out of our fraternity, they responded with answers like “to become part of something larger than themselves,” to “push themselves out of their comfort zone,” “make the most out of their college experience,” and form meaningful relationships with people. When coding their responses, I realized most were thematically related to existentialism.

From an existential psychology POV, user interviews suggest that our applicants are having an existential crisis, which data from scientific literature studying college student psychology supports. According to existential psychology, people with an existential crisis are attracted to beauty, nature, meaningful experiences, and relationships, which are powerful themes to integrate into the website content and design (Frankl, 1984).

Book IconRESEARCH DEEP DIVE
Existentialism & Emerging Adulthood

With this research, we learn that college is a difficult, stressful transitional period for emerging adults where they start to ask difficult questions about their identity, purpose, and meaning in life. Students need: an outlet to cope with psychological stressors; direction and avenues to explore their purpose, meaning, and identity; opportunities to establish meaningful relationships, including romantic relationships; personal accomplishments, encounters with others, art, and nature; and an environment for learning social skills, norms, and etiquette.

Asian-American Identity

An important factor is our user’s Asian-American cultural identity. During member application interviews, students reported that a high sense of belonging within the community was one of the primary reasons for joining. This high sense of belonging could be attributed to a shared cultural heritage. Wells & Horn (2015) state, “students’ sense of belonging is dependent on whether they perceive their Asian culture to be compatible with the campus culture.”

User interviews with alums and senior members revealed an appreciation for an Asian-American fraternity and its impact on helping members come to terms with their cultural identity. In a podcast with previous members, they all agreed that their experience in an Asian-American fraternity unexpectedly made them more proud to be Asian-American.

To investigate this further, I redirected my attention toward understanding the needs and circumstances surrounding Asian-American college students. My research found that our users, male Asian-American college students, face complex socio-economic issues that motivate them to join a fraternity. Specifically, fraternities allow Asian American students to challenge mainstream stereotypes, redefine their identity, empower themselves, and experience personal growth that isn’t accessible by traditional mainstream methods.

Additionally, our users, who may be more academically at risk, recognize a need for cultural spaces and communities in academic environments to increase academic persistence and success and, as a result, seek out organizations like our fraternity.

Book IconRESEARCH DEEP DIVE
Asian-American College Students

How will the website be used?

Now that we understand the users’ needs and motives, we can narrow the research scope to the user needs in relation to the website. To do so, I draw on user journeys to contextually map the user in their environment. Additionally, I used an empathy map to explore user emotions and how they might influence thought and behavior. These methods provide insights into use cases, UX strategy, website specifications, and direction in which to structure the product.

Book IconCONTEXT BRIEF
Our Recruitment Process

The primary strategy behind the website is to include it on our flyers to nudge students to visit our website to learn more about the fraternity, build trust and confidence in our organization, and attend our events.

INSIGHTS

  • The primary use case is to learn about the fraternity.
  • Optimize for mobile performance. Research suggests web traffic would mostly come from mobile devices followed by laptops.
  • First impressions and fast loading times are crucial. Students are busy and may only have a few minutes to explore the website before moving on.
  • Minimize friction between initial contact and attending our rush events. People are hesitant to attend an event based on a brief interaction. Linking the website on our flyers can nudge users into visiting the website where they can begin to develop trust and confidence in the organization.
  • Students are likely to be recruited by multiple organizations.

Additional Considerations

Additional user needs, concerns, and barriers to entry are reputation & trustworthiness; social or professional fraternity; joining process difficulty; impact on academics; the high number of competitors cause uncertainty in deciding which fraternity to join; lack of accessible information on the fraternity; stigma, rumors, and stereotypes associated with fraternities.

Who are our competitors?

Among the Asian-American network at UC Davis, there are three fraternities students tend to join: Psi Chi Omega, Delta Epsilon Mu, and Alpha Kappa Psi. To document differences in our organization, I started by creating a list of metrics and compiled my findings in a spreadsheet.

INSIGHTS

Analyzing our competitors and their websites helped identify differences in organization attitudes, appeal, interests, and content strategy. It provided me with possible website features, identified potential opportunities to differentiate our website, and revealed design weaknesses and flaws to avoid.

  • More users are joining professional fraternities than social fraternities. They have more than 2x members than Psi Chi Omega.
  • Our competitors’ content strategy focuses on their members and achievements rather than the organization.
  • Opportunity - If we shift towards a more professional culture, we can position ourselves as a balanced social fraternity that takes professional development as seriously as our competitors.
  • Using a custom, well-built website can differentiate our website from theirs. AKPsi uses a digital application which could be something we implement in the future.

References

  • Hune, Shirley. (2002). Demographics and Diversity of Asian American College Students. New Directions for Student Services. 2002. 11 - 20. 10.1002/ss.35.
  • LeSueur, Ian, An Investigation of Existential and Positive Psychological Resources in College Students (2019). Seton Hall University Dissertations and Theses (ETDs). 2669. https://scholarship.shu.edu/dissertations/2669
  • Museus, Samuel D. and Julie J. Park. &quotThe Continuing Significance of Racism in the Lives of Asian American College Students." Journal of College Student Development, vol. 56 no. 6, 2015, p. 551-569. Project MUSE, doi:10.1353/csd.2015.0059.
  • Museus, S.D., Shiroma, K., & Dizon, J.P. (2016). Cultural Community Connections and College Success: An Examination of Southeast Asian American College Students. Journal of College Student Development 57(5), 485-502. doi:10.1353/csd.2016.0064.
  • Tran, M. and Chang, M. (2019), Asian American Interest Fraternities: Fulfilling Unmet Needs of the Loneliest Americans. Student Services, 2019: 73-85. https://doi.org/10.1002/ss.20295
  • Samura, M. (2016). Remaking Selves, Repositioning Selves, or Remaking Space: An Examination of Asian American College Students’ Processes of “Belonging”. Journal of College Student Development 57(2), 135-150. doi:10.1353/csd.2016.0016.
  • Yeh, Theresa. (2002). Asian American College Students Who Are Educationally at Risk. New Directions for Student Services. 2002. 61 - 72. 10.1002/ss.39.

UX Design

Using user research, I define the direction and architecture of the website. By first formulating the design principles, I create standards in which the appropriateness of the design is determined. Following the content-based design principle, I define the information architecture and content strategy that informs the visual hierarchy and design. I end by exploring emotional design and brand identity to amplify the user experience.

Formulating Design Principles

Design principles root the design in fundamental truths, help guide the project, and define what is subjectively right or wrong. Here are a few:

Analogous design. Create interfaces that visually and functionally resemble familiar interfaces and objects. This idea was inspired by Douglas Hofstadter’s theory of Analogy as the Core of Cognition.

Appropriate. Design within the restrictions and resources available, with an eye towards long-term use and maintenance.

Content/Science/Goal based. Focus on presenting the content first. Identify the content users need and design around it. Design intuition may lead you on the right path, but use data to confirm it and challenge all assumptions/biases. Learn the users’ goals and design so that users can efficiently accomplish them.

Information Architecture

This section details how content was identified, structured and used to fulfill user goals, inform navigation, and guide the overall design. The goal is to structure the website to match the users’ mental model to increase their understanding, especially if they have no prior knowledge or experience with greek-letter organizations, as we expect with most first-year students. By doing so, users can find what they’re looking for quickly and easily, even when they are not quite sure what they are looking for.

To start, I analyzed use cases to identify possible features and functionality to support user goals. For example, to allow users to compare and contrast organizations, I created a “Why Psi Chi Omega” web page.

Additionally, I created user flows for each use case to anticipate paths users might take to complete their goals. User flows provided information on the relationships between content and pages, which were used to display related topics and suggest subsequent web pages for the user to visit.

Next, I created a list of topics to display on the website by combining topics from business requirements, user research, and website best practices. This topic list was presorted to identify the best topics that would make sense as web pages. Using card sorting, I assess their relationships and organize them into groups to create the site map. However, with my knowledge now, I would have followed up card sorting with tree-testing to ensure labels are appropriately named.

For each webpage, I listed the webpage’s goal and planned content. Here’s an example for the “Who We Are” navigation group.

These living documents represent the webpage content, structure, and hierarchy to inform the design and help stakeholders stay on the same page.

Emotional Design

Emotional design has always been fascinating to me. Design based on emotions can profoundly affect the overall user experience since emotions influence decision making, affect attention & memory, and generate meaning. An effective emotional design is achieved when the user experiences pleasure, discovers meaning and identifies with the product.

Book IconRESEARCH DEEP DIVE
Emotionalizing design

Understanding a user’s emotional profile and design allows us to find opportunities to target and resonate with users to elicit powerful emotional responses. When users reflect, the experienced internalized emotions influence their appraisal and feedback loop to motivate action.

To structure my design insights, I used Don Norman’s theory of emotional design where he defines three levels: visceral, behavioral, and reflective. According to this theory, the reflective level is influenced by the visceral and behavioral levels and is not directly affected by sensory input.

Visceral Recommendations

Use a distinct design separate from our competitors. Thackara (1997) realized that many products in the current market were similar regarding their technical characteristics, quality and price. To increase attractiveness and market competitiveness, new products must be innovative in design to enrich the users’ experiences.

Consider using motion and color to make the website immersive. Spatial immersion captures the user’s attention and focuses important elements. The relationship between color and emotion is well established.

Use relatable, powerful imagery—for example, pictures of nature, fraternity members, social events (such as festivals), UC Davis campus, or images related to Asian-American identity. Imagery can effectively communicate meaning, emotions, and ideas to the users.

Use content based on real people to build trust and allow users to connect and identify with real people.

Behavior Recommendations

The behavioral level concerns itself with four components: usability, functionality, understandability, and physical feel. I’ll come back to this in the UI design section.

Reflective Recommendations

Create a brand and UI that resonates with the user’s emotional profile and desired identity.

Use a comforting tone. Speak as a mentor who empathizes, who was once in their shoes, and understands their situation.

Reference thematically related concepts. Use concepts and metaphors such as the hero’s journey, growth, and overcoming obstacles such as “climbing the mountain” or “crossing the sea.”

Use affective words and emotion concepts. Of course, what people say can affect emotions, but recent research shows that emotion concepts, when read, can create instances of emotion (Abbassi et al., 2015).

Soothe, comfort, and reassure. Users may be stressed by a variety of factors. Deciding to join a fraternity can be a big commitment. Increasing one’s emotional regulation and decreasing a negative affective state can be therapeutic and reduces the cognitive load in decision making (Plass & Kalyuga, 2019).

Don’t overdo it. High emotional intensity can be mentally exhausting and increases cognitive load (Plass & Kalyuga, 2019).

References

  • Abbassi E, Blanchette I, Ansaldo AI, Ghassemzadeh H, Joanette Y. Emotional words can be embodied or disembodied: the role of superficial vs. deep types of processing. Front Psychol. 2015 Jul 9;6:975. doi: 10.3389/fpsyg.2015.00975. PMID: 26217288; PMCID: PMC4496550.
  • Amic G. Ho & Kin Wai Michael G. Siu (2012) Emotion Design, Emotional Design, Emotionalize Design: A Review on Their Relationships from a New Perspective, The Design Journal, 15:1, 9-32, DOI: 10.2752/175630612X13192035508462
  • Baumeister, R. F., Vohs, K. D., Nathan DeWall, C., & Zhang, L. (2007). How Emotion Shapes Behavior: Feedback, Anticipation, and Reflection, Rather Than Direct Causation. Personality and Social Psychology Review, 11(2), 167–203. https://doi.org/10.1177/1088868307301033
  • Brans, Karen & Koval, Peter & Verduyn, Philippe & Lim, Yan & Kuppens, Peter. (2013). The Regulation of Negative and Positive Affect in Daily Life. Emotion (Washington, D.C.). 13. 10.1037/a0032400.
  • Desmet, Pieter & Hekkert, Paul. (2009). Design & Emotion. International Journal of Design. 3. 1-6.
  • Keltner, D., and Haidt, J. (2003). Approaching awe, a moral, spiritual, and aesthetic emotion. Cogn. Emot. 17, 297–314. doi: 10.1080/02699930302297
  • Lindquist, K.A. Language and Emotion: Introduction to the Special Issue. Affec Sci 2, 91–98 (2021). https://doi.org/10.1007/s42761-021-00049-7
  • Moors, A., Ellsworth, P. C., Scherer, K. R., and Frijda, N. H. (2013). Appraisal theories of emotion: state of the art and future development. Emot. Rev. 5, 119–124. doi: 10.1177/1754073912468165
  • Norman, D. (2003). Emotional Design: Why We Love (or hate) Everyday Things. Basic Books.
  • Plass, J.L., Kalyuga, S. Four Ways of Considering Emotion in Cognitive Load Theory. Educ Psychol Rev 31, 339–359 (2019). https://doi.org/10.1007/s10648-019-09473-5
  • Roese, N. J. (1997). Counterfactual thinking. Psychological Bulletin, 121(1), 133–148. https://doi.org/10.1037/0033-2909.121.1.133
  • Thackara, J. (1997). Winners: How Successful Companies Innovate by Design. Amsterdam: BIS
  • TIETJEN, R. (2020). The Emotion of Self-Reflexive Anxiety. Journal of the American Philosophical Association, 6(3), 297-315. doi:10.1017/apa.2020.10
  • Triberti, S., Chirico, A., La Rocca, G., & Riva, G. (2017). Developing Emotional Design: Emotions as Cognitive Processes and their Role in the Design of Interactive Technologies. Frontiers in psychology, 8, 1773. https://doi.org/10.3389/fpsyg.2017.01773
  • Verduyn, Philippe & Brans, Karen. (2012). The relationship between extraversion, neuroticism and aspects of trait affect. Personality and Individual Differences. 52. 664–669. 10.1016/j.paid.2011.12.017.

Branding

During rush events, Psi Chi Omega borrows other brand images by putting our greek letters onto their designs. It allows members to decide on a theme collectively and inject their personality into the fraternity; however, this strategy over the long-term weakens the brand because it relies on other brand images instead of developing its own.

Using product sliders, I defined the characteristics of the brand and website. Using an emotional branding model, we define our brand personality by measuring alignment with brand-meaning characteristics (Aaker, 1997). Both of these exercises helped define our visual design direction. Looking towards our fraternity history, I identified possible imagery and symbols such as Poseidon and the trident to integrate into the design.

To refine our brand identity, I conducted a brand analysis and created guidelines for the existing brand assets to ensure brand congruence throughout all channels. Psi Chi Omega has an intricate family coat of arms that is often underutilized in favor of the more modern bold sans serif greek letter logo. The coat of arms, while outdated, could be used as a secondary logo to add a sense of authority, tradition, and heritage to the Psi Chi Omega name. Unless the coat of arms is redesigned, I would not recommend using it as the primary logo.

Instead, a bold sans-serif typeface was kept for the primary logo to maintain a strong, modern appearance. To decide on the typeface to use, I compared several typefaces that support Greek letters and decided on the typeface with the most appropriate characteristics. The result is three Greek letters that can stand firmly on their own. As the primary typeface for the design, I used a neo-grotesque font as the primary sans serif typeface. As a supporting accent typeface, I selected a thin, sharp monospace typeface.

Finally, the color scheme was revitalized to be more modern. Forest green, the primary color, was changed from a bright green to a darker, rich shade of forest green. A Pantone green was selected to ensure color consistency across different mediums. Midnight black was shifted to a lighter shade of black, and pure white remained the same. Neutral colors were picked as secondary colors to maintain the focus on the primary color scheme while adding depth and variation.

Moodboard images were selected to visually describe the website’s atmosphere, tone, feeling, and theme. They represent important, meaningful imagery and themes members might experience throughout their journey with Psi Chi Omega.

Wireframes

Referencing the content strategy, I began by sketching out several designs on paper and pen. Wireframing was primarily focused on how the content should be presented and testing the information flow between web pages.

When I was satisfied with the designs, I converted them into high-fidelity wireframes with Figma. Ultimately, the deciding factor for the design direction was constraints on possible challenges and limitations in sourcing content and images.

For example, let’s look at and compare iterations of the homepage. While the first is more visually striking, there are a few reasons why I decided on the latter.

Previous Homepage

First, at the time, I wasn’t sure if I’d be able to develop that design as I was still new to web development then. Second, the layout wasn’t optimal for mobile devices. The layout limits the type of hero images enough that it may be difficult to find suitable images, which may be problematic, especially if our members were to manage the website on their own. The image would have to be vertically oriented, which is not optimal for showing group photographs. The current design navigates all those issues by simplifying the design and using a fixed grid.

UI Design

Creating a design system

Learning from design systems, such as Carbon Design System from IBM, Spectrum from Adobe, and Material UI by Google, helped me grasp best practices, industry standards, and fundamental design concepts and patterns to use in my design system.

The Psi Chi Omega design system is a rudimentary design system created as a library in Figma. It includes a hybrid grid, typographic system, color scheme, and component library.

The typography system uses line height and text size values in multiples of 4, so their total height snaps to the 8pt grid.

Component Design

To create components, I compiled a list of guidelines to follow and referenced components from various design systems and UI kits.

Final Prototype

You can view the interactive prototype here and the demo website here.

Challenges

One of the most demanding aspects of this project was the amount of time and effort I put into this project. This was my first serious UX project, and I overestimated my initial UX design skills. Because of this, the initial project foundation, design, and development direction created a lot of design and technical debt.

As I learned new concepts about UX & web development, I constantly went back to revise the project. The number of iterations and backtracking to deliver a product within my standards made this process extremely time-consuming.

When faced with tough decisions, I often found myself in analysis paralysis; however, trusting the process, creating plans, goals, and milestones, envisioning the end product, and keeping up the momentum helped me stay on track.

Working on this project alone meant I had to be self-reliant. Feeling stuck in limbo with a half-baked design was sometimes uncomfortable, but in the end, it pushed me past my boundaries and forced me to learn new skills.

Takeaways

Don’t reinvent the wheel. Unless there’s a good reason, use prebuilt packages & libraries. Having a separate dev team behind the development & maintenance of a UI library can save countless man hours which can be devoted towards other things instead.

Get more people involved. Initially, this was a simple learning project, and I didn’t want to get people involved until I was fully committed to delivering the project. However, I missed having people discuss design and share ideas, so I should have included more people in the process from the beginning.

Continue to optimize your workflow. Keep an eye out for tools that make it easier for you to do your best work. When I first started, I created the website with pure HTML, CSS, and JS because that’s what I was familiar with and didn’t know any better. It wasn’t a practical solution and tech stack, so I had to start from scratch. Instead, developing the website in React was much more manageable.

Keep it simple. It’s important to translate complexity into simplicity to keep the process manageable and easy to follow. By keeping my eye on the big picture, I was able to avoid getting lost in the details. Keep component abstractions simple, easy to maintain, limit variations, and focus on getting a working prototype.

Up Next - Travel WebsiteUp Next - Travel Website