top of page
Search

L - 5, UI-UX: Technology in Human Context

  • Writer: Muhsin Manaf
    Muhsin Manaf
  • Sep 8, 2024
  • 12 min read

Updated: Sep 12, 2024

Brief: Create an engaging gamified experience for management students to understand

customer behavior through a jewelry store scenario. The game will feature a helping

avatar (the owner) guiding the player (sales manager) through various customer service

scenarios. Each correct answer will earn the player rewards. Wrong answers will provide

constructive feedback, helping players learn from their choices.


Final Output:




Goals and Objectives for the Gamification project based on Jewellery goals

The primary goal of the gamification project based on jewelry is to enhance user engagement by increasing interaction and time spent on the platform, fostering a deeper connection with the brand through interactive elements. The project aims to educate users about different types of jewelry, their history, and craftsmanship, presenting this information in an engaging manner. Promoting brand loyalty is another key goal, achieved by creating memorable and enjoyable experiences that encourage repeat visits and long-term retention. Additionally, the project seeks to drive sales and conversions by highlighting special offers, discounts, and new arrivals through interactive calls to action. Gathering user data is also crucial, as it helps to understand user preferences and behaviors, allowing for tailored marketing and product development.



Objectives

To achieve these goals, the project will focus on designing an intuitive and visually appealing interface, incorporating quizzes, challenges, and games related to jewelry knowledge, and including a rewards system with points, badges, and leaderboards. Educational content will be developed using multimedia elements to enhance learning, and social interaction will be encouraged by allowing users to share achievements on social media and interact within a community space. The integration of analytics tools will enable tracking and analyzing user data, ensuring the continuous refinement of the gamification strategy. Seamless integration of gamified elements into the existing platform, maintaining the brand’s aesthetic and tone, and promoting new collections and offers will be prioritized to ensure a cohesive and engaging user experience.




Target Audience: Identify who will use the gamified system (e.g., age group, interests, behavior). 

The target audience for the gamified jewelry project consists of students aged 18+ who are enrolled in Business Management courses. These students have a keen interest in fashion, design, and digital innovation, and are looking to deepen their understanding of UI/UX principles through practical applications. They are tech-savvy and regularly engage with interactive online platforms, making them well-suited for a gamified learning experience. These students exhibit behaviors such as frequent use of social media, a strong inclination towards visual and interactive learning, and a preference for hands-on, project-based assignments that allow them to apply theoretical knowledge in creative ways. They are motivated by challenges, rewards, and the opportunity to showcase their skills, making a gamified system an ideal approach to enhance their learning and engagement with the subject matter.




Existing Solutions: Research existing gamification platforms and similar applications.

Researching existing gamification platforms and similar applications reveals several innovative and successful examples that can provide valuable insights for the jewelry project. For instance, platforms like Duolingo and Kahoot! have effectively used gamification to enhance learning experiences by incorporating elements such as points, badges, leaderboards, and interactive quizzes. In the retail sector, Nike+ Run Club and Starbucks Rewards have successfully engaged users through gamified fitness challenges and loyalty programs, respectively. Additionally, jewelry-specific applications like Jewel Count and Jewellery Quiz have utilized gamification to educate users about different types of jewelry and their histories through engaging quizzes and interactive content. These examples demonstrate the potential of gamification to increase user engagement, promote learning, and drive user loyalty, providing a solid foundation for developing a similar system tailored to the jewelry project's objectives and target audience.



Strengths and Weaknesses: 

Analyzing the features, design, and user feedback of existing gamification platforms reveals several strengths and weaknesses that can inform the development of the jewellery project. Strengths include intuitive and visually appealing interfaces, as seen in platforms like Duolingo and Nike+ Run Club, which enhance user engagement and ease of use. The use of rewards systems, such as points, badges, and leaderboards, effectively motivates users and fosters a sense of achievement. Interactive and educational content, like the quizzes in Jewellery Quiz, successfully engages users and provides valuable learning experiences. However, some weaknesses also emerge, such as the potential for users to lose interest if the content becomes repetitive or if the rewards are not meaningful enough. Additionally, overly complex interfaces or excessive notifications, as noted in some user feedback for Kahoot!, can lead to user frustration and disengagement. Balancing these strengths and weaknesses is crucial for creating a gamified jewellery system that is both engaging and user-friendly, ensuring sustained user interest and satisfaction.




Game Mechanics: Research various game mechanics such as points, badges, leaderboards, challenges, and rewards.

