PHASE 2: Project Prototyping & Development

After the formative sharing on Week 12, I continue to make changes and refine my project based on the feedbacks that I have received. Due to time constraint, I will be focusing on developing the main content of this project. Other side contents, such as campaign planning, pre-campaign and post-campaign contents, will be further expanded during the semester break until the next semester.

Feedback(s) I received from the formative sharing with my peers:

1. Will it just be a chat simulator? If yes, how will you ensure that people will complete all of the chats with different characters without it being repetitive?
2. Consider having 'normal' characters to make it more fun and challenging for users to decide.
3. Lack of interactivity, people might just try chatting with only one character and stop after that.
4. It is understandable that you want to make use of Discord's UI designs into the chat simulator, but current design doesn't look too promising. Too much empty space and the usage of the mobile phone mock-up is a bit confusing when this is supposed to be on desktop device.

Action plan(s):

• Refine the content ideation, implement more interactivity in the chat simulator such as gamified experience with a little bit of story narrative.
• Adding characters that is considered as 'green flag', to add more variety.
• Refine the UI designs, align with the refined content ideation.

I will be documenting my progress and experimentations of my listed action plans below.

/  /  /

Content Ideation

Objective:
To enhance engagement by refining the content ideation from the previous phase. This involves introducing more interactivity with a gamified experience that encourages user participation, along with incorporating a light story narrative to make the overall experience more immersive. By adding these elements, the content aims to captivate users while also making it fun and educational.

The initial idea of the chat simulator is to let users choose any characters to 'talk' to them, and promptly ask them whether they are still interested in them or not. Whether user choose yes or no, it will still let users know that the said character is a red flag. After that, users will unlock their profiles which explain what type of red flags they are and their descriptions. If they finished talking to all characters, they will get a reward such as avatar decorations.

As stated from one of the feedbacks that I've received, the current content is not solid enough to make users to be engaged without feeling bored of the repetitiveness. In order to address this, I decide to refine the chat simulator as I have mentioned before.

# Refinement

I started with creating a story narrative for the chat simulator. Having a story narrative lets user to imagine themselves in the story easily and immerse themselves in the said situation, which could make users to be more interested in the chat simulator. With that, I came up with a story synopsis.

This story synopsis will be main plot of the chat simulator. Users will be offered a chance to work at Discord's fictional dating agency called 'Date Dash' as an evaluator. Evaluator's job is to interview the applicants, and make sure to not accept any 'red flags' applicants. If users made any wrong decisions, their KPI score will decrease, which will eventually result in termination from their role at the agency. 

By having this story narrative, users will have the sense of responsibility while interacting with the chat simulator. This also aligns with how users use Discord generally, which is my target audience. Discord users are familiar with the moderation tools to manage their own experiences, and I would like to bring similar experience to this chat simulator as well - to let them moderate the dating applicants in 'Date Dash'.

Next, I need to create main interaction mechanics for the chat simulator based on the story synopsis. In order to do so, I decide to research on some popular games in the 'job simulator' genre. I have chosen 3 game titles as my references (and also my benchmarks) which is:

• Papers, Please
• Death & Taxes
• Mind Scanner

What I have observed from these game titles is that they have a lot of similarities:

1. Supervisor Figure: Each game titles have a higher authority that oversees player's work. These figures frequently provide feedback, issue new rules, and evaluate their performance.
2. Task-Oriented Mechanics: The core gameplay revolves around completing repetitive tasks or performing a job under specific rules.
3. Performance System: Each game features a performance evaluation system that tracks player's decisions, with penalties for mistakes.
4. Document/Information Verification: Players must carefully review documents or data to determine whether individuals meet the criteria.

With that, I finally finalize the main mechanics for the chat simulator. These includes:

