top of page
Social Space
Social Space is a 3D, stylized, casual game that teaches players how to practice safe social distancing while maintaining healthy relationships. You play as a young adult who visits the market each day to socialize and help the villagers who live and work there. Balancing the playable character's and other NPCs’ happiness levels with the risk of getting COVID-19, you must spend your limited time each day wisely to ensure the player makes it home happy and safe without contracting COVID or becoming too lonely.
I was the only designer on a team of five. My responsibilities included level design, UI/UX design, gameplay design, and quest and narrative design. This was a semester-long project that was part of my postgraduate studies at Abertay University during the Spring of 2022.
Platform: Windows/PC | Engine: Unreal | View on Itch.io
Information
Gameplay Footage
Core Mechanic
The player's distance from NPCs and the amount of time they spend with them both affect the player's risk level. This is communicated two ways, the first is this "risk line" between the player and NPCs and the second is the player's risk meter (see UI images). The line uses a stoplight system and changes from green, to yellow, to red the closer the player is to an NPC. I initially mocked this up in Photoshop but our technical artist did a fantastic job implementing the design.
Core Gameplay Loop Flowchart
Our gameplay loop was pretty straight forward, at the start of each day, you could choose to stay home or go out. If you stayed home, it would lower your risk level significantly but also your happiness to a degree. If you went out, you could talk to villagers and complete tasks to increase your happiness level, but had to be careful not to increase your risk too much. At the end of each day, your risk and happiness levels influenced your chances of contracting COVID or becoming depressed which could lead to a game over state. If you made it 14 days (a short pandemic, I know), you won.
Level Design
My level design process began with determining an approximate time period and setting for the game (i.e., circa 2020, somewhere in the UK). I then researched the types of vendors and stalls that might appear in a market like ours. I looked at everything from small-town farmers markets to massive bazaars for inspiration. When it came time to draw up a top-down schematic, I tried to remain cognizant of the flow of traffic through the market, how far apart each villager was, and the number and variation of stalls. We wanted it to look full and bustling but had to be careful about the scope of work for our artist. I indicated some potential sources for sounds in the scene and spaced them out to create some variance in the soundscape as players walk through the level. After getting approval from the team, I created a greybox in Unreal and sculpted the surrounding terrain. Once initial assets (stall and character) and our MVP were available, it became clear that we needed to increase the spacing of the assets in the level to create ample space for players to distance themselves from others. Once we were happy with the spacing, I went through and replaced all remaining placeholder assets in an initial design pass. Then our 3D artist came through and did an art pass to add more detail. Unfortunately, she didn’t have time to make the assets I had planned for the corners of the market (stage and bird cages), but they were low priority. I would have loved to design more of this town, but we kept the scope small on purpose.
User Interface Design
Designing the UI for this game was challenging. We wanted something minimal to match the black and white aesthetic but modern enough that it felt like it fit a game made in 2022. We wanted fonts that fit the comic book style created by our shader but were still highly legible. We wanted to display a lot of information, but in a clean way that didn’t obscure too much of the screen. I researched a number of styles and options before settling on glass morphism. I liked its sleek, minimalist feel and thought that would match the tone of our game well. Using color so sparingly also made it easier to highlight the information we really wanted players to pay attention to. To make the UI feel like it did not take up as much space as it actually did, I experimented with various levels of transparency and blur (the timer is darker in the final mockup because we couldn't add Unreal's blur effect to non-rectangular shapes). I created the graphics in Illustrator but then mocked up the functionality in Adobe XD, so it was easy to demonstrate my ideas to the team and iterate quickly before actually implementing anything. It took several rounds of revisions (not all pictured here), especially on the main UI elements like the happiness and risk meters, but I'm happy with how it turned out. Of course, the HUD was not the only UI I had to create, I just wanted to illustrate my iterative workflow. I also made the start menu, pause menu, COVID FAQ, settings menu, and end of day UI. I also implemented, animated, and created all the logic for each of those interfaces. The end of day UI was by far the most difficult because of the sheer amount of logic I had to add using Unreal’s Blueprint system to dynamically change what text, buttons, and animations display based on all the possible outcomes (see gameplay video).
Social Space Logo
I designed the Social Space logo to incorporate the dotted risk line from the core mechanic. I used a comic-style font with a hard outline to match the style created by our art assets and shader and added a little face to the 'o' in the same style as our characters to bring a more personal touch to an otherwise fairly basic logo.
Gameplay Footage
Core Mechanic
The player's distance from NPCs and the amount of time they spend with them both affect the player's risk level. This is communicated two ways, the first is this "risk line" between the player and NPCs and the second is the player's risk meter (see UI images). The line uses a stoplight system and changes from green, to yellow, to red the closer the player is to an NPC. I initially mocked this up in Photoshop but our technical artist did a fantastic job implementing the design.
Core Gameplay Loop Flowchart
Our gameplay loop was pretty straight forward, at the start of each day, you could choose to stay home or go out. If you stayed home, it would lower your risk level significantly but also your happiness to a degree. If you went out, you could talk to villagers and complete tasks to increase your happiness level, but had to be careful not to increase your risk too much. At the end of each day, your risk and happiness levels influenced your chances of contracting COVID or becoming depressed which could lead to a game over state. If you made it 14 days (a short pandemic, I know), you won.
Level Design
My level design process began with determining an approximate time period and setting for the game (i.e., circa 2020, somewhere in the UK). I then researched the types of vendors and stalls that might appear in a market like ours. I looked at everything from small-town farmers markets to massive bazaars for inspiration. When it came time to draw up a top-down schematic, I tried to remain cognizant of the flow of traffic through the market, how far apart each villager was, and the number and variation of stalls. We wanted it to look full and bustling but had to be careful about the scope of work for our artist. I indicated some potential sources for sounds in the scene and spaced them out to create some variance in the soundscape as players walk through the level. After getting approval from the team, I created a greybox in Unreal and sculpted the surrounding terrain. Once initial assets (stall and character) and our MVP were available, it became clear that we needed to increase the spacing of the assets in the level to create ample space for players to distance themselves from others. Once we were happy with the spacing, I went through and replaced all remaining placeholder assets in an initial design pass. Then our 3D artist came through and did an art pass to add more detail. Unfortunately, she didn’t have time to make the assets I had planned for the corners of the market (stage and bird cages), but they were low priority. I would have loved to design more of this town, but we kept the scope small on purpose.
User Interface Design
Designing the UI for this game was challenging. We wanted something minimal to match the black and white aesthetic but modern enough that it felt like it fit a game made in 2022. We wanted fonts that fit the comic book style created by our shader but were still highly legible. We wanted to display a lot of information, but in a clean way that didn’t obscure too much of the screen. I researched a number of styles and options before settling on glass morphism. I liked its sleek, minimalist feel and thought that would match the tone of our game well. Using color so sparingly also made it easier to highlight the information we really wanted players to pay attention to. To make the UI feel like it did not take up as much space as it actually did, I experimented with various levels of transparency and blur (the timer is darker in the final mockup because we couldn't add Unreal's blur effect to non-rectangular shapes). I created the graphics in Illustrator but then mocked up the functionality in Adobe XD, so it was easy to demonstrate my ideas to the team and iterate quickly before actually implementing anything. It took several rounds of revisions (not all pictured here), especially on the main UI elements like the happiness and risk meters, but I'm happy with how it turned out. Of course, the HUD was not the only UI I had to create, I just wanted to illustrate my iterative workflow. I also made the start menu, pause menu, COVID FAQ, settings menu, and end of day UI. I also implemented, animated, and created all the logic for each of those interfaces. The end of day UI was by far the most difficult because of the sheer amount of logic I had to add using Unreal’s Blueprint system to dynamically change what text, buttons, and animations display based on all the possible outcomes (see gameplay video).
Social Space Logo
I designed the Social Space logo to incorporate the dotted risk line from the core mechanic. I used a comic-style font with a hard outline to match the style created by our art assets and shader and added a little face to the 'o' in the same style as our characters to bring a more personal touch to an otherwise fairly basic logo.
Gameplay Footage
Core Mechanic
The player's distance from NPCs and the amount of time they spend with them both affect the player's risk level. This is communicated two ways, the first is this "risk line" between the player and NPCs and the second is the player's risk meter (see UI images). The line uses a stoplight system and changes from green, to yellow, to red the closer the player is to an NPC. I initially mocked this up in Photoshop but our technical artist did a fantastic job implementing the design.
Core Gameplay Loop Flowchart
Our gameplay loop was pretty straight forward, at the start of each day, you could choose to stay home or go out. If you stayed home, it would lower your risk level significantly but also your happiness to a degree. If you went out, you could talk to villagers and complete tasks to increase your happiness level, but had to be careful not to increase your risk too much. At the end of each day, your risk and happiness levels influenced your chances of contracting COVID or becoming depressed which could lead to a game over state. If you made it 14 days (a short pandemic, I know), you won.
Level Design
My level design process began with determining an approximate time period and setting for the game (i.e., circa 2020, somewhere in the UK). I then researched the types of vendors and stalls that might appear in a market like ours. I looked at everything from small-town farmers markets to massive bazaars for inspiration. When it came time to draw up a top-down schematic, I tried to remain cognizant of the flow of traffic through the market, how far apart each villager was, and the number and variation of stalls. We wanted it to look full and bustling but had to be careful about the scope of work for our artist. I indicated some potential sources for sounds in the scene and spaced them out to create some variance in the soundscape as players walk through the level. After getting approval from the team, I created a greybox in Unreal and sculpted the surrounding terrain. Once initial assets (stall and character) and our MVP were available, it became clear that we needed to increase the spacing of the assets in the level to create ample space for players to distance themselves from others. Once we were happy with the spacing, I went through and replaced all remaining placeholder assets in an initial design pass. Then our 3D artist came through and did an art pass to add more detail. Unfortunately, she didn’t have time to make the assets I had planned for the corners of the market (stage and bird cages), but they were low priority. I would have loved to design more of this town, but we kept the scope small on purpose.
User Interface Design
Designing the UI for this game was challenging. We wanted something minimal to match the black and white aesthetic but modern enough that it felt like it fit a game made in 2022. We wanted fonts that fit the comic book style created by our shader but were still highly legible. We wanted to display a lot of information, but in a clean way that didn’t obscure too much of the screen. I researched a number of styles and options before settling on glass morphism. I liked its sleek, minimalist feel and thought that would match the tone of our game well. Using color so sparingly also made it easier to highlight the information we really wanted players to pay attention to. To make the UI feel like it did not take up as much space as it actually did, I experimented with various levels of transparency and blur (the timer is darker in the final mockup because we couldn't add Unreal's blur effect to non-rectangular shapes). I created the graphics in Illustrator but then mocked up the functionality in Adobe XD, so it was easy to demonstrate my ideas to the team and iterate quickly before actually implementing anything. It took several rounds of revisions (not all pictured here), especially on the main UI elements like the happiness and risk meters, but I'm happy with how it turned out. Of course, the HUD was not the only UI I had to create, I just wanted to illustrate my iterative workflow. I also made the start menu, pause menu, COVID FAQ, settings menu, and end of day UI. I also implemented, animated, and created all the logic for each of those interfaces. The end of day UI was by far the most difficult because of the sheer amount of logic I had to add using Unreal’s Blueprint system to dynamically change what text, buttons, and animations display based on all the possible outcomes (see gameplay video).
Social Space Logo
I designed the Social Space logo to incorporate the dotted risk line from the core mechanic. I used a comic-style font with a hard outline to match the style created by our art assets and shader and added a little face to the 'o' in the same style as our characters to bring a more personal touch to an otherwise fairly basic logo.
Gameplay Footage
Core Mechanic
The player's distance from NPCs and the amount of time they spend with them both affect the player's risk level. This is communicated two ways, the first is this "risk line" between the player and NPCs and the second is the player's risk meter (see UI images). The line uses a stoplight system and changes from green, to yellow, to red the closer the player is to an NPC. I initially mocked this up in Photoshop but our technical artist did a fantastic job implementing the design.
Core Gameplay Loop Flowchart
Our gameplay loop was pretty straight forward, at the start of each day, you could choose to stay home or go out. If you stayed home, it would lower your risk level significantly but also your happiness to a degree. If you went out, you could talk to villagers and complete tasks to increase your happiness level, but had to be careful not to increase your risk too much. At the end of each day, your risk and happiness levels influenced your chances of contracting COVID or becoming depressed which could lead to a game over state. If you made it 14 days (a short pandemic, I know), you won.
Level Design
My level design process began with determining an approximate time period and setting for the game (i.e., circa 2020, somewhere in the UK). I then researched the types of vendors and stalls that might appear in a market like ours. I looked at everything from small-town farmers markets to massive bazaars for inspiration. When it came time to draw up a top-down schematic, I tried to remain cognizant of the flow of traffic through the market, how far apart each villager was, and the number and variation of stalls. We wanted it to look full and bustling but had to be careful about the scope of work for our artist. I indicated some potential sources for sounds in the scene and spaced them out to create some variance in the soundscape as players walk through the level. After getting approval from the team, I created a greybox in Unreal and sculpted the surrounding terrain. Once initial assets (stall and character) and our MVP were available, it became clear that we needed to increase the spacing of the assets in the level to create ample space for players to distance themselves from others. Once we were happy with the spacing, I went through and replaced all remaining placeholder assets in an initial design pass. Then our 3D artist came through and did an art pass to add more detail. Unfortunately, she didn’t have time to make the assets I had planned for the corners of the market (stage and bird cages), but they were low priority. I would have loved to design more of this town, but we kept the scope small on purpose.
User Interface Design
Designing the UI for this game was challenging. We wanted something minimal to match the black and white aesthetic but modern enough that it felt like it fit a game made in 2022. We wanted fonts that fit the comic book style created by our shader but were still highly legible. We wanted to display a lot of information, but in a clean way that didn’t obscure too much of the screen. I researched a number of styles and options before settling on glass morphism. I liked its sleek, minimalist feel and thought that would match the tone of our game well. Using color so sparingly also made it easier to highlight the information we really wanted players to pay attention to. To make the UI feel like it did not take up as much space as it actually did, I experimented with various levels of transparency and blur (the timer is darker in the final mockup because we couldn't add Unreal's blur effect to non-rectangular shapes). I created the graphics in Illustrator but then mocked up the functionality in Adobe XD, so it was easy to demonstrate my ideas to the team and iterate quickly before actually implementing anything. It took several rounds of revisions (not all pictured here), especially on the main UI elements like the happiness and risk meters, but I'm happy with how it turned out. Of course, the HUD was not the only UI I had to create, I just wanted to illustrate my iterative workflow. I also made the start menu, pause menu, COVID FAQ, settings menu, and end of day UI. I also implemented, animated, and created all the logic for each of those interfaces. The end of day UI was by far the most difficult because of the sheer amount of logic I had to add using Unreal’s Blueprint system to dynamically change what text, buttons, and animations display based on all the possible outcomes (see gameplay video).
Social Space Logo
I designed the Social Space logo to incorporate the dotted risk line from the core mechanic. I used a comic-style font with a hard outline to match the style created by our art assets and shader and added a little face to the 'o' in the same style as our characters to bring a more personal touch to an otherwise fairly basic logo.
Gameplay Footage
Core Mechanic
The player's distance from NPCs and the amount of time they spend with them both affect the player's risk level. This is communicated two ways, the first is this "risk line" between the player and NPCs and the second is the player's risk meter (see UI images). The line uses a stoplight system and changes from green, to yellow, to red the closer the player is to an NPC. I initially mocked this up in Photoshop but our technical artist did a fantastic job implementing the design.
Core Gameplay Loop Flowchart
Our gameplay loop was pretty straight forward, at the start of each day, you could choose to stay home or go out. If you stayed home, it would lower your risk level significantly but also your happiness to a degree. If you went out, you could talk to villagers and complete tasks to increase your happiness level, but had to be careful not to increase your risk too much. At the end of each day, your risk and happiness levels influenced your chances of contracting COVID or becoming depressed which could lead to a game over state. If you made it 14 days (a short pandemic, I know), you won.
Level Design
My level design process began with determining an approximate time period and setting for the game (i.e., circa 2020, somewhere in the UK). I then researched the types of vendors and stalls that might appear in a market like ours. I looked at everything from small-town farmers markets to massive bazaars for inspiration. When it came time to draw up a top-down schematic, I tried to remain cognizant of the flow of traffic through the market, how far apart each villager was, and the number and variation of stalls. We wanted it to look full and bustling but had to be careful about the scope of work for our artist. I indicated some potential sources for sounds in the scene and spaced them out to create some variance in the soundscape as players walk through the level. After getting approval from the team, I created a greybox in Unreal and sculpted the surrounding terrain. Once initial assets (stall and character) and our MVP were available, it became clear that we needed to increase the spacing of the assets in the level to create ample space for players to distance themselves from others. Once we were happy with the spacing, I went through and replaced all remaining placeholder assets in an initial design pass. Then our 3D artist came through and did an art pass to add more detail. Unfortunately, she didn’t have time to make the assets I had planned for the corners of the market (stage and bird cages), but they were low priority. I would have loved to design more of this town, but we kept the scope small on purpose.
User Interface Design
Designing the UI for this game was challenging. We wanted something minimal to match the black and white aesthetic but modern enough that it felt like it fit a game made in 2022. We wanted fonts that fit the comic book style created by our shader but were still highly legible. We wanted to display a lot of information, but in a clean way that didn’t obscure too much of the screen. I researched a number of styles and options before settling on glass morphism. I liked its sleek, minimalist feel and thought that would match the tone of our game well. Using color so sparingly also made it easier to highlight the information we really wanted players to pay attention to. To make the UI feel like it did not take up as much space as it actually did, I experimented with various levels of transparency and blur (the timer is darker in the final mockup because we couldn't add Unreal's blur effect to non-rectangular shapes). I created the graphics in Illustrator but then mocked up the functionality in Adobe XD, so it was easy to demonstrate my ideas to the team and iterate quickly before actually implementing anything. It took several rounds of revisions (not all pictured here), especially on the main UI elements like the happiness and risk meters, but I'm happy with how it turned out. Of course, the HUD was not the only UI I had to create, I just wanted to illustrate my iterative workflow. I also made the start menu, pause menu, COVID FAQ, settings menu, and end of day UI. I also implemented, animated, and created all the logic for each of those interfaces. The end of day UI was by far the most difficult because of the sheer amount of logic I had to add using Unreal’s Blueprint system to dynamically change what text, buttons, and animations display based on all the possible outcomes (see gameplay video).
Social Space Logo
I designed the Social Space logo to incorporate the dotted risk line from the core mechanic. I used a comic-style font with a hard outline to match the style created by our art assets and shader and added a little face to the 'o' in the same style as our characters to bring a more personal touch to an otherwise fairly basic logo.
Gallery
bottom of page