Frame1

Making friends in online games that have a competitive edge can be daunting. Often negative experiences and interactions are the norm in game lobbies. Frame1 is here to solve that problem.

The Overall Concept

This project is an exploration of an app concept that I've been thinking through for a while. As someone who is passionate about gaming, I enjoy spending time playing games with my friends. However, meeting and playing with strangers online has always been a mixed bag. You never really know what you're doing to get.

Common trends in online lobbies are associated with toxicity and overall negative interactions. Sometimes, as a non-competitive player, you would want to enjoy playing a game without the added on pressure of dealing with teammates who expect very dedicated gameplay.

Establishing Functional And Non-Functional Requirements


Before drawing up any mockups or wireframes, I had to think about what the app should be able to do. Pulling on my Com-Sci Background, my first thoughts centered around FUNCTIONAL and NON-FUNCTIONAL requirements. Below is the list of basic functional requirements I drew up for the App Concept

My overall goal is to create a fun social experience that removes the awkwardness and occasional toxicity centered around the online gaming environment when making friends online.

Once I had the functional requirements set up, the next step was to begin working on some basic sketches and mockups.

Perfection is NOT the goal


As I worked on developing the concept, the initial feelings that I had in mind was not to make a perfect system, but create one that is appealing and useful to others and myself too. That having been said, all good apps have a cool logo. So I kicked things off by creating one!

The FRAME1 Logo

User Personas

The most fun parts of any UX Project for me will always be putting together User Personas. It allows for a quick glimpse into what the ideal user of a product can look like! Understandably, these can also be informed by bias, and it is something to be cognizant of when working on any project. For this project, I have created a set of 3 User Personas. Below is an example of one of the personas I had put together. Naturally the main target demographic would be people who play video games as a hobby. This is one trait all the personas have shared amongst them.

Personas are a great tool for understanding what the ideal user could look like! Ideal mustn't imply perfect though.

The target demographic for Frame1 is young adults and adults alike that enjoy playing videogames. Aged 20 and up, who want to play video games with their friends and meet new people along the way.

Wireframes and Sketches

Now to handle the layout. Initially, I wasn't too sure what I wanted things to look like. So I had to create a mood-board that would then help to inspire my design choices. This is what those mockups and sketches look like, all of which were put together using Figma:

Some Screens And Rendered Mockups

After a lot sketching and tweaking, I moved onto creating some higher fidelity mockups of the application, just as a way of visualising what the app could possibly look like on a phone screen. Much like toe wireframes, these were also created in Figma. There's the Main Page, News Feed, User Profile and Friend Profile in these mockups.

FRAME1 is a work in progress and there are more concepts I would like to explore and flesh out. The application is meant to have a Party Request feature, that would allow users to look up any players actively seeking people to play with. The next step of the FRAME1 project is to create more visualizations for what those features should look like, and then gather user feedback to gauge how useful the overall concept could be!

This was a challlenging and insightful exercise in designing mockups using Figma! I'm excited to push this project further beyond! I've taken the liberty of creating custom visual mockups using Spline3D to render out some scenes of the phone too!


Check more works

Like what you see?

Let's connect.

Today.