Role

As the sole designer and developer on this project, I was tasked with creating an online experience that would shape visitors’ primary and recurrent encounters with the BSA. Being a product designer with development experience meant that I was able to produce lightweight and malleable designs while also satisfying basic user needs. 

 My role encompassed a large range of the design process, from distinguishing user needs, to site flow, to conceptualizing and visualizing key motifs within the group, to designing a unique, yet familiar interface, to finally engineering a responsive build within Square’s private web service.

The Challenge

Square’s private web services are the dominant way that information is disseminated throughout the company to each individual. Square employees, or “Squares”, navigate the confined world through web pages created by teams, HR staff, and community groups. Though one of the largest community groups at Square, the BSA had no such centralized information bank or way to circulate timely news. As a result, many events were short on attendance, initiatives lacked participation, and resources were misplaced. Once enthused group members became uninvolved by nature of a broken user experience.

For Black History Month 2018, my goal was to create a interactive experience for the group that would keep community members informed and promote individual engagement, while reflecting the mission and energy of the Black Square Association. 

Leadership

Leadership is concerned largely with how the BSA is represented. It’s their job to secure annual funding, get approval for speakers and events, and plan activities grounded in cultural awareness that also mesh with Square’s overall culture.

Needs: 

• presents the BSA’s best face

• relay its philosophy

• show impact

• convey openness

• wider Square philosophies (transparency, etc.)

Community members

Community members view the BSA as a place for fellowship with people who have had similar experiences, or people who are allies and want to learn more. 

Needs:

• safe space

• home away from home

• knowledge of fun events

• black community news/ hot topics

• info about channels of communication

The above flow gives a peek of the navigational heirarchy within the website. Users first encounter a landing page, from which they are able to use any other of the site’s crucial functions.

Exploration

My process generally involves brainstorming practical user flows, then rapid ideation and low-fidelity sketches of page components that help certain user needs stand out. In some sketches, layouts have the basic hero text format with a menu bar and expandable links. This really puts the user in the driver’s seat - having all available options at their fingertips. In others, I explore more radical ideas, such as extreme minimalism in text to really highlight the member involvement through photos. A sideways scroll allows the designer to control the pace at which elements about the BSA are revealed. This can be useful for story-telling or showing impact upfront.

Components

Once an overarching design was chosen, I played with the feel of the interface, building out components that captured the essence of the BSA while retaining functionality.  I chose to  start by flipping on its head the design stereotype that everything related to being black must be the color… black. In line with the BSA’s often humorous critique of American society, I instead made white the primary background color, with the photos being in a faded grayscale or overlaid with a contemporary color gradient. Chunky container blocks contrasted with delicate inner borders and lines serve as focal points for important information. 

With a very on-the-nose theme, I placed a single black square on every page as a candid reminder of the site’s namesake, and a gentle reverence to its users. 

The stand out black square switches from face to face on hover as a memory trick - allowing community members to more easily recall each framed leader.

Here particularly, the black square callout conveys somewhat of a brand on one of the more non-member focused pages.

Independent Scroll

Each row is built to scroll separate from the next, creating a film-role-like effect for the panel of faces. The faces link on click to Square’s bio about the person, easily integrating into Square’s larger environment.

Filled Hover

Again touching on the contrast between thin lines and thick blocks of space, outlined buttons with hover fills are an important design choice in this system. Here, doesn’t simply accentuate the button; it also philosophically touches on the dichotomies like boldness and delicacy, or outward impressions vs. inner authenticity that black community members often find themselves grappling with.

Life in Color

When viewing an item, it has been noted that users often scroll over the item to bring it into focus - usually with no responsive element. Here, viewers get a pleasant surprise as receded grayscale photos come to life when the user hovers.

User Controlled Viewing

Hovering on sections of this page offer a similar highlight effect and independent scroll as above. However, this time the right side is the only side that scrolls. So rather than a quick click, the user is allowed to take their time and discover the meaning behind the words on the right.

Conclusion

Planning and executing a clean, well-thought out website has allowed me to deeply explore the crucial relationship between user journey, interface design, and production code. By streamlining output for the various user need, I was able to create a sturdy, yet adaptable website that the community can continue to mold. All in all, the final site will serve its intended purpose: to get people connected with resources like BSA suggested podcasts, use the calendar to keep up with events, and find out more information about the group’s origin. The platform will support the BSA in strengthening community bonds.