"The Xbox app brings together your friends, games, and accomplishments from across your devices. Stay connected to your gaming community on the go, control your Xbox One from the app, and buy new games from the store. With your gaming life all in one place, the Xbox app keeps you connected to the games and gamers that matter most. "
By collaborating with our researcher team, we found that more than 75% of the users were also using it as gaming social app to chat with their friends to set up a gaming dates or to check their friends' new achievements. Based on these findings, the key goal for Xbox app 2.0 was to keep the goodness of previous the version and translate it to Xbox LIVE social app.
By utilizing the same design framework and components for both mobile and tablet, we reduced around 60% of the engineering costs and also keep the user experience consistent between both of the platform.
Home screen
Since over 75% of the users are using it as social app for gaming, we prioritized the top social features on the home page, which are:1. Activity feed, 2. Friends online. 3. Messages and notifications.
Messages
Left menu
Now playing menu - Minimal view
Now playing menu - Full view
With an Xbox One:
• Use the app to navigate using your device’s keyboard and touch
• Use the app as a media controller for your Xbox One (play, pause, etc)
User profile
Follow the same principle, we prioritize activity feed on the game profile page. The rest of the contents are located under the 4 buttons underneath the game header, which are 1. bio 2. friends 3. achievements 4. game clips.
User profile destinations
1. bio 2. friends 3. achievements 4. game clips.
Game profile
Following the same principles, we prioritized the social feature: 1. friends who play and 2. activity feed on the game profile page. The rest of the contents are located under the 4 buttons underneath the game header, which are 1. detail info. 2. friends who play. 3. achievements 4. game clips.
Game detail info
Game detail info -- Purchase page
Achievements
This 1minute video shows the flows which represents the key features:
1. On home page, check the live feeds and friends who are online. 2. Select a shared game clip to check the video and comments. 3. Swipe left to view the next feed. 4. Check messages. 5. Check friends list & check a friends profile page.
Home page
Since over 75% of the users are using it as social app for gaming, we prioritized the top social features on the home page, which are: 1. Activity feed, 2. Friends online. 3. Messages and notifications.
Detail page
After studying the information for each type of content, I reduced the layout template from 6-7 in the previous version to only one. By making this modification, we reduced over 50% of engineering costs.
UI components samples