• Supervisor: A supervisor called Clyde, who is responsible to teach users how the job works.
• Discord Chat: Where users will be able to interview the dating applicants with dialog options.
• Discord Video Chat: Where users can ask the dating applicants to be in video chat to see how they actually look like.
• Red Flag Notes: Notes full of information about each red flags, to help users to understand what they are supposed to take note of while interviewing and observing the dating applicants.
• Checklist: A checklist to help users to monitor and track any potential red flags in each applicant.
• Decision Making: Users will have to decide whether to accept or reject each applicants based on the gathered information.
• Evaluation Report Card: The report card will display whether user's decision is correct or wrong, and updates their KPI score.

These mechanics is solid and will be sufficient for the first level. Since I plan to have 3 levels in total, I have some concern that it would be a little too repetitive. Hence, I believe there would be opportunities to introduce new mechanics after the first level to keep it more fun and challenging for users. This can be expanded and further worked on during the semester break.

/  /  /

UI Design & Layout

Objective:
To enhance the overall user experience by effectively utilizing empty space to create a clean and organized interface. Additionally, the updated design aligns with the project's art direction, ensuring a cohesive and visually appealing user experience that complements the aesthetic and thematic elements of the chat simulator.

I initially wanted to stick with Discord's brand identity when designing the UI design and layout, because I thought that it would be better to make use of the brand's existing design to ensure that it is consistent throughout their app design. However, I received feedbacks from my peers that it doesn't working quite well and it made them feel confuse with the UI design. I continue to discuss with them in order to find out more what they are the specific parts of the UI design that is the main problem.

Main UI Layout

I experimented by getting rid of the mobile phone mockup in the UI with different styles, and it looked slightly better in terms of how it is no longer confusing for users. However, there is still a lot of unnecessary empty space even if there's an environmental wallpaper.

I decide to discard this layout and to start creating a new one that is more aligned with the story synopsis and art direction that has already been chosen from my last blog post, which is pixel art.

# Experimentation 1

My first attempt is to create the UI design and layout by drawing in pixel art style itself.

However, it doesn't look visually appealing. This is because the bit size of the pixel is too big, which made it look a little bit chunky and out of place. I can address this problem by reducing the bit size of the pixel through resizing to bigger canvas, but it will definitely take a lot of time from my side to draw pixel by pixel in a big canvas.

# Experimentation 2 (Chosen Design)

So, I made another attempt by trying to recreate similar aesthetic in vector style instead, by using blocky shapes and outlines. 

This looks so much better compared to the previous attempt as it looked more clean and consistent. This is also easier for me in terms of designing it quickly compared to the previous method. From here, I started to experiment with the color palette and the details of each windows.

Individual UI Designs

Then, I continue to design individual UI in details based on the chosen design, with different states as well. 

/  /  /

Character & Icon Designs

Objective:
To further develop and refine character designs for the project, ensuring each character's traits and appearance align together in the overall concept. This involves not only expanding the variety of characters but also polishing their visual details to ensure consistency and recognizability. Each design should clearly reflect whether a character is a red flag or green flag within the context of the e-dating theme, emphasizing personality traits through their visual representation.

Character Designs & Animation

As part of this progress, I focused on creating more character designs for the first level, and animated one of the characters as an example. The characters are designed in variety forms - some could be animals, robots, fruits, or even slimes. This is to represent Discord community as a whole too, because they are know to welcome anybody from different backgrounds.

The animation serves as a visual benchmark for the final outcome, demonstrating how the characters will move and interact within the chat simulator. This animation captures the intended style, helping to visualize how the characters will ultimately fit into the chat simulator's user interface and flow.

Each characters will be animated, for scenarios where they will be in video chat inside Date Dash. The animation should be minimal and looped. More character expressions will be expanded soon during the semester break.

Since I have 3 levels, I will roughly have at least 15 characters in total. This is not the confirmed yet, as I am not sure whether I could actually manage it or not. This could be changed in the future, just in case if there's any inconvenience happens. Nevertheless, I will aim to create 15 characters for now since I already have 6 characters completed now.

Icon Designs

In addition to character design, I worked on the development of simplified pixel art icons. While the characters use detailed pixel art to express their personality and traits, the icons are more minimalistic and use only one color to maintain simplicity and clarity. These icons are designed to complement the 'red flag' traits while providing a streamlined visual experience, ensuring that they don’t distract from the overall UI.

