Improving the User Experience through UI and Animations
ROLE
UX Design, User Research, Visual Design, Motion Design
TIMELINE
6 hours (2023)
RESULT
✅ Visual Feedback
✅ Improved Visual Hierarcy
✅ Updated UI Design
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.
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
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
As the previous screen there is lots of elements to take in here as well. 1. The points 2. Out of the total points 3. Your level 4. The XP needed for a new level 5.+ XP gained 6. Breakdown of the round 7. CTA and the option to choose a new map.
It is structured in a very cluttered way.
SOLUTION - 🏆 VICTORY RESULT SCREEN
CELEBRATION SCREEN
✔️
🎉
Celebration Screen
There is now a seperate screen for the result with celebration animations. This makes it easier for the user to recieve instant feedback regarding their points as well as a feeling of victory. As soon as they are finished with a match/round they will be prompted 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 playful design and to make the users feel more connected to their avatars I decided to include it in this screen. For the updated Visual Design I wanted to aim it towards the target group gamers and within video games this type of match summary is common.
From a monetization point of view, this approach is beneficial because it may encourage users to feel more motivated to buy accessories and clothes for their avatars since they will be able to see them more.
✔️
Clear Visual Hierarchy
The previous icons for the Breakdown and Changing Map was very unclear. I decided to remove the icons completely and instead replaced them with text buttons. I placed the buttons in a better context and where the relevant information belongs.
BEFORE
AFTER
thanks for visiting
Sara. A 2024, based in Stockholm