You might have noticed that Piepacker officially became Jam.gg, with a complete revamp of the platform and new social features! We gave the mic to our Product and Design teams to explain the decisions they made throughout this project 🎙️
❓What are the inspirations behind the new design? How was the community part of the process? How did you incorporate their feedback into the new design?
We did look at a number of other platforms to get inspirations: some are obvious, and I’m sure you can think of some of the most popular streaming platforms (YouTube, Netflix, Twitch), and more obscure ones. However, and while we took some best practices from them to make navigation and game discovery easier, our biggest inspiration has definitely been our users. We’ve had a number of feedback from the community in Discord that we took into consideration, and while other platforms gave us ideas to address those feedback, the real trigger has been our users.
Many users reported that finding games on the platform was very difficult. We used to have 80% of our home screen taken by the gameplay video that helped explaining what each game was. So before being able to understand the overall catalogue and browse it, users were faced with a single overwhelming piece of content, that was giving details about a single specific game. A dumb analogy would be a restaurant menu. No one would put a single dish at the front page with detailed explanations and pictures, you first need to see the full menu (well, maybe not the desert but we’ll get to that), and then you can ask for more information to the waiter. And maybe after you’ve ordered your starters and main plate, you’ll go to the desert.
By the way, can you figure out that I’m French? 😅
Well Jam.gg took the same approach: we got rid of the huge video preview, and made it much easier to browse the platform, not just by putting more games on screen, but also by adding a smart search feature and clickable tags that let users filter out the catalogue. That’s our menu. Then we took inspiration from video streaming platform by putting our video gameplay platform on hover — this is our ‘dish description’. Now, if you wanna learn more about the game, we’ve also added a game page, with more details: description, publisher, release year, console — this is our ‘ask the waiter’ page.
And what about deserts? Well, desert is all about the order in which you want to taste and eat things. On our platform, it’s all about in what order games show up. It’s likely that, when discovering the platform, users want to try out games they know and have enjoyed in the past, or games that are a particularly good fit for our social experience. That’s why we introduced a bigger category atop the page, that features our most popular games, and other categories can be found scrolling down the page.
Tons of other feedback went into this, for example for the gameroom, where we radically changed the way control hints are displayed, or how we let users manage various settings in the room.
❓What challenges did you face in creating a “social gaming” platform?
A big part of making the platform more social was the creation of what we call ‘public rooms’, where people can join other players and have fun together. We faced two main challenges:
a) We needed users to be easily able to find those rooms, from the homepage, and make sensible decisions about which one to join.
b) We needed to provide a safe experience in those rooms.
For the first challenge, we asked users what information they needed to be able to join a room, and in what order of priority. Turned out they would want three main info:
- What game are they playing?
- What language are they speaking?
- Who are the people already in the room and how many are they?
We decided to nest public rooms within the new game modals we created — remember our ‘waiter’? This wasn’t enough though, we needed people to figure out what games had public rooms, because we wouldn’t want them to randomly click on games where no public room was available. So we added a pill in the game cards to show whether people were playing or not. To top it all, we added a specific filter for public rooms, and also a category slider in the homepage.
Once you get to the game modal, you can get to the second-level type of information: language, whether the room is close to you or not — which indicates whether it’s gonna be a good server for you or not — and people in there. We used cards in which we put all this information via pills and other details. One thing we did too is sort the room by location, so that users see the closest room first. In the end, just like for the overall homepage, our design is always getting back to first principles and looking at information hierarchy.
You can do the nicest looking design on earth, if the first information displayed doesn’t help users make the right decisions to navigate and use your platform, it won’t work.
For the second challenge, this one is slightly less design-focused. We needed to make sure that no offensive content would appear on the platform, and for that we asked Bodyguard, a content moderation AI tool, to help us. Bodyguard has a strong contextual moderation for text, and tells us in real time whether a text is considered offensive or not. Based on what Bodyguard tells us, we can automatically trigger a response — delete or hide content, return an error, replace a string, etc.
Now this works well and is all good for text-based content. However, we also have cameras running in videochat in our rooms. We wanted the experience in public rooms to not be a downgrade of private rooms, where our users have fun with AR masks and enjoy a proper videochat experience. At the same time, we also did not want cameras to be fully open in those rooms, as video moderation is a hard problem to solve that no partner does well today. Our solution was to introduce an ‘avatar’ mode. Instead of displaying users’ cameras, we display a purple avatar. The great thing with the avatar is that face tracking is enabled, which means users can still play with masks, and make the avatar move like on ‘enabled’ cameras. This is actually a good example of how we turned a constraint into an actual feature: avatars are also available in private room now and we plan to expand and improve on this so that users can have fun with their shapes and colors, building up on the mask experience!
❓Can you tell us more about the design process and the different versions that you worked on?
We’ve had a long road towards the release, with a lot of back and forth and leading to lots of learnings. We jumped too quickly into the UI part of the design early on: UI is the ‘look and feel’ of the design if you will, while UX is the user journey and overall experience. UI is part of UX, contained within it. A good practice is to first lay out the user journey and core experience, and then jump into the more visual part, and how the interactions are built. For small companies like ours, this is like a full revamp and starting again from scratch.
It was also an interesting time as we had a few new team members joining, who had to adapt and tag along in the middle of this big project. Joining in the midst of this new design project was difficult for new members, to say the least. We’ve been lucky enough to hire the right teammates, and they’ve done an amazing job at jumping onboard and making this new platform their own baby!
The good thing though is that we had an early visual sketch that really helped set the direction and tone of the new platform, which was also a helpful tool to not get lost into endless UX considerations. As we were building the platform, we also took a stab at making it work for smaller devices, which opened a whole new can of worms. We’re hoping that the early alpha we have on mobile will generate a lot of feedback to build a better experience there.
Finally, a big part of the design process also involved getting continuous feedback from users. For that we created a dedicated environment where we put our updates as we implemented them. We shared this environment on Discord with our community members, and ask them to send us our feedback. We got a lot! And over the last month before the release, we did continuous fixing to act upon those feedback. In fact, we’re still addressing some of our users’ early feedback!
❓Any additional words to the community?
We hope they enjoy the new platform and its social features, and that they realize that we owe them 90% of the end result! We have more surprises coming up, but most importantly, we love to hear what they want and need, because that’s what makes the platform alive, so keep the feedback coming, folks!
See you soon on Jam.gg! 🔥
