Friendster

• 

  Friendster social media

• 

  Wireframing of friendster

• 

  Color Palette + Typography

Inspiration

We decided to combine gaming with social media in our Friendster web app, so we took design inspiration from several currently popular gaming sites (i.e., Twitch, Discord, and Backyard.co) and social media platforms (i.e., Facebook and Instagram). We noticed that many gaming apps are purple, so we chose to combine the original Friendster's green color scheme with the darker purple.

What it does

After a user creates a profile, the user is able to post pictures, videos, and live streams of games that they play. Users are able to engage with other users by following them and viewing, liking, and commenting on their content. There are two main functions of Friendster: streaming and gaming. Users can watch others' videos and live streams; as users build strong viewership, they can earn money. Friendster can act as a community gaming platform where friends gather to play a fun game chosen out of a wide selection under the gaming tab.

How we built it

To design our web application, we used the design software Figma. We compiled icons, pictures, and information from the web and inserted all the information onto our Figma project.

Challenges we ran into

In the beginning of the competition, we contemplated several ideas and had a difficult time settling on one idea. Once we decided on the app we wanted to redesign, it took countless hours going over the design. Every so often, a member would recognize an issue with our design and we would need to discuss how we would fix it. We challenged ourselves to look in the perspective of the users and went through our product several times to see if there was any confusion a user might have when navigating through the site.

Accomplishments that we're proud of

Some accomplishments we are proud of are the color schemes we chose for the design and how cohesive everything flowed together. It was our first time designing a web app, so it was a fun experience.

What we learned

Since the majority of us only had basic knowledge of design and Figma the whole process was considered to be a learning experience. We learned as a team on creating a color scheme, choosing typography, and making low to high fidelity mockups.

What's next for Friendster

We'll have to design the page that allows users to post pictures, videos, live streams, and other shareable content (represented by the plus sign icon on the top right corner). After further design and prototyping, the next step to develop and code the Friendster web app!

Built With

• figma