Researching various game mechanics reveals a range of strategies that can effectively enhance user engagement and motivation. Points systems reward users for completing tasks and activities, providing a tangible measure of their progress and encouraging continued participation. Badges serve as visual symbols of achievement, recognizing users' accomplishments and providing a sense of pride and status. Leaderboards introduce a competitive element, allowing users to see how they rank against their peers, which can drive increased effort and participation. Challenges offer specific goals or tasks for users to complete, often with time constraints or specific criteria, adding excitement and focus to their activities. Rewards, whether in the form of virtual goods, discounts, or exclusive content, provide additional incentives for users to engage with the system. These game mechanics, when thoughtfully integrated, can create a dynamic and engaging user experience that fosters long-term engagement and satisfaction.


Motivation and Engagement: Understand how different gamification elements can motivate and engage users. 

Understanding how different gamification elements can motivate and engage users involves recognizing their impact on user behavior and satisfaction. Points systems drive motivation by providing immediate feedback and a measurable sense of accomplishment, encouraging users to keep progressing. Badges enhance engagement by visually representing achievements, which can boost users’ sense of pride and incentivize further participation. Leaderboards foster a competitive spirit, motivating users to improve their performance and stay active to climb the rankings. Challenges introduce specific goals and deadlines, creating a sense of urgency and purpose that keeps users focused and invested. Rewards, whether tangible or digital, offer additional incentives that appeal to users' desires for recognition and exclusive benefits. By leveraging these elements, gamification can transform routine activities into engaging experiences, making users more likely to stay committed and enthusiastic about their interactions.


Behavioral Psychology: Study on how game design principles can influence user behavior and interaction. 

Studying how game design principles influence user behavior and interaction reveals the powerful impact of behavioral psychology on engagement and motivation. Game design often incorporates elements like feedback loops, reinforcement schedules, and goal setting to shape user behavior. Immediate feedback, such as points or scores, helps users understand the consequences of their actions and reinforces their participation by providing a sense of accomplishment. Variable reinforcement schedules, where rewards are given at unpredictable intervals, keep users engaged by creating a sense of anticipation and excitement. Goal setting, through challenges and milestones, provides users with clear objectives and a roadmap for progress, fostering a sense of purpose and direction. These principles tap into intrinsic and extrinsic motivations, influencing users to engage more deeply, persist through difficulties, and continuously seek improvement. By applying these game design principles, systems can effectively guide user behavior, enhance interaction, and create a compelling and rewarding experience.


Game Style choosen for this Gamification project.

In this gamified experience, we are adopting the Telltale game style to create an immersive, narrative-driven learning environment. The gameplay will feature modern, elegant, and minimalistic design elements, ensuring a visually appealing and user-friendly experience. The storyline will unfold through engaging dialogues, decision-based scenarios, and real-time customer interactions, allowing players to take on the role of a sales manager in a jewelry store. The aesthetic will prioritize clean, sophisticated visuals, with sleek UI elements that mirror the refined elegance of a high-end jewelry store. Minimalistic design ensures that the focus remains on the gameplay and decision-making, while the smooth, polished interface reflects the premium nature of the jewelry business. This approach enhances user experience, encouraging players to focus on key learning objectives without unnecessary distractions.

Each customer interaction within the game will be presented in a streamlined and easy to navigate format, with minimalistic yet rich storytelling elements that drive the narrative. The choices players make will have consequences, offering rewards for correct decisions and constructive feedback for incorrect ones, all wrapped in a visually sophisticated and modern package. This fusion of narrative driven gameplay and minimalistic design creates an environment that is not only educational but also engaging and immersive for students.


I played these games to conduct live analysis and gain insights into user experiences.

1. Detroit: Become Human


UI Design:

  • Minimalistic and Contextual Interface: The UI in Detroit: Become Human is sleek and minimal, often fading into the background to keep the focus on the emotional depth of the narrative. The interactive prompts and dialogue options are seamlessly integrated into the environment, maintaining immersion without overwhelming the player.

  • Flowchart System: A unique flowchart system allows players to see the branching paths of their choices, offering visual feedback on the impact of their decisions. This encourages replayability and helps users track their progress without cluttering the main interface.

  • Dynamic HUD (Heads-Up Display): The HUD dynamically changes depending on the character's perspective, subtly indicating choices and consequences while keeping the interface clean and elegant.


UX Design:

  • Emotional Engagement through Choices: The UX focuses on emotional immersion, allowing players to deeply connect with the characters by making morally complex choices. The game’s design ensures that every decision feels consequential, drawing users into the narrative.

  • Adaptive Controls: The use of motion controls and contextual quick-time events (QTEs) create a seamless connection between the player and the character's actions, heightening engagement.

  • Branching Storylines and Replayability: The flowchart visualization of choices enhances the UX by promoting multiple playthroughs, as players are motivated to explore different story outcomes.


