Facebook Groups

Share what you care about with the people who care about it most. From wireframes to design, I worked on this project for Facebook in order to promote their app Facebook Groups. Here's a part of the design development I created.

My first exploration was to create a website around stories of different groups. The idea was to make a layout similar to a lifestyle blog exposing the content of what could be share in the facebook groups application.

The dots are used to display different stories on a vertical scrolling page. Once you click on getting started, you have a panel sliding in with videos about how to use the product.

Layout variation

Another idea was to invite the user in a playful interactive website where you were able to slide images or videos of different types of groups till the discovery of the Facebook Groups logotype.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Layout variation

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Groups exist when people share common interests. To represent this bond between people, I wanted to explore a mind map design showcasing various groups by dots of different colors around the content.

  • gallery-image
  • gallery-image
  • gallery-image

Design development

After all the previous research and experimentations, I tried to keep the best ideas in a simple layout. A header with an image or video of groups of people to bring expose first what the application is about. A second part with a scrollable content view of a group conversation. A third part with the app interface and some informations about how to get started. The last part contain the download links.

Motion tests

Layout variation

Another idea was to use circles as a way to isolate faces of people on a group of friends then use them as a profile picture in the facebook groups interface.

The final website design is using a simple structure, the first part is a carousel with images of groups. The second is a carousel of the main features of the application. The last is about the download part.