Gamelog
Personal Project
Gamelog
Personal Project
Timeline: November 2024 - January 2025
Timeline: November 2024 - January 2025
Tools used: Figma, Fig-jam, Notion, Google Forms
Tools used: Figma, Fig-jam, Notion, Google Forms
Role: Product Designer, User Researcher and Branding
Role: Product Designer, User Researcher and Branding
View prototype
View prototype
GameLog is a concept app for gamers to track playtime, manage backlogs, review games, and connect with others. With features like progress tracking, personalized recommendations, and gamified tools like Bingo Log, it aims to make gaming management fun and engaging.
GameLog is a concept app for gamers to track playtime, manage backlogs, review games, and connect with others. With features like progress tracking, personalized recommendations, and gamified tools like Bingo Log, it aims to make gaming management fun and engaging.
The Goal Statement
GameLog's goal is to gamify the logging experience while connecting gamers and helping them discover new games.
GameLog's goal is to gamify the logging experience while connecting gamers and helping them discover new games.
My Impact
My design improved user retention, boosted engagement, and increased task completion by implementing a cohesive design system, streamlining navigation, and integrating gamified features based on user feedback.
Task Completion
+80%
Testers were able to complete game-logging tasks unaided thanks to intuitive user flows.
Wireframes
20+
Created clear, goal-oriented wireframes to streamline user flows and reduce friction.
Screens
35+
Designed intuitive screens focused on clarity, hierarchy, and ease of navigation.
Prototypes
1
Built interactive prototypes to validate ideas and accelerate stakeholder feedback.
Why Gamelog?
Why Gamelog?
This project stems from the realization that gaming lacks its own version of Letterboxd or Goodreads. Inspired by how these platforms transformed movie and book tracking, I set out to create a comprehensive and engaging game logging solution. Here's how the concept was developed.
This project stems from the realization that gaming lacks its own version of Letterboxd or Goodreads. Inspired by how these platforms transformed movie and book tracking, I set out to create a comprehensive and engaging game logging solution. Here's how the concept was developed.
Research
Research
USER RESEARCH
USER RESEARCH
Are game logging apps worth using?
Are game logging apps worth using?
To assess the benefits of a game logging app, I spoke with ten friends to understand how it could improve their gaming journey.
To assess the benefits of a game logging app, I spoke with ten friends to understand how it could improve their gaming journey.
I found three reasons why using a game logging application can be valuable.
I found three reasons why using a game logging application can be valuable.
Enhances Gaming Engagement
Gamers can log progress, track playtime, and stay motivated through social features.
Gamers can log progress, track playtime, and stay motivated through social features.
Builds Community and Connections
Connects gamers through shared interests, recommendations, and challenges.
Connects gamers through shared interests, recommendations, and challenges.
Simplifies Game Recommendations
Helps users discover games through friends, influencers, and peer reviews for trusted recommendations.
Tracks Progress and Achievements
Helps players stay motivated by visualizing milestones, completed games, and personal goals over time.
COMPETITIVE ANALYSIS
COMPETITIVE ANALYSIS
Do we need a game logging app?
Do we need a game logging app?
A competitive analysis was conducted to understand how popular game logging apps help gamers manage playtime, backlogs, and reviews.
A competitive analysis was conducted to understand how popular game logging apps help gamers manage playtime, backlogs, and reviews.
GG App
GG App
GG App is a popular game tracker for lists, gameplay logging, and discovery but lacks analytics, platform integration, social features, and has intrusive ads.
GG App is a popular game tracker for lists, gameplay logging, and discovery but lacks analytics, platform integration, social features, and has intrusive ads.
Backloggery
Backloggery
Backloggery is a web-based tool for tracking game backlogs and progress but has an outdated interface, limited mobile support, and minimal analytics.
Backloggery is a web-based tool for tracking game backlogs and progress but has an outdated interface, limited mobile support, and minimal analytics.
HowLongToBeat
HowLongToBeat
HowLongToBeat tracks game completion times and compares them with community averages but lacks robust logging, social features, and mobile functionality.
HowLongToBeat tracks game completion times and compares them with community averages but lacks robust logging, social features, and mobile functionality.
The competitive analysis revealed a need for a game logging app that gamifies tracking, connects players, and simplifies game discovery without overwhelming users with a large backlog. The full research is available in Notion.
View complete research in Notion
View complete research in Notion
Concept and Development
Concept and Development
Following the research, it became clear that a game logging app like GameLog could enhance gamers' organization and overall enjoyment. However, an analysis of existing solutions shows that current game logging apps leave room for a more engaging and comprehensive experience.
Following the research, it became clear that a game logging app like GameLog could enhance gamers' organization and overall enjoyment. However, an analysis of existing solutions shows that current game logging apps leave room for a more engaging and comprehensive experience.
USER PERSONA
USER PERSONA
Identifying the Ideal User
Identifying the Ideal User
I first developed a user persona to understand the ideal user and ensure the app’s features align with their needs. Using these insights, I designed the app’s architecture to create a cohesive experience, focusing on its purpose, impact, and how it addresses user goals and pain points.
IDEATION
IDEATION
What features should the app provide?
What features should the app provide?
With the design brief in mind, I compiled a list of potential features and branding elements for GameLog. During the initial brainstorming session, I outlined key features and quickly noticed they naturally grouped into six distinct categories:
With the design brief in mind, I compiled a list of potential features and branding elements for GameLog. During the initial brainstorming session, I outlined key features and quickly noticed they naturally grouped into six distinct categories:
Core Features
Discovery Features
Utility and Accessibility
Personalization Features
Social Features
Engagement Features
These categories are then validated using the card sorting exercise.
Core Features
Discovery Features
Utility and Accessibility
Personalization Features
Social Features
Engagement Features
These categories are then validated using the card sorting exercise.
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
Helping Users Find What They Need
Helping Users Find What They Need
Before wireframing, I created the information architecture to visualize the app, organize its structure, and map out the five main user categories.
Before wireframing, I created the information architecture to visualize the app, organize its structure, and map out the five main user categories.
The information architecture maps out the app's primary screens and sub-screens, providing a clear blueprint of the user journey. It ensures logical organization, intuitive navigation, and a strong foundation for user engagement.
The information architecture maps out the app's primary screens and sub-screens, providing a clear blueprint of the user journey. It ensures logical organization, intuitive navigation, and a strong foundation for user engagement.
View IA in Fig-Jam
View IA in Fig-Jam
USER FLOWS
USER FLOWS
Journey from Start to Finish
Journey from Start to Finish
To visualize and plan the user journey within GameLog, I created a series of user flows for the app’s main features: onboarding, creating a new review, discovering games, and engaging with social features. These flows outline the steps users take to achieve their goals, ensuring a seamless and intuitive experience throughout the app.
To visualize and plan the user journey within GameLog, I created a series of user flows for the app’s main features: onboarding, creating a new review, discovering games, and engaging with social features. These flows outline the steps users take to achieve their goals, ensuring a seamless and intuitive experience throughout the app.
WIREFRAMES
WIREFRAMES
Building the Foundation
Using the information architecture and user flows as a foundation, 15 medium fidelity wireframes were created to define the app's initial visual structure and layout. These wireframes serve as a blueprint, outlining key screens and interactions to ensure the design aligns with user needs and provides a seamless experience.
Using the information architecture and user flows as a foundation, 15 medium fidelity wireframes were created to define the app's initial visual structure and layout. These wireframes serve as a blueprint, outlining key screens and interactions to ensure the design aligns with user needs and provides a seamless experience.
Below are a selection of wireframes showcasing key screens, including the Home screen, Library, Discovery tab and more.
Below are a selection of wireframes showcasing key screens, including the Home screen, Library, Discovery tab and more.
View wireframe prototype in Figma
View wireframe prototype in Figma
Testing and Feedback
Testing and Feedback
After creating the wireframes, I developed a prototype and tested it with my friends. I assigned them tasks and rated their ability to complete them to identify improvements.
After creating the wireframes, I developed a prototype and tested it with my friends. I assigned them tasks and rated their ability to complete them to identify improvements.
USER TESTING
USER TESTING
Cognitive Walkthrough Testing
Cognitive Walkthrough Testing
I used the Cognitive Walkthrough method to test my game logging app by first identifying the critical tasks my friends would perform.
I used the Cognitive Walkthrough method to test my game logging app by first identifying the critical tasks my friends would perform.
Logging a new game
Reviewing a game
Tracking progress for a game in the backlog
Discovering a new game
Making new friends
Posting on the Socials Tab
The testing was conducted in a controlled environment to eliminate external influences or disturbances. The results presented below represent the average performance of all participants.
Logging a new game
Reviewing a game
Tracking progress for a game in the backlog
Discovering a new game
Making new friends
Posting on the Socials Tab
The testing was conducted in a controlled environment to eliminate external influences or disturbances. The results presented below represent the average performance of all participants.
Addressing Usability Challenges
Addressing Usability Challenges
Posting on the Socials Tab
Posting on the Socials Tab
After testing the prototype and identifying usability issues, I revised the design to address the problems. I began with the Socials Tab, adding a clear and accessible option for creating new posts and refining the layout for improved clarity and functionality.
After testing the prototype and identifying usability issues, I revised the design to address the problems. I began with the Socials Tab, adding a clear and accessible option for creating new posts and refining the layout for improved clarity and functionality.
I replaced the Feed and Videos tabs with For You and Following tabs for easier navigation between friends' posts and curated content. A FAB (Floating Action Button) was added for creating posts, along with a View Game button to quickly access game details.
I replaced the Feed and Videos tabs with For You and Following tabs for easier navigation between friends' posts and curated content. A FAB (Floating Action Button) was added for creating posts, along with a View Game button to quickly access game details.
With these updates to the Socials Tab, I was confident the design now offered a more intuitive and user-friendly experience.
With these updates to the Socials Tab, I was confident the design now offered a more intuitive and user-friendly experience.
Making new friends
Making new friends
The next issue I addressed was improving the app’s search functionality, a significant challenge identified during testing.
The next issue I addressed was improving the app’s search functionality, a significant challenge identified during testing.
I focused on improving the ability to find users and content within the app, a significant challenge identified during testing, by refining the search functionality to make it more intuitive and effective.
I focused on improving the ability to find users and content within the app, a significant challenge identified during testing, by refining the search functionality to make it more intuitive and effective.
Firstly I added segmented buttons to filter search results by users or posts, making the search functionality more precise and user-friendly.
Firstly I added segmented buttons to filter search results by users or posts, making the search functionality more precise and user-friendly.
Next I moved tags from game results to the game’s page after testing showed users often clicked them by mistake, causing frustration.
Next I moved tags from game results to the game’s page after testing showed users often clicked them by mistake, causing frustration.
Additionally I integrated user posts and videos into search results under the default All button and added a View All option for better accessibility, allowing users to view each category individually.
Additionally I integrated user posts and videos into search results under the default All button and added a View All option for better accessibility, allowing users to view each category individually.
These changes streamlined the search experience and resolved key issues identified during testing.
These changes streamlined the search experience and resolved key issues identified during testing.
I believe these changes will effectively resolve the usability issues identified during testing.
I believe these changes will effectively resolve the usability issues identified during testing.
Refining Through Retesting
Refining Through Retesting
After implementing the changes, I conducted another round of testing using the same method. While I tested the entire app, the results below specifically focus on the updated features that were usability challenges
After implementing the changes, I conducted another round of testing using the same method. While I tested the entire app, the results below specifically focus on the updated features that were usability challenges
Crafting the Visual Identity
Crafting the Visual Identity
BRANDING
BRANDING
Leveling Up is Essential
Leveling Up is Essential
After receiving positive results from testing the app, I shifted focus to its branding. I began by selecting the brand colours and typography that would define the app's visual identity.
After receiving positive results from testing the app, I shifted focus to its branding. I began by selecting the brand colours and typography that would define the app's visual identity.
App Name
App Name
I chose the name Gamelog for its simplicity and easy recognizability, ensuring it resonates with users and clearly conveys the app's purpose.
I chose the name Gamelog for its simplicity and easy recognizability, ensuring it resonates with users and clearly conveys the app's purpose.
Colours
Colours
I chose purple as the main brand colour to create a modern and elegant aesthetic, complementing the app's dark mode design. To ensure accessibility and usability, I selected additional colours that work harmoniously with dark mode, guided by research on accessibility standards.
I chose purple as the main brand colour to create a modern and elegant aesthetic, complementing the app's dark mode design. To ensure accessibility and usability, I selected additional colours that work harmoniously with dark mode, guided by research on accessibility standards.
Typography
Typography
I chose General Sans for its modern, clean design and versatility, offering excellent readability and clarity across digital interfaces.
I chose General Sans for its modern, clean design and versatility, offering excellent readability and clarity across digital interfaces.
gamelog
gamelog
Logo Design
Logo Design
For the logo, I chose a hexagon shape inspired by honeycombs, symbolizing community, reflecting the app’s focus on connection. The inner lines draw from tree trunk patterns, representing growth, while the negative space forms a "G," tying it to GameLog's identity.
For the logo, I chose a hexagon shape inspired by honeycombs, symbolizing community, reflecting the app’s focus on connection. The inner lines draw from tree trunk patterns, representing growth, while the negative space forms a "G," tying it to GameLog's identity.
The images showcase the app icon designed for mobile devices. The icon is crafted to be visually striking, easily recognizable, and reflective of the app’s branding.
The images showcase the app icon designed for mobile devices. The icon is crafted to be visually striking, easily recognizable, and reflective of the app’s branding.
DESIGN SYSTEM
DESIGN SYSTEM
Swift and Cohesive Design
Swift and Cohesive Design
Building on the branding elements, I created a comprehensive design system for GameLog to streamline the design process. This system saved time by minimizing redundant tasks, such as recreating UI elements, and reduced the number of screens needed, ensuring efficiency and consistency throughout the app.
Building on the branding elements, I created a comprehensive design system for GameLog to streamline the design process. This system saved time by minimizing redundant tasks, such as recreating UI elements, and reduced the number of screens needed, ensuring efficiency and consistency throughout the app.
View design system in Figma
The Final Product
The Final Product
INTRODUCING GAMELOG
INTRODUCING GAMELOG
Bringing It All Together
Bringing It All Together
PROTOTYPE
PROTOTYPE
Experience the App in Action
Experience the App in Action
Below are a series of videos demonstrating key features of the application in action. These clips showcase how the app performs specific tasks, providing a closer look at its functionality, usability, and overall user experience.
Below are a series of videos demonstrating key features of the application in action. These clips showcase how the app performs specific tasks, providing a closer look at its functionality, usability, and overall user experience.
View prototype in Figma
Getting started and checking progress of game
Getting started and checking progress of game
The video showcases the app's launch process, displaying recently played games and earned trophies on the homepage. During onboarding (not implemented due to time constraints, users would link their Steam or other gaming accounts for syncing.
The video also showcases how users can track progress, view their reviews, and compare their performance with friends.
The video showcases the app's launch process, displaying recently played games and earned trophies on the homepage. During onboarding (not implemented due to time constraints, users would link their Steam or other gaming accounts for syncing.
The video also showcases how users can track progress, view their reviews, and compare their performance with friends.
Discovering a new game
Discovering a new game
The video showcases how users can discover new games through the Discover Tab, which curates recommendations based on popularity, user preferences, played games, and library additions. This feature is perfect for users unsure of what to play next, making game discovery seamless and personalized.
The video showcases how users can discover new games through the Discover Tab, which curates recommendations based on popularity, user preferences, played games, and library additions. This feature is perfect for users unsure of what to play next, making game discovery seamless and personalized.
Logging a new game
Logging a new game
The video below showcases how users can log a game, demonstrating the straightforward process of adding playtime, rating, and reviewing a recently completed game.
The video below showcases how users can log a game, demonstrating the straightforward process of adding playtime, rating, and reviewing a recently completed game.
Exploring the Library, Social Tab, and Tasks Page
Exploring the Library, Social Tab, and Tasks Page
This video showcases the Library, Social Tab, and Tasks Page, where users can manage their game collection and stay engaged with challenges.
The Tasks Page offers daily, weekly, and monthly challenges, rewarding XP for completion.
Leveling up unlocks cosmetics for profiles and the Social Tab.The Bingo Log refreshes monthly, providing tasks that grant additional XP upon completion, further enhancing progression.
This video showcases the Library, Social Tab, and Tasks Page, where users can manage their game collection and stay engaged with challenges.
The Tasks Page offers daily, weekly, and monthly challenges, rewarding XP for completion.
Leveling up unlocks cosmetics for profiles and the Social Tab.The Bingo Log refreshes monthly, providing tasks that grant additional XP upon completion, further enhancing progression.
Final Thoughts
Final Thoughts
CONCLUSION
CONCLUSION
What went well
What went well
My goal with GameLog was to create a visually engaging, gamified app that simplifies game tracking, manages backlogs, and fosters connections.
My goal with GameLog was to create a visually engaging, gamified app that simplifies game tracking, manages backlogs, and fosters connections.
I achieved a gamified experience, simplified backlog management, and made discovering games engaging, while establishing a strong brand identity through thoughtful design choices.
I achieved a gamified experience, simplified backlog management, and made discovering games engaging, while establishing a strong brand identity through thoughtful design choices.
Building the design system was challenging but significantly enhanced my design skills.
Building the design system was challenging but significantly enhanced my design skills.
What can be improved?
What can be improved?
If time allowed, I would have loved to design the app's onboarding experience to ensure a smooth introduction for new users.
If time allowed, I would have loved to design the app's onboarding experience to ensure a smooth introduction for new users.
I could have added micro-interactions to enhance motion design, created pages for tag clicks to improve accessibility, and refined the review journey for a more seamless experience.
I could have added micro-interactions to enhance motion design, created pages for tag clicks to improve accessibility, and refined the review journey for a more seamless experience.
Additionally, a more robust design system and advanced filter options for the library and discovery tabs would elevate functionality.
Additionally, a more robust design system and advanced filter options for the library and discovery tabs would elevate functionality.
Explore more case studies
Explore more case studies
Get In Touch
Designed by Marc De Canaga
Designed by Marc De Canaga
Thank you for viewing my work
Thank you for viewing my work
