Luna
Luna Gaming Platform Homepage Design
OVERVIEW
Luna is a cloud gaming service that allows users to play their favorite games on devices they already own. A game subscription service developed and operated by Amazon. This project is to design the homepage for Luna gaming with Github and VS Code.
MY ROLE
Solo-
UX Designer
TOOLS
DURATION
3 weeks - Part time
CHALLENGES
Gamers need a gaming platform that is easy to navigate, and functional. They enjoy playing a game with friends online and game achievements. Searching for features and information sometimes takes time and leaves players frustrated. So, I decided to develop an appealing, user-friendly, and functional webpage that would require less time to search.
PROBLEM STATEMENT
As a gamer, Henry needs an efficient way to explore cloud gaming platforms to improve his gaming experience and enjoy his free time.
GOALS
Provide engaging UI content to enhance the gaming experience. The ability to provide intuitive navigation for users' particular interests and encourage a repeat visit.
RESEARCH/ANALYSIS
First I created an interview guide and conducted 5 Interviews to find out users' behavior with existing gaming platforms and understand important features for users on the gaming platforms.
After my interviews, I grouped and categorized the data into an Affinity Map which enabled me to have a clearer understanding of the user behavior.
USER PERSONA
To help focus the design efforts on addressing user behaviors and pain points based on the research, I created a persona to represent the typical users of the platform.
Goals & Needs
Access to game more information
Needs an efficient way to find all the functions and settings on the platform
Does not want to spend time downloading and updating before playing
Customization platform skin and user avatar
Notification on game deals and custom recommendations
Henry Norris
Age 34
Product Manager
Irvine, CA
Behavioral Demographics + Drive
Enjoy game achievements.
He owns multiple game devices.
Loves spending free time playing games online with friends.
Works hard during the day and gaming helps him release stress
Likes new technology, and likes to try new technology that interests him
Hesitations & Pain Points
Not enough customization on the platform
Games are expensive always looking for deals
Takes a long time to go through the game library
Download and update take a long time for both system and games
Information on the platform is not organized and hard to navigate
Features are not clear enough, can’t find what he was looking for
USER JOURNEY MAP
With the user persona in mind, I created a user journey map in order to deep dive into the user's experiences and pain points.
UX Scenario
Henry is a product manager always working hard, he enjoys online gaming with friends in his free time. Through online gaming, he is able to release stress and have a sense of escaping from the real world. Luna Gaming provides an open-and-play platform so he can enjoy his free time more efficiently.
The Experience
1. Henry is looking for a gaming device because he wants to play the latest game with friends
2. He finds there are several different devices that he can choose from
3. He decides to buy the Playstation 5 but it is sold out everywhere
4. He searches the web and finds the Luna gaming platform which he can play multiple games with a monthly flat rate
5. He is so excited and signs up for the UBISOFT channel and orders the Luna controller
6. Henry starts setting up a Luna account with his fire TV but he does not know how to set up his controller
7. He finds the controller paring option in the setting menu and follows the instruction as directed
8. Henry is able to get the controller paired up with the system and ready to play
9. Henry is so excited and tells his friends about it so they can play together
COMPETITORS ANALYSIS
As part of my Competitor Analysis, I conducted an analysis on four platforms with similar product offerings to Luna. These were: PS5, Battlenet, Steam and Apple Arcade.
I focused my research on User Interface elements and homepage functionality.
WIREFRAME
Design with the goal of incorporating features that addressed user wants and needs uncovered in my user research, the page is focused on opening and playing with all the elements of user needs.
Home page
Game Library
PAGE REDLINE
After wireframing the design of the webpage, I redline the page for the coding process
STYLE GUIDE
Typography
The font uses for the page are Arial, and Helvetica from the Sans-Serif font family
Color palette
I've taken the color from the Luna logo to create this color palette
Icon
I used Font Awesome to code icons for for page
USABILITY TESTING
I conducted 3 usability testing with the following 2 tasks:
Task 1: Can you find the Search Bar on the page?
Task 2: Can you tell me a category of the game library?
3 out of 3 users completed the task without difficulties.
FINAL WEBPAGE DEVELOPMENT
I have combined all the elements shown throughout the design process to create what I feel is a functional, fun and approachable page. The final webpage includes:
Fixed position sidebar with hover effect for each icon
A jumping play button with a shadow hover effect
Game library scrollable and outlined when hovered
FINAL THOUGHTS / CONCLUSION
Future Iterations:
Build a dropdown menu for the sidebar
Customizable user avatar
Build out the game information page
Build clickable prototype
Lessons Learned:
With the understanding of coding, the design and effect are limitless
Understanding the coding layout is very helpful
Seeing the page come to life is rewarding