2. Until Dawn


UI Design:

  • Cinematic Presentation: Until Dawn features a UI that is deeply rooted in its cinematic style. The menus, character stats, and choice prompts are all designed to mimic a horror film aesthetic, contributing to a sense of tension and suspense.

  • Simple Decision-Making Interface: Choice-based decisions are presented in an uncluttered manner, often just two or three options that impact the flow of the story. This keeps the focus on the urgency of decisions, crucial in a horror setting.

  • Totem System: The totems, which offer glimpses of future events, are visually distinct and their interface is clean and straightforward, serving as a foreshadowing mechanic that subtly guides players without overwhelming them.


UX Design:

  • Interactive Drama Experience: The UX in Until Dawn emphasizes tension and unpredictability, allowing players to feel like they are part of an interactive horror movie. Each choice directly impacts the outcome, maintaining high stakes and player engagement.

  • Character Relationship Tracking: Players can track the characters' relationships and traits, but the game does this in an unobtrusive way, presenting these stats only when needed. This enhances immersion by allowing players to focus on the unfolding narrative.

  • Butterfly Effect System: The Butterfly Effect system in Until Dawn adds depth to the UX by letting players see the ripple effects of their decisions. The minimalist approach to showing these changes keeps the game experience fluid while emphasizing the weight of choices.


3. Heavy Rain


UI Design:

  • Diegetic Interface: In Heavy Rain, many of the interactive elements are integrated directly into the environment. The interface is minimalistic, often appearing as translucent text over the characters’ heads, giving the impression that the choices are part of the scene rather than external game elements.

  • Contextual Prompts and QTEs: The interface includes contextual prompts for actions and QTEs, which are essential for creating tension in crucial moments. These prompts are unobtrusive and often appear in the form of simple button symbols or directional arrows that match the game's subdued tone.

  • Character-Specific UI: Each character has a distinct UI style reflecting their mental state or personality, adding subtle depth to the interface and allowing players to better connect with the characters' internal struggles.


UX Design:

  • Emotional and Narrative Depth: The UX is centered on making players feel the emotional weight of their decisions. The game’s branching storyline ensures that every choice has an impact, creating a deep connection between the player and the narrative.

  • Immersion through QTEs and Realistic Interactions: The game’s frequent use of QTEs and motion-based interactions mirrors real-world tasks, drawing players further into the narrative by requiring physical involvement. These elements are intentionally designed to be easy to use, yet tense during high-stakes scenarios.

  • Multiple Endings Based on Choices: The UX encourages multiple playthroughs by offering several different endings. The branching narrative system keeps players invested, as each decision feels like it has a significant impact on the story’s outcome.


Common UI/UX Elements Across All Games


  • Minimalistic and Elegant Design: All three games feature a minimal UI that focuses on the story and decision-making rather than overwhelming the player with too many interface elements. The UI is clean, modern, and adaptive to the context of the narrative.

  • Decision-Based Consequences: The UX of all three games revolves around the idea that choices matter. Players are given clear, impactful decisions that shape the storyline, offering a personalized experience for each playthrough. The visual and functional feedback on these choices adds to the game's immersive nature.

  • Emotional and Narrative Engagement: The focus is on making players feel emotionally connected to the characters and the story. The design keeps the interface out of the way so players can focus on their emotional investment in the narrative.

  • Branching Pathways and Replayability: Each game’s UX design encourages replayability by offering multiple story outcomes based on player choices. This creates a rewarding experience where players feel motivated to explore every option and see how their decisions play out.


User Persona, User Interview and User Journey Mapping of a student


1. User Persona

Category

Details

Name

Priya Sharma

Age

21

Occupation

Business Management Student

Education Level

Undergraduate, 2nd Year Business Management

Technology Proficiency

High (Regularly engages with tech-driven, interactive platforms)

Motivations

Learning through interactive methods, improving decision-making skills, gaining rewards

Frustrations

Traditional, non-interactive learning methods, overly complex interfaces

Goals

Understanding customer behavior, applying theoretical knowledge in real-world scenarios

Hobbies

Fashion, digital innovation, gaming, and social media engagement

2. User Interview

Question

Response

What motivates you to learn customer behavior?

"I want to understand how to interact with customers better and make informed decisions in a business setting."

How do you prefer to learn complex topics like customer service?

