Backyard allowed people to easily join an online hangout space from web or mobile, easily invite friends by sharing a link or code to play games, text chat and talk on voice and video.

While at Backyard, I worked on revamping the visual design and IA of web and mobile app. I worked with Keaton Taylor (Sr. PD), David McLeod (HOD) and dozens of other brilliant teammates across product, engineering, marketing and our games studio team.

Here's a fun little logo animation I made to help capture the spirit of Backyard:

Home (Desktop)

When you log in to Backyard, you are presented with all of your spaces and the spaces you have joined. Here, you can see which spaces are active, who's in them and what they are doing in there.

Navigational Components

We wanted to design the navigational components of a space so that they would be modular and collapsable, allowing you to quickly show and hide things on the go. The only UI element that is not collapsable is the top toolbar, which displays the space you are in, members, share and settings buttons as well as a space for surfacing contextual toast notifications in the center.

Spaces (Desktop)

Spaces are where you hang out with your friends on Backyard. There are 3 main components of a space: AV (Voice & Video), Chat and the Game Canvas. Navigationally, there is a collapsable sidebar that lets you see all of your spaces, which ones are active, and a way to add or join another space. All the elements of the space are collapsable so you can hide chat to focus on AV or the Game. When the game is open, the sidebar automatically collapses to immerse the players and decrease distractions.

Home (Mobile)

The Mobile Home (landing) when you open the app is split into 3 tabs: Home, Friends and Add. Home tab displays all of your active personal and community spaces as well as displays which of your friends are online. Friends tab displays your list of friends allowing you to see who's online as well as invite people to Backyard. The last tab, Add, allows you to quickly start or join a space.

Spaces (Mobile)

There are 3 navigational areas within a Space: Chat, AV (Audio & Video), Members. A fourth surface can be open within the space, which is the Game. You can navigate between Chat, Members and AV by swiping left or right. If someone starts a game, it will open above the bottom toolbar and members can swipe up to enter it and inversely swipe or pull down to close it and go back to Chat or AV.

Friends (Mobile)

One of the last things we worked on at Backyard was a better system for friends. We really wanted to focus on what we called the "friend liquidity" needed to jump into a synchronous space and start chatting and playing. To do this we improved the surfaces where friends were shown and allowed you to see what they were doing and join them easily. We made a better friends list with search and invite functionality. We added friend suggestions to the list showing people you have shared a space with but have not added as a friend yet. And we made sending friend requests from inside a space possible.

Thanks for viewing!

Backyard grew and gained a lot of moment coming out of 2020 and going into 2021, so much so that we caught the eye of Discord. Backyard (& Ubiquity 6) was acquired by Discord in July of 2021 and the whole team now works there, continuing our mission of creating belonging.