Customize your profile the way you want.
There isn’t just one type of gamer.
Alti.io was made with the knowledge that there are collectors, completionists, content creators, and people who just like to make aesthetic profiles—create your gaming profile knowing it’s 100% customized to fit you.
There are too many platforms to keep track of.
The problem:
The solution:
Merge them all together into one platform.
This product mashes every gaming platform together to create one fully integrated game showcase as an alternative to the others. No more need to track your achievements and collections from each individual website or mobile app. Find everything you want in one place, in the most simple way possible.
User Sitemap
Alt.io was going to be a tab-structured site akin to a social media platform like X (FKA Twitter) or Facebook.
Later it turned out to be too limiting in visual customization, and the tabs could easily become messy when sorting through content. It would not give a clear overview of a users profile upon first viewing it.
The sitemap was restructured as a straightforward profile creator that made use of widgets instead, pulling inspiration from iPhone app widgets and Steam’s profile showcases. Widgets can be put in ‘slots’ of varying sizes, as well as customized to display whatever the user desires (e.g. achievements, friends list, games owned, etc.). They give an overview of a user’s behavior at first glance as everything can be seen at once on their profile page.
Ideation
Initial concepts looked similar to platforms like Twitter or Instagram while focused on the idea of displaying collections while also being able to make personal posts akin to social media. Part of this was inspired by Steam’s friend system and community showcases. The ability to both share your current and latest game progress and showcase your achievements was ideal.
Two different profile screen layouts.
However, this was not particularly unique and lacked the full customization aspect that I originally planned to tackle. I wanted to move beyond the normal banner and profile picture customization and create something much more personalized— almost like early day DeviantArt and an iPhone home/lock screen. I completely scrapped the social media aspect of the project for this reason… and also the realization that not everything has to be a social media platform these days!
Two different tab layouts
Wireframes
Sized for both desktop and mobile usage for a fully responsive design, I swapped to a profile-customization platform completely, with the socializing aspect being limited to adding friends, viewing their profile, and possibly being able to leave comments if the user enables the option.
Inspiration was drawn from PlayStation home themes and iOS widgets, often times homebrewed by users that craved more personalization on their mobile devices.
Findings
- Users still may not want to fill entire profile space as shown in wireframe samples. Presets may be available to mitigate clutter.
- Users still need something extra to retain interest in product. This could be in the form of simple game news articles and updates on the home page.
- Users should still be able to link to other social media platforms. Content creators or streamers may want to display their work or streaming status.
Unmoderated usability study / remote (USA, FR, CAN) / 6 participants / undefined time length
Accessibility Considerations
1) Despite wanting 100% customizability, allowing users unlimited choices for components such as colors and fonts could lead to illegible profiles. Font options would need to be limited and colors themes may be preset.
2) Universal icons from open source collections are implemented
3) Navigation is straightforward and consistent across all pages
4) Limited animation options to users, very little animation implemented in platform components
Final Mockups
Development Process
Despite toting ‘full customization,’ Alt.io realistically had to set personalization limits for visual accessibility and application integration.
Both official and 3rd-party applications exist for tracking competitive technical data gathered during a gaming session. While integration with these applications are achievable, creating a single widget template for these tracker applications would be incredibly difficult due to the sheer amount of information channels needed to take into account. A rhythm game score tracker would work incredibly differently than a combat analyzer, for example.
Visual organization of data for different applications were explored. Tested platforms were Speedrun.com (global speedruns), Osu! and Muse Dash (rhythm game leaderboards), Tetr.io (online Tetris leaderboard), and FFLogs (combat analysis for FFXIV).
While these are platforms I am mostly familiar with, there is still the question of what information can be reasonably displayed, and what can be left out— should the widget be even more customizable, allowing users to choose what statistics they specifically wanted displayed?
The best choice in this scenario would simply be to allow Alt.io users the option create their own widgets, similar to game mods and user-coded plugins. This would relieve users of any possible frustration felt when available widgets did not meet their needs.
Alt.io was a fun exploration into user personalization options and limitations without offering a platform akin to a website builder solely making use of custom code. It was fascinating to explore a fully customizable profile builder, because it allowed very little room for information and/or layouts to play a part during the projects development. The users control their own hierarchy of information and how their layout is displayed. Users with different priorities had to be considered, and the option to both include and delete widgets that were either important or irrelevant to their own identity.
I researched and created 5 uniquely themed profiles to test examples of different user priorities, and how information would be organized from their unique perspective.
The mockup example theme I created was based on a casual video game player. Their profile is most likely to include ‘default’ showcases that are common in profile creators or showcases like Steam.
This includes widgets to display:
- Status comment
- Posted media
- Favorite games
- Recently played games
- Favorite achievements
- Recent achievements
- Friends list
- Favorite social media integration
None of these categories take particular precedence over another, and therefore do not have to be organized in a particular hierarchy. The screen is likely to be filled with widgets to complete the space, and not for deliberate showcasing.
The first uniquely designed theme was based on a competitive video game player, revolving around one game. Their profile is most likely to showcase:
- Competitive team name
- Highest rankings
- Favorite achievements
- In-game status
- Competitive statistics
- Friends list
- Profile comments
- The character they are known to play
The most important information to display in this case, aside from the user profile, would be the users team name, seasonal game rankings, and statistics. Therefore, they are the largest widgets in the profile, and contrast all other widgets on the page by retaining a vertical shape rather than horizontal.
The second theme was based on a racing video game player. Their profile is most likely to be aesthetic based or include technical information.
Widgets made use of here are:
- Game status
- Favorite games
- Social media integration
Related widgets not shown in our example:
- Competitive ranking
- Favorite achievements
- Shared media
Racing game players are often interested in simulating the driving experience by using extra equipment and accessories. The user profile widget takes precedence in order to list the players setup components. While other media widgets can be used to share screenshots, here I’ve chosen to make the entire profile background a dramatic shot of an in-game car, implied to be the one the player uses.
The third theme was based on a rhythm video game player. Rhythm game players are very big on personal customization, usually to the point that their interfaces look cluttered.
Their profile is most likely to showcase:
- Statistics
- High scores
- Favorite social media integration
- Streaming status
Related widgets not shown in our example:
- In-game status
- Favorite games
- Shared media
- Friends list
- Profile comments
Rhythm gamers are very community oriented, having several online platforms dedicated to tracking and comparing leaderboards for well known games. Some of the top platforms can be integrated through widgets to track different statistics and achievements. Showcasing scores and statistics are important, but so is community interaction through social media and content creation.
The fourth theme was based on a story-oriented, completionist video game player. Their profile is somewhat community based, if only to share their achievements.
Widgets made use of here:
- Favorite games
- Favorite achievements
- Recent achievements
- Friends list
Related widgets not shown in our example:
- Status comment
- Profile comments
- Shared media
- Favorite social media integration
Achievements are important to this type of user, and therefore are given two widgets in the form of ‘favorites’ and ‘recents’. Their favorite games list shows the amount of time spent on collecting each achievement, further emphasizing their significance.
The fifth unique theme was based on a massively multiplayer online (MMO) video gamer. MMO’s are inherently community based, and while players engage in raids and challenge difficult content, their endgame is character glamour. This leads to players wishing to showcase their obtained equipment, weapons, and titles in a very coordinated, aesthetic manner.
Their profile is most likely to make use of:
- Profile status
- Single shared media
- Competitive team/guild
- In-game status
- Friends list
Related widgets not shown in our example:
- Favorite achievements
- Favorite social media integration
- Highscores/rankings
- Streaming status
- Profile comments
While showcasing technical statistics are important to a portion of the community, achievements are readily understood by a character’s equipment and titles. In this example, the profile image, entire background, and two single media widgets display the user’s character. Of less importance, but still relevant to explaining the players dedication to their community are recent achievements and the guild they are a part of.
Concluding Thoughts
Ultimately a study of limits to personalization, Alt.io was a project full of possibilities both realistic and not, and relied heavily on research into video game player behavior. During the development process, I had many moments of realizating that something could be added, and then wondering if it was an idea too ambitious or unrealistic. This was a project very unlike my previous work that displayed a very straightforward and easily predictable user journey. But for that same reason, it was an incredibly enjoyable and challenging process that pushed me to consider every aspect of functionality and practicality while giving users what was essentially complete control of the platform. There is room for improvement and many other personalization options to be considered, but for a project like this, I am proud of how I was able to tackle the initial problem.