The challenge lies in keeping the icons consistent with the overall pixel art style, while reducing them to a simplified form that still conveys their purpose. This design approach ensures that the icons remain visually distinct yet harmonious with the clean UI. It is also hard to ensure that the icon align with what they're supposed to represent. Hence, I make sure to ask my peers for their opinions about the icons and whether they can associate it with what they're supposed to represent.

/  /  /

What's Next?

Above is briefly my next steps for my project. I aim to get most of the visuals for the characters and wallpapers done before next semester starts. I received feedbacks from the industry guests that they suggest to bring forward the technical development during semester break as well. I will consider that into my time management and try to make it work.

/  /  /

All Of The Links

Figma Hi-Fidelity Prototype: LINK

Design & Technical Plan Deck: LINK

Pinterest Moodboard: LINK

Gantt Chart: LINK

/  /  /

Self-Reflection:

During this phase of the project, several aspects worked particularly well. The pixel art style for both characters and icons maintained a cohesive visual aesthetic, which helped unify the overall look of the project. The decision to animate one of the characters provided valuable insight into how the characters would behave in the final outcome, making it easier to visualize the interactions within the interface. The simplicity of the icons also contributed positively, as their single-color design kept the UI clean and free from unnecessary visual noise.

However, there are areas that could be improved. While the characters’ designs are progressing well, the animation process took a little bit longer than anticipated, suggesting the need for a more streamlined workflow in future. Additionally, one area for improvement is how I approached the initial UI layout structure. While I focused on making it visually engaging, some sections felt crowded, and users had difficulty understanding certain features at first glance. This could be avoided at the first place if I pay closer attention to the user flow in order to keep it smooth and intuitive.

Moving forward, I would likely start the animation process earlier to avoid potential delays and explore more dynamic character expressions. I would also aim to refine the balance between interactivity and narrative, ensuring that neither overwhelms the other. Iterative design and feedback loops will be prioritized to continuously refine both the user experience and story structure. I also plan to start my technical development as soon as I can so that I can avoid any unwanted inconvenience later on. Overall, this project has shown the importance of balancing aesthetic consistency with functional design, and I will take these lessons into next phase.

/  /  /

Annotated Bibliography:

Full Game Playthroughs (2023). Papers, Please [2013] | Full Game Playthrough (No Commentary). YouTube. Available at: https://www.youtube.com/watch?v=HXsyFRPSR70&t=825s .

This video provides a full playthrough of Papers, Please, a critically acclaimed indie game developed by Lucas Pope. The playthrough showcases the core gameplay mechanics, which revolve around managing documents and making moral decisions in a dystopian setting. This source is useful for analyzing the game’s mechanics and design, especially for those researching how decisions affect narrative outcomes in simulation-style games.

xKKxXYx (2022). DEATH AND TAXES FULL GAMEPLAY WITH NO COMMENTARY. YouTube. Available at: https://www.youtube.com/watch?v=gVKToqv3fmk&t=1092s .

This video showcases a full playthrough of Death and Taxes, a narrative-driven simulation game developed by Placeholder Gameworks. The game places players in the role of a grim reaper deciding who lives and dies, with each choice influencing the world and story. The playthrough provides an in-depth look at the game's mechanics, decision trees, and consequences of the player’s actions.

Vault, A. (2021). Mind Scanners | Complete Gameplay Walkthrough - Moonrise Ending - Full Game | No Commentary. YouTube. Available at: https://www.youtube.com/watch?v=f_hpEsLFUcQ&t=2228s .

This video presents a complete gameplay walkthrough of Mind Scanners, a retro-futuristic simulation game developed by The Outer Zone. The game involves diagnosing and treating various patients in a dystopian society while balancing the player's moral and ethical responsibilities. It is particularly useful for comparing decision-making and moral dilemmas in games similar to Papers, Please and Death and Taxes.