Improving the User Experience through UI and Animations
GeoGuessr
8 hours
April 2023
Role: UX/UI Designer
CONTEXT
GeoGuessr is a geography game played on the web or their app. I was assigned with improving the User Experience through the UI and pinpointed that the current overall layout felt cluttered and overwhelming. I reworked the Location Feedback Screen and the Result Screen to improve visual hierachy and upgraded the visual design to fit a gaming-theme.
Note: I am not affiliated with GeoGuessr in any way, this was part of a work assignment. I do not claim ownership of any artwork or media used in the mockups.
CONSTRAINTS
Defining project constraints
Limited Resources
This being a work assignment meant that I had no access to Geoguessr's actual user data and analytics. I based my solutions and decisions off my own expertise.
Scope Limitation
Due to limited time to finish the assignment, I limited myself to only work on the Location Feedback Screen and Result Screen.
DISCOVERY
Potential Impact
Cognitive overload. Users dont know what to look for or in what order which may lead to frustration.
Potential Impact
Users think the design looks outdated compared to competitiors. Not a typical aesthetic for the target group Gamers.
HOW MIGHT WE
PROBLEM - 🌍 VICTORY RESULT SCREEN
There is no visual hierarchy and the design feels cluttered and overwhelming
When a user place a guess they are prompted with the Location Feedback Screen. Here they are presented with lots of information to take in.
🤔
Visual Hierarchy
Is the User suppose to look at the Big Green Button in the middle? The Big Blue numbers? Or the Big Red numbers?
❓
Redundant Information
Text that is needed to further explain other text or icons becomes redundant. Usually when this is happening it means that the icons or text isnt clear enough for the users. In this screen the design is explaining the distance and score with a complementary text because its not visually clear on its own.
🥱
Static Map
There is no animation to the map or the line when a user has placed their guess. Animations can help create a feeling of immersion while also being a great tool to visually guide users.
🥴
Too many elements
In total there are 6 elements for the users to go through and digest.
SOLUTION - 🌍 LOCATION FEEDBACK SCREEN
BEFORE
AFTER
✔️
Clear Visual Hierarchy
The user can follow the animation of the bar loading to visually see how far or close their guess was. Information that belongs together are now grouped together, the result button is therefore placed to the side to divide the information in a clear way that is easier to digest.
I am also working with color theory to further guide the user in the loading bar. The closer their guess - the greener. The further away - the more red.
✔️
No more redundant information
No more text to explain other text.
✔️
Animated map
To create immersion the user can see the distance animation, it also moves in the same speed as the bar loading.
✔️
Few elements
Even though this improvement is showcasing the exact same data as the old design, it is divided and visually presented in such a way that it comes across as less.
PROBLEM - 🏆 VICTORY RESULT SCREEN
Unclear icons and too much information
❓
Redundant Information
As the previous screen there is yet again text to further explain other text or icons becomes redundant. The breakdown icon is also very unclear.
🥴
Too many elements
Similar to the previous screen, there are numerous elements to process here:
Current points
Total possible points
Your level
XP needed to level up
XP gained this round
Round performance breakdown
Call-to-action (CTA) and map selection option
The layout feels overly cluttered and could benefit from a clearer structure.
SOLUTION - 🏆 VICTORY RESULT SCREEN
CELEBRATION SCREEN
🎉
✔️
Celebration Screen
There is now a dedicated results screen featuring celebratory animations. This design provides users with immediate feedback on their points while enhancing the sense of accomplishment. As soon as a match concludes, users are presented with this view.
SUMMARY SCREEN
✔️
📝
Summary Screen
After the user has finished the celebration screen they are prompted with the match summary screen.
✔️
Avatar Now Included
To create a more engaging and playful design, I decided to feature user avatars on this screen. This approach fosters a stronger connection between users and their character. The updated visual design is tailored to appeal to gamers, aligning with the common match summary style seen in video games.
From a monetization perspective, prominently displaying avatars can encourage users to invest in accessories and clothing, as they’ll see their customized avatars showcased more frequently.
✔️
Clear Visual Hierarchy
The previous icons for Breakdown and Map Change were unclear. I decided to remove them entirely and replace them with text buttons instead.
These buttons are now placed in a more logical context, directly aligned with the relevant information, making navigation clearer and more intuitive.
BEFORE
AFTER
thanks for visiting
SARA - 2025 - STOCKHOLM