"I prefer interactive and practical learning experiences, like simulations or gamified activities."

What type of learning experience do you enjoy the most?

"I enjoy learning through games and challenges that test my decision-making, especially when I get rewards or feedback."

What frustrates you about current learning methods?

"Most of the content is theoretical and not practical. I find it hard to stay engaged with lectures or reading materials alone."

What kind of rewards or recognition do you find motivating?

"Badges, scores, and unlocking levels or new content are fun. Also, receiving constructive feedback helps me improve."

How often do you engage with interactive digital platforms?

"Almost daily. I love using social media and platforms that offer games or interactive features."

3. User Journey Mapping

Stage

Action/Task

User’s Thoughts

User’s Emotions

Opportunities for Improvement

Awareness

Learns about the gamified customer behavior simulation

"This sounds fun and useful for my course."

Excited and curious

Provide engaging promotional content about the game

Onboarding

Registers and sets up profile within the game

"It’s easy to sign up and get started."

Comfortable, eager to begin

Make onboarding seamless and intuitive

Learning and Exploration

Starts playing, guided by the avatar (store owner)

"I like how it’s teaching me through scenarios."

Engaged and focused

Provide clear instructions and helpful hints early on

Decision Making

Makes choices during customer interactions

"I wonder what the best option is here."

Curious, slightly anxious

Provide feedback and explain consequences of actions

Reward/Feedback

Receives rewards or constructive feedback for decisions

"Cool, I got a badge!" or "I’ll learn from that."

Satisfied or motivated to improve

Offer varied rewards and clear, encouraging feedback

Completion/Reflection

Completes levels and reflects on learned skills

"I learned a lot about customer service."

Accomplished, proud

Show progress, offer additional levels, and celebrate achievements

Exploring common design patterns for gamification interfaces and how they enhance usability.

Gamification is a design pattern that incorporates game-like elements into non-game contexts to boost user engagement, motivation, and retention. This involves adding features such as points, badges, leaderboards, challenges, and rewards to encourage users to complete tasks, learn new skills, or achieve specific goals. By creating a sense of achievement, competition, and progression, gamification makes otherwise mundane activities more enjoyable and engaging, ultimately improving user participation and long-term involvement.


Designing Luxury: A UI/UX Journey through Gamified Retail

The gamification project I’ve designed incorporates a sleek and modern aesthetic, using a minimalistic approach with a dark background and glowing golden accents. The choice of a dark backdrop allows the gold hues in the buttons, icons, and text to pop, creating a sense of luxury and sophistication. Since the theme revolves around a jewelry store, this design decision was intentional to evoke a feeling of elegance and exclusivity, aligning with the brand's essence.


I opted for clean, easy-to-read typography throughout the interface. Bold fonts highlight key sections such as instructions and point systems, ensuring clarity for the user. The smooth, rounded text boxes and speech bubbles were chosen to complement the overall polished look of the project. To guide the user through the storyline, I structured the dialogue carefully, with standout phrases like “Great!” being emphasized to grab attention and offer feedback.


When it came to interaction, I wanted to ensure seamless navigation. Large, prominent buttons like “Start” and “Exit” are easy to access, making it intuitive for users to dive into the experience. The decision tree at the bottom of the screen visually represents the user’s progress, with each stage clearly marked by points. I designed this progression flow to be engaging, giving users a sense of achievement and motivating them to continue interacting with the various stages.


Overall, I aimed to create an immersive, luxurious experience that still maintains clarity and ease of use. The combination of rich colors, structured layouts, and elegant typography serves not only to elevate the brand's feel but also to make the user journey smooth and rewarding. This design is tailored to reflect the high-end nature of the jewelry store while making sure the gamified experience remains engaging and visually captivating.


Refining the Details: A Collaborative UI/UX Journey in Gamified Design

The successful completion of this project was a rewarding experience, made possible through collaboration and valuable insights from both game design mentors and my UI/UX perspective. Working alongside these experts, I sought their thoughts and views on the designs I created, which greatly enhanced the overall design process and allowed me to refine the user experience. Beyond that, the constructive feedback I received from my mentor, Ms. Sraddha Subramanian, was instrumental in pushing me to pay close attention to even the smallest details of the game's interface. Her guidance helped me approach the design with a fresh perspective, ensuring that the final product was not only visually appealing but also intuitive and user-friendly. This journey has been an incredible learning experience, and I’m grateful for the mentorship and collaboration that led to the project's success.






























































 
 
 

Recent Posts

See All

Comments


© 2024 by Muhsin Manaf. Powered and secured by Wix

bottom of page