Brothr 79

Recreating the accessibility of a brotherhood

Brothr 79 is composed of a small team that is currently working on developing a platform for Lambda Sigma Upsilon Latino Fraternity Incorporated, to practice Product Design/Development skill-sets through problem solving leveraging real users. 

Platform

iOS

Tools

Miro, Figma, After Effects, Lottie

My Role

Prototyping, UI design
Built a maintained a design system
Art direction and brand design

The Context

I was contacted by a fraternity brother of mine, about how he is looking for a designer to help build a user-friendly interface for this product. as a member of the fraternity, Lambda Sigma Upsilon Latino Fraternity Incorporated and wanted to take this opportunity to get better practice with iOS development and mobile interactions. Most importantly I wanted to take this concept and run with it, and create a more engaging, mobile solution for connecting brothers and expanding on the 4 goals of the fraternity.

Actual conversation in GroupMe/Facebook looking to connect with a brother.

A familiar problem.

Brothers have expressed difficulties connecting and networking with other brothers within Lambda Sigma Upsilon Latino Fraternity Incorporated. In addition, some alumni brothers lack sense of purpose and career guidance after graduating. My brothers and I currently use apps like GroupMe and Facebook Groups (left) but these have their own goals and are not really tailored for the fraternity. Therefore, there is no “official” means of communication between the brothers, especially one that aligns with out goals, discussed later.

Our hypothesis

We knew we would have to validate our users’ needs by conducting research, but based on our own experience as fraternity brothers, we suspected a few features would be appreciated.

Search engine and brother discovery

This was a core feature of the original idea that we wanted to bring to life so that brothers could begin discovering who other brothers across the nation were.

A dashboard and profile system

We also had longed for a clean way of identifying brothers and what they do, where they are from and a brief understanding of who they are even if there was no prior interaction.

Gamification of interaction

A snapshot of the most interactive users on the platform, with the ability to dig deeper for a more complete picture of who they are as a fraternity brother.

Developing
The Color Palette: Color Research

Part of the process of developing the color palette for the app was researching color and inspiration from a wide variety of over 80 photos that were then categorized and put into clusters that created four inspirational mood boards: Dark Ocean, Dark Sky, Light Ocean and Light Sky.

After down selecting the colors from the mood boards, I developed a grid like color system that embodied the four color schemes from the pre-design that inspires the dark and light mode directions in the circular grid. A circular grid would give a clearer view for stake holders and the team to see how these colors may work together.

Design System

The complex nature of the app necessitated more than 50 screens covering user on-boarding, dashboard setup, support and search engine features like keyword and geo-location discovery. To maintain consistency and ensure efficient design to dev handover, I developed an evolved color palette  and a modular design system based on reusable components and their states, such as cards, nibs, list items, and controls. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user.

Brothr 79 app,
built around fraternal experience

To redefine the network and intricacies of a fraternity, we asked our users to define what they felt about the 4 goals of the fraternity. Also due to the privacy of fraternities and that roadblock we needed to be sensitive to that fact.

From a series  of prototypes, we landed on a tab-based app architecture, each dedicated to a specific aspect of the fraternity: networking, connecting, being represented, privacy controls, and a dashboard with an overview of recent user activity with the fraternity. A list-based UI allowed to easily optimize scannability and summarize the content.

Part of Brothr 79’s goal is to serve the users and solve their pain points. Naturally, we needed a custom icon set.

An immersive search engine 

At the top of app’s most requested features was some form of search engine. Our users wanted to be able to find brothers based on their needs and request, quickly and efficiently. The discoverability had to be simple, yet flexible enough to support individualized requests (e.g. Dominican, Irish, mechanical engineer, comic books), and attach those to specific profiles.

Drawing on our conversations with the brothers, we understood the unique connection points within the brotherhood, each brother with their one interests, hobbies, careers and passion’s. One tap interaction allows brothers to edit their connecting points by editing their tags and discoverability in the fraternity as a whole.