The Beginning
Back in the 2014 I found out about existence of such a game for the first time. This was my first year in university and at that time it was more like a personal guessing challenge. There wasn’t big community as it is now and I stopped playing it, until stumbled across it a few months ago.
GeoGuessr is a browser web game where players guess randomly generated locations from Google Street View. It consists of different game modes, such as singleplayer for game in a pace at your own needs, multiplayer for playing against different players. Main goal is that the closer to the actual location you place pin on the Google Maps the more points you get.
Initial Game Interface
Since the first start of the game interface has been changed a few times. When I first launched it last year interface has drastically changed from what I remember, it had problems but I couldn’t complain cause it brought back old memories. It used dark blue as a main background color with huge gradients at the top of the page. In December 2022 development team pushed an update in which there was a new interface layout, and many players, including myself, found it difficult to use.
Big noticable change was a separate home screen with cute spinning Earth. However if you are not surprised about how big those navigating sections are, let me tell you they also existed on the hiding side menu in the whole game. A lot of sections weren’t even working this time (which shows a desire to deploy changes in a short period of time, often missing some flaws), but it’s not the point of the article, lets move to the next pages to create a general impression.
Design of the site is clunky and inconsistent. Main concept was centered block sections with the names of game modes. It wasn’t clear why some of the blocks were arranged in one way and others in another. Whole multiplayer page includes 3 features: tournaments, season, game modes. But the thing is that game modes appear twice in the multiplayer section, and they are unnecessary here (not saying about strange gradients), because they mostly functional on the season page.
Since I am user experience designer, such changes led to the fact that I decided to come up with how the game could look different.
Project Phases
I started from the creating the plan of the main actions.
- Idea: finding pain points and ways to eliminate them, one of the main stages of creating useful user interface
- Research: field study is a research method to observe and understand users in their natural environment. We as a designers can gain a deeper understanding of user needs and experiences
- Wireframes: includes functional map, which is important here for creating good user flow. And wireframes themself for actual representaion of the interface without details
- Prototypes: after we figured out the location of the blocks, navigation, we can finish final look of the product by adding color, images and other small details
Functional Map
Very important step so I’ll dive in more and tell you about details and decisions I’ve made.
Lots of the features in the initial interface where placed unintuitive and demanded many steps to reach them. Good practice here is to think about convinient and logically locationing of these elements. Asking questions like “Whats the most used modes and functions?” and “How can we make them available in less possible steps” helps at this stage.
My maps feature was located in both Maps and Profile. Liked Maps was placed in Maps tab, also in Profile section. Ongoing games could be found in the Singleplayer tab and the Profile section. Great idea was to move all these useful functions under the Profile hover menu. That’s super easy to use without having to navigate through the multiple pages, plus it’s somewhat standard placement in the modern interfaces. Creating functional maps helps us gather all the information in one place.
Wireframes
At this stage I already knew that side navigation is the best choice, it should always be available for the player to able quickly switch to desired mode. I’ve also considered the option to make it hoverable for the saving some display space, with clear icons that can work good, but stayed with the classic stationary style because I had some ideas to implement in mind.
Final Prototypes
For the main style of the game, I took the original idea as a basis, but chose a few new real sky gradients. The idea is that each category got it’s own gradient, it is also present on the selected category of the navigation bar.
Home page
As an entering point of the whole game, home page should be very useful. Announcements element is great addition here so we can see any important and upcoming events. Recent modes section allows to launch game without transitions between different pages if player wants play latest games right from the home page. At the header we now have quick access to the Chat and Notifications so you don’t miss anything important.
Multiplayer
Remember this transitional page in the multiplayer mode with 3 elements? We really dont need that, and now with chosen Multiplayer tab on the side menu we move stright to the season page, which already includes game modes. Why have two different leaderboard options when we can hide all related information under one button.
Map page
This page is one of those where I had to implement a whole new system. Initial interface suggested player to click several times on the play button to actually start a game. That’s kind of misleading behavior which have to be avoided. So I came up with idea of having game settings right on the map page, if you are a beginner or just don’t want to use customized settings, just press green Call To Action button for starting a game. You can set up preffered settings or generate and copy link for challenge your friend. It’s all up to you, with that convinient design
Conclusion
I tried to cover more about my project in this article, hope it was interesting to read and some things became more clear. There are more images of the final work in my Behance presentation, so in case you interested to see, links are below.
As of the current state of the game, its quite symbolic the day before I posted my work, interface was pushed even further with adding horizontal scrolling on some pages, which is questionable on the desktop and needs to be tested. My whole new suggested concept in no way is pretending to be ultimate truth, I wanted convey to the game team that they need to listen their community in terms of adding new modes or making changes to the current state, and no need in changing UI every month, it can be one big but very high quality change that won’t have to be redone soon again.
Thank you for reading!
Appreciate any claps and questions in the comment section
