Time: January 2025 — May 2025


Programs Used: Adobe Illustrator & Figma


Categories: Branding, UX Design & Illustration


Project Description: Streetopia is more than a virtual world, it's where physical and online connections happen. To help gamers who are 18+ to create new connections, this application would have gamers create new connections & meet people both online and real life. This project was solely inspired by Streetpass, the 3DS application that has the similar mechanics.

Time: January 2025 — May 2025


Programs Used: Adobe Illustrator & Figma


Categories: Branding, UX Design & Illustration


Project Description: Streetopia is more than a virtual world, it's where physical and online connections happen. To help gamers who are 18+ to create new connections, this application would have gamers create new connections & meet people both online and real life. This project was solely inspired by Streetpass, the 3DS application that has the similar mechanics.

The Research

The Primary Research

Primary research was done through a Google Form. It was spread through social media, such as Instagram and Discord. 77 respondents took the survey. Below are the demographics, opinions & concerns for virtual worlds.

Most users said they played Minecraft and ROBLOX, while others mentioned a variety of video games such as Club Penguin, Fantage, League of Legends, and Monster Hunter.

Most users said they played Minecraft and ROBLOX, while others mentioned a variety of video games such as Club Penguin, Fantage, League of Legends, and Monster Hunter.

Virtual worlds are engaging for users

  • Socializing

  • Experimentation

Worries

  • Big age gap

  • Excessive time in a virtual world

  • Internet Safety

Features users wanted:

  • Friends List

  • Interactive Features

  • Achievements

  • Creating Avatars

  • Little apartments for users to decorate

Virtual Worlds Research

When starting on this project, we had to do research as virtual worlds are & some specific examples of virtual worlds are. If someone asked us what was a virtual world, we would explain it as a "computer-simulated world in which people can create their own avatars and communicate with others". Virtual worlds also give the opportunity to connect with each other virtually.


In addition to that, virtual worlds are used as an coping mechanism for people, people find communities in virtual worlds & beneficial for therapy and rehabilitation. Virtual worlds also have consequences, which can be a risk of gaming addiction disorder, limited social interaction for physical connections and possible chance of getting catfished in a virtual world.

Most users said they played Minecraft and ROBLOX, while others mentioned a variety of video games such as Club Penguin, Fantage, League of Legends, and Monster Hunter.

The Primary Research

Primary research was done through a Google Form. It was spread through social media, such as Instagram and Discord. 77 respondents took the survey. Below are the demographics, opinions & concerns for virtual worlds.

Virtual worlds are engaging for users

  • Socializing

  • Experimentation

Worries

  • Big age gap

  • Excessive time in a virtual world

  • Internet Safety

Features users wanted:

  • Friends List

  • Interactive Features

  • Achievements

  • Creating Avatars

  • Little apartments for users to decorate

The Process

Branding Brainstorming

Before designing the branding for Streetopia, we wanted to consider our audience. Most of our audience is over 18+, so we had to consider what would they be interested in for a virtual world. Streetpass (the 3DS application) was an inspiration for those who grew up in the 2010's. Because of that, we wanted to give tribute to the Streetpass branding.. We also had to add in our own flair as we would have to worry about copyright.

Wireframes

Before designing the wireframe for Streetopia, we had to consider our audiences' preferences & our experiences in virtual worlds. We sketched some potential wireframes, such as the plaza (home screen), shops, achievements & games that people would be interested in. As much as we wanted to include everyone's preferences, we also had to consider what other features that would make Streetopia stand out to other virtual worlds

Branding Brainstorming: Moodboard, Sketching, Font Ideas & Color Palette

Some Sketches for Streetopia

The Prototype

Wireframe Flow

Wireframes

Before designing the wireframe for Streetopia, we had to consider our audiences' preferences & our experiences in virtual worlds. We sketched some potential wireframes, such as the plaza (home screen), shops, achievements & games that people would be interested in. As much as we wanted to include everyone's preferences, we also had to consider what other features that would make Streetopia stand out to other virtual worlds

Final Branding

Fonts: Sofia Soft Pro & Greycliff CF

Logo Color Hex Codes:

#3DB54A, #DCEDCD, #224F27

Main Background: #B9FFC1, #E5FF51

Final Branding

Fonts: Sofia Soft Pro & Greycliff CF

Logo Color Hex Codes:

#3DB54A, #DCEDCD, #224F27

Main Background: #B9FFC1, #E5FF51

The Prototype

Final Branding

Fonts: Sofia Soft Pro & Greycliff CF

Logo Color Hex Codes:

#3DB54A, #DCEDCD, #224F27

Main Background: #B9FFC1, #E5FF51

Create a free website with Framer, the website builder loved by startups, designers and agencies.