Lumalux prototype
About:
My hypothesis is that applying gamification elements to a wellbeing app will increase user engagement, enjoyment, and the perceived usefulness of the app.
- There is a change in the user journey because the user goes through different screens; the B version has a lot of gamification theory applied to it.
- Rewards like XP and badges activate intrinsic and extrinsic motivation, giving users a sense of accomplishment.
- Survey results will likely show that users enjoyed and wanted to continue using the app more than in Version A.
Programs:
Made in FigmaPrototype:
Justification:
Independent variable:
- Whether the app has gamification features (Version B) or not (Version A)
- How much they want to continue using it
- How fun they found it
- How helpful they think it is
- User familiarity with gamification
- Interest in wellbeing/mental health
- Digital literacy
- Mood during testing
- Length of session or device used
My questions measure engagement, usability, user satisfaction, gamification effectiveness, and clarity of interaction, respectively.
For question 1, version A had a lower mean and narrower spread, and version B had a higher mean and broader range.
This shows that the gamified version increased user engagement. The larger spread suggests some students responded very well to gamification, even if a few didn’t.
This supports my hypothesis.
For question 2, both versions had similar medians; version A was slightly higher, and version B had slightly more variation.
This shows that gamification added complexity for some users, but overall usability remained high.
This is neutral towards my hypothesis: gamification did not significantly harm or improve usability.
For question 3, version B clearly had a higher median and less variability, while version A had lower scores and was more scattered.
This shows that gamification made the app consistently more enjoyable.
Students likely found rewards and progress tracking fun.
This strongly supports my hypothesis.
For question 4, version B was much higher across the board, while version A was very flat or mid-low scores.
This shows that XP, challenges, and badges significantly boosted motivation.
This strongly supports my hypothesis about gamification's effectiveness.
For question 5, version A was slightly higher, while version B had more variability.
This shows that some users may have been confused by extra elements or layers in the gamified version.
This is a weak point, because a gamified version might require onboarding improvements to maintain clarity.
Reflection:
I hypothesized that gamification would make the app more engaging and attractive to use. The A/B test results clearly support my hypothesis. The results state that engagement, enjoyment, and motivation are all higher in Version B. However, unfortunately, usability and clarity are slightly lower in the gamified version, which suggests a need to refine onboarding or simplify game mechanics. These drawbacks were, however, not severe enough to outweigh the clear increases in user engagement and satisfaction.Possible future additions:
- Because some users scored lower on “I understood what I needed to do.”, I want to improve Onboarding & Clarity in the Gamified UI. I could introduce short, animated tutorials to reduce confusion, for example.
- To increase accessibility and avoid overwhelming new users, I could implement optional or personalized gamification to let users choose whether to see challenges or hide them for a simpler experience.
- I could try expanding the testing group to include older users or users with less technology experience. This will validate how universal or niche my gamified design’s effectiveness really is.
Gamification of the Online Library app
About:
After empathizing with the target audience, I came to the following conclusion: the online library app is currently not very attractive.
It is very simple and intuitive to use, but not fun to use or read books, which is, of course, the goal.
The target users are youth between 12 and 18 years old.
Only half of the youth read a book in their spare time, only once a week!
I want them to train their skills by reading and listening more to books, to expand their knowledge of vocabulary, language, and grammar.
Therefore, I will reconstruct the online library app to make it more attractive, interactive, and fun to use using gamification theory and elements; specifically, Structural Gamification.
The revision is targeted at youth, but it should still be simple and attractive enough for kids and adults to use it too.”
Programs:
Made in FigmaPrototype:
Justification:
The user has Autonomy over what books they choose to read and their profile by customizing their profile picture. Progress bars for the chapters and audiobooks are implemented so the user knows when the goal is hit, which fuels intrinsic motivation. The leaderboard is used for Social Connection and will enhance the user's intrinsic motivation through social reinforcement. The competition also functions as an extrinsic motivator. XP and badges can be obtained, functioning as extrinsic motivators. A level system functioning as a gamified rewards program unlocks new profile pictures as an achievement to give the user motivation to obtain XP. Badges can be obtained by participating in time-limited challenge events.- Epic Meaning is achieved by telling the user that 646K players got this badge already before them, so the user wants to be part of that group.
- Accomplishment is achieved through XP as Status Points, Badges, Fixed Action or Earned Lunch through challenges, the Leaderboard, and Progress Bars.
- Empowerment of Creativity is achieved by having the user express themself creatively when writing a review and giving Feedback. The user can also express themself by customizing their profile picture.
- Ownership is mainly achieved through Collection Sets: the challenge Badges are a series. The user can also customize their profile picture to feel closer to their digital persona.
- Social Influence is achieved by Friending other users and the badges that function as a Trophy Shelf.
- Scarcity is achieved by Prize Pacing because the badges are sets. A Count Down Timer is also displayed for the badges to display how long the user has to complete the challenge and obtain the badge. A Last Mile Drive is displayed after obtaining XP; a message is shown on how much more XP is needed to beat a friend.
- Unpredictability is achieved by having Sudden Rewards; the user wrote their first review and earned a secret Profile Picture.
- Avoidance is achieved by having a Sunk Cost Prison; if the user does not log in daily, the XP streak will stop exponentially adding up, and the user has to start with a small XP boost again on day 1. It is also a form of Streaking. The challenges that are only for a couple of days to obtain an exclusive badge are a form of an Evanescence Opportunity and could be seen as a FOMO Punch for not getting the badge in time.
I created messages for limited-time events and daily logins, functioning as triggers that get the user in the Engagement Loop. After the task or Action is completed, an amount of XP, badge, or profile picture is gained as a Variable Reward. Setting a new profile picture could be seen as an Investment. After the Investment or Variable Reward, a message is shown with how much XP is needed to beat a friend, which functions as a Trigger for a ‘new’ Engagement Loop.
Many of these theories and gamification elements have been implemented in apps like Duolingo, Coffee Break, and YouVersion.
As a result of user testing, I added XP to battle your friends, a page to add friends, a daily login system, messages for limited-time events, a level system, and rounded some corners. I also added Epic Meaning and Unpredictability to represent every Octalysis Core Drive.
Reflection:
The online library app is now more attractive and fun to use, because Structural Gamification theory is applied. The little goals and rewards in between sessions will make it easier for the user to stay focused and get motivated to read more. “On brand” UI images and icons are created and used to not break the immersion for the user. Daily login reminders will trigger the user to read more often. This way, the user will expand their vocabulary and knowledge of language and grammar. Both young and old can use the app because it is simple and accessible.During this project, I learned a lot about Gamification, UI / UX Design, Prototyping, Figma, and Design Thinking.
Anti-bullying campaign prototype
About:
This webpage exists to stop conservatives from bullying.
The idea is that the focus is on community and family, and bullying is what destroys communities.
Because the idea is to lure conservative bullies in with values important to them, like community and family, these values are more on display on the website than in the anti-bullying campaign itself, and in the explanation of the campaign.
Programs:
Made in FigmaPrototype:
Justification:
The home page is inviting and filled with articles about topics that conservatives are interested in: why family is important, how to build community, and all sorts of articles can be added.On the testimonial page, the user can take a look at testimonials from others, share their own testimonial, and visit social media pages from the campaign. This gives off a sense of community, which conservatives value a lot.
On the online workshop page, the user can enroll and go into an online workshop. The workshop will give information about how to be a community and what prevents being a healthy community. It provides practical tools, and it is a personal meeting. It also promotes a sense of shared responsibility, which conservatives value a lot.
On the Join the Movement page, the user is pushed to join the existing community and become part of it. Different ways to participate are displayed, like combating bullying in real life and social media posts related to the campaign.
Lastly, on the contact page, the user will automatically join a live chat with people who like to be part of the community. Practical tips and experiences can be shared, and it gives the user a great sense of belonging. The user can also sign up for a newsletter and contact the campaign directly if there are still any questions left.
My solution is a painkiller because it addresses a specific and pressing issue: bullying. This causes significant emotional and social pain for individuals and communities. By providing information, resources, and community support, the website aims to ease the negative impacts of bullying. It offers practical tools and actions that visitors can take to combat bullying, making it a painkiller.
The Internal Triggers are Emotional Distress, Personal Experience, and Community Values. The External Triggers are Website Content, Calls to Action, and Social Media Campaigns.
The high motivation comes from personal and community values, the easy use of the website, and the supportive resources, ensuring that users can effectively take action against bullying.
Tribe rewards align closely with the conservative values of community, social recognition, and respect, so this is the preferred reward. They provide social validation, which is a significant motivator for conservatives.
The primary goal is to raise awareness and educate: providing comprehensive information on the impact of bullying, including personal stories, and practical advice on recognizing and combating bullying, so it will not be done again and will even be prevented. Used reinforcements are:
- Social recognition in the form of personal testimonials that visitors can relate to and share, fostering a sense of community.
- And Interactive elements in the form of buttons and forms that allow visitors to take immediate action, such as signing up for newsletters, sharing their testimonials, and connecting on social media.
- The online registration page, live chats, common theme, clear layout, and improved homepage are all framed positively to reduce resistance and increase acceptance.
- Conservatives are highly motivated to process information about protecting their children and community from bullying. Emotionally impactful stories and community-centered messages are used to maintain high motivation.
- The clear layout, common theme, and additional explanations enhance the ability to process information by making the website intuitive and user-friendly.
- Given the high motivation, the website can utilize the central route by providing detailed content about the anti-bullying workshop and resources. While the primary focus can be on the central route, peripheral things like testimonials, visually appealing design, and live chat support can also enhance engagement.
- Social Proof is the most effective persuasion principle for the target audience because they value community and family.
When arriving on the Testimonials Page, this button is displayed at the bottom of the page every time a new testimonial is uploaded. Although the user is free to choose if they want to share their testimonial, this way the user is NUDGEd towards sharing their testimony and participating in the movement. This NUDGE uses “Aligned Incentives” because the user is constantly pushed to share their testimonial by the button.
When arriving on the Contact Page, the live chat is opened by default. This way, the user is NUDGEd towards using the live chat and participating in the movement. This NUDGE makes use of “Smart Defaults” because the default option is enrolling.
Based on the feedback that I have received, I have added an explanation for the online workshop, a live chat, and some small updates and changes, and this prototype is the final result.
Reflection:
During this project, I learned a lot about Graphic Design, Web Design, UI / UX Design, Prototyping, Figma, and Behaviorism.Low fidelity Blackboard prototype
About:
For this assignment, I have adjusted the User Interface (UI) and User Experience (UX) of the Blackboard website.
The current Home page is unclear and overstimulating.
A revision is needed with layered menus to choose from, different text sizes, and colors to emphasize what topics are related and create a better overview.
It needs to be clear and not crowded, so it is not overstimulating.
A clear contrast is going to be used between interactive elements and the background using colors.
Appropriate sounds are needed as a way of feedback.
When a button is highlighted, a different color is needed to make it clearer what button will be pressed.
Icons/logos will be implemented to make the interface easier to understand.
Interactive items will be used only once and not many times all over the place, so the interface will not be unclear.
In the current Course page, layered menus will be implemented for the year, schoolyear, and term.
A button will be added for easy enrolment.
The top part will stay consistent with the main menu to contain consistency.
Different text sizes and colors will be used to emphasize what topics are related and create a better overview.
A clear contrast is going to be used between interactive elements and the background using colors.
Appropriate sounds are needed as a way of feedback.
When a button is highlighted, a different color is needed to make it clearer what button will be pressed.
Icons/logos will be implemented to make the interface easier to understand.
Interactive items will be used only once and not many times all over the place, so the interface will not be unclear.
Programs:
Made in FigmaPrototype:
In this Blackboard website prototype, the mouse can be used to see the schedule for the coming days and to switch to the Courses and Home page.Justification:
In the top left some layered menus are added for the user, the study (CMGT), and the extras. The extras contain the parts of the website the user will use very rarely, like the Master. The Announcements, Courses, Marks, Calendar, and Library have a bigger button in a wide row because these are important parts that are used frequently. The icons explain the terms better and make it easier and faster for the user to see where he wants to go. The messages are sorted into courses and ‘other’, to make it easy to see and overview the messages. The order of these courses will stay consistent on other interfaces. A couple of messages can be displayed at a time, making it easy to see what message is important for the user. The number of messages and their importance are displayed using the colored icons as well as the title of the messages. The deadlines are also displayed on the homepage so the user will not have to search far for this important information. Multiple deadlines can be displayed per course. Lastly, the schedule is displayed on the right side. The cyan column indicates that this is the current lesson. The red text indicates a change in the schedule and the blue link is an online class. The course, time, and place are all displayed in a convenient column. Buttons are added to be able to view the next and previous days.In the top left some layered menus are added for the user, the study (CMGT), and the extras. The extras contain the parts of the website the user will use very rarely, like the Master. The Announcements, Courses, Marks, Calendar, and Library have a bigger button in a wide row because these are important parts that are used frequently. The icons explain the terms better and make it easier and faster for the user to see where he wants to go. The courses are easy to see and overview. The order of these courses will stay consistent on other interfaces. At the top, there are layered menus for the year, schoolyear, role, and term. The system will remember these for you. In the middle an information section is added with all important information about the course; like announcements, deadlines, assessments, and resources. This is a faster option to get to the important resources. The option to show all is also given. An extra button is added for the current online lesson. The color is purple/dark blue because this is the color Teams uses. This gives the user a sense of familiarity and an immediate understanding of what the button is for without reading the text first. A connection icon is also implemented to enhance this familiarity even more. Also, a button to the side is added for easy enrollment to all courses.
I chose to use a grid, to have an easy overview of the screens. All elements are evenly spaced and most of the screen is utilized. The borders of the screen are mostly empty, to not make it feel too cluttered. This design makes a clean and organized design. On the courses page, more important elements are made bigger, while less important elements are made a bit smaller. This way the important information is transferred to the user quickly. Although both grids are not completely the same, they are both optimized for the corresponding content.
I wanted to create a clear and intuitive website, with all important information displayed, without feeling too cluttered. Non-important information is tucked away into menus and expanding buttons like “extras” and “show all”. Related elements are close or next to each other, so the website stays intuitive. The Announcements, Courses, Marks, Calendar, and Library have a bigger button in a wide row because these are important parts that are used frequently. The messages are sorted on courses and other, to make it easy to see and overview the messages. The order of these courses will stay consistent on other interfaces. A couple of messages can be displayed at a time, making it easy to see what message is important for the user. The size of elements and fonts are used to emphasize the importance of the elements. This way the elements stay in the grid and are clear. The most important information that the user uses on a day-to-day basis is on the home page, while the specific information about courses is on the courses page. This way the UI stays clean and the user knows where to find certain information. The spacing enhances the clarity and structure of the website.
I have used colors in various ways in my design. I made the signing-off icon red because this is a widely used color for this. The same goes for the blue links and the green checkmarks. The red exclamation mark is used to seem even more important than the black exclamation mark. In the roster on the right, the blue background color means that this is the current lesson. The red text is a change: the lesson is in another room than normally. The online button is blue and underlined to show it is a clickable link: the user can go from the home page directly to their current online lesson. In the ‘courses’ menus, the online lesson button is purple: specifically, the color MS Teams uses. This immediately indicates to the user this is about the online lesson/Teams, without even having read it. I made sure all added colors had a function. This made the UI more intuitive and a bit more colorful. I used a grey background for currently active buttons like ‘home’, ‘courses’, and the ‘professional orientation’ course. Using all this, I created a user-friendly and intuitive design.
I used as few different fonts as possible. This makes the whole UI feel connected. The fonts that I used are clear and easy to read, to make sure they are not distracting from the main information of the website. I tried to use fonts that feel complementary rather than unrelated. This way the UI feels more coherent. I made the text for important elements bigger and less important elements smaller. This way the UI is more intuitive to use. I made sure the text would not be too small because I wanted all the text to be easily readable. Enough spacing is added to enhance this readability. Using all this I managed to create a visually appealing and clear design that supports the website.
I chose to use simple and clear buttons. These will carry across the important information to the users, while not distracting too much. This way the user can easily use the interface fast, without having to search for something. On the home page, I chose to use a grid, rather than a table, so the UI stays clean. On the courses page, I did use a table, for the column of clickable courses. The clear text and icons on the buttons also help to traverse the message of what is ‘beneath’ the button. This way, these elements enhance the use of the buttons. I wanted all icons to be simple and clear, so it would add to the user experience. All symbols are easily visible and I tried to let them speak for themselves, so the user knows what the button does/means even without reading the text. The down arrow icons are special buttons that indicate a layered menu will pop up and the user will be able to select an option from a selection of choices. These clear icons make the website easier to use and that way more fun. I wanted the text on the buttons to be clear as well, so the user will immediately know what will happen when he clicks it. The buttons have a consistent style and color scheme, giving the website more personality. All elements combined create a cohesive look and feel.
Reflection:
During this project, I learned a lot about Graphic Design, Web Design, UI / UX Design, Prototyping, and Figma.Low fidelity first-person shooter prototype
About:
For this assignment, I have adjusted the User Interface (UI) and User Experience (UX) of a first-person shooter game.
I want a HUD with a clear goal, so the player will always know what to do next, even if he does not know how yet.
The orientation ties into this, because if the player knows what to do, he should also be able to know where to do this/where to go next.
The abilities should be clear for the player, such as special attacks for example.
If these are based on time or (other) resources this should be indicated as well, so the player always knows when and what abilities can be used.
I want to create a HUD with a clear composition, not taking up too much space, but not being too small.
This way the player will not be distracted by the HUD while playing, but can always quickly see important information for the playing experience.
For an FPS a ‘border-HUD’ works really well, because it shares a lot of important information and also the screen is still very visible.
It is smart to have a mini-map with important orientational information, so the player knows where to go.
Important items and elements should be clearly visible, so the player will always have access to important information.
A simplistic HUD is not wrong altogether.
It makes it easy to overview and all important information is close to each other.
This should however not affect the HUD in a bad way, like having too little information or feeling cluttered.
Programs:
Made in FigmaPrototype:
In this first person shooter prototype, the 1 and 2 keys on your keyboard switch to weapons 1 and 2 respectively. The Tab key opens and closes the map because this is a key many games use for the map.Justification:
I wanted a simple and clear design for the game where all important information can be seen easily. Non-essential information is left out. This way the UI is easy to use with a high visibility of the elements, as well as the game. The HUD does not take up a lot of space, but it is not too small. This way the player will not be distracted by the HUD while playing, but all important information for the playing experience is always in sight. I chose a HUD that is ‘stuck’ to the edges of the screen because it shares a lot of information while also keeping the screen visible. The contents are also mostly set in the corner, to amplify the clarity. The health is represented by hearts and Flarb is the main collectible/score. I revised the hearts to make them fit in with the style of the game more. I made them light blue, like the ice in the game and broken hearts depict decreased health. It is as if the icy heart is broken in two. This gives the UI (and game) a bit more personality while fitting in with the rest and without being distracting. In the top right the current mission and current task are displayed, so the player will not get lost without knowing the objective.In the bottom right there is a minimap with an arrow for the player in red and a golden dot representing the location for the current task. This way the player always knows where to go. I cleared up the golden dot to be clearer and used a new red arrow, to fit the style of the game more. In the bottom left is the weapon select screen. The big icon is the currently used weapon. Next to it is the small icon for the secondary weapon. When the player switches weapons the one icon becomes the bigger one and the other will become the smaller one. On the main weapon, in the bottom left the current amount of ammo is displayed. In the bottom right, the maximum amount of ammo is displayed. On the other weapon, in the top left the amount of ammo is displayed, so even if the player is not using the weapon at the moment, the amount of ammo is still visible. This way the options are always clear for the player. I moved the amount up on the secondary weapon, to make it more clear and visible, but kept it on the right for consistency: the amount of ammo is always on the left side. On the main weapon, there are small ‘caps’ at the bottom, just above the amount of ammo and maximum amount of ammo. These caps fit in with the icons, while not being distracting. They help give the UI (and game) a bit more personality.
I tried to give HUD some personality while also keeping the icons clear and simple. I used a grid-based layout to keep the UI clear. The typography, color, and style of the UI are the same throughout the whole UI and they fit the style of the game. This will improve the user's playing experience and will not distract them. For switching to the first or second weapon, the 1 or 2 button is used accordingly. This makes it clear and intuitive what weapon the player wants to use. These buttons are used a lot for switching weapons in First Person Shooters. This makes it consistent and easy to use these buttons. The Tab button is used to open and close the map. This makes it easy to use, because most games use the right hand to control the pointer, and the right hand to move the player; like this game. The Tab button is easy to press with the right hand too. This way it is easy to control the UI with one hand. Switching the weapons and opening the map has nice animations. This visual feedback makes clear what has happened by using the corresponding button: when Tab is pressed, the map opens and the minimap enlarges until it fills up most of the screen for example. Important UI elements for using the map are still visible when the map is opened; like the current task for example. This mapping is specifically chosen, because the player will probably want to see what to do, and not only where to go when the map is opened.
I have implemented the principles like recognizable icons and an intuitive layout. Using these principles, I think I have created a clear, effective, and user-friendly UI with nice aesthetics and all the important information needed for a fun playing experience.