Overwatch "D.Va" URank App
Overwatch is a team based multiplayer hero shooter game developed by Blizzard Entertainment. Each hero within the game have their own personality and quirks that make them special.
The project encapsulates 3 products as all relate to Overwatch. These products are for my own benefit rather than a client. Video games in general each have their own unique worlds. They have their own set of rules and persona archetypes. As a result, video games are a great incubator for design problems that may not arise in the real world. It really challenges your thought process in an unconventional way. A solution that arises from trying to address these problems may be applicable in the real world as well. It’s all how you frame the problem and relate it to existing issues.
Each of the 3 products are inspired by 3 unique heroes in Overwatch. Each hero persona has their own set of wants, needs, and motivations. What these products do are address an unfulfilled need for the hero that could also exist as a real product within our own world. Each of the products are small in scope but directly address a specific need. In addition, these products could serve as a basis for a much larger project (bigger team, more funds, investors)
The project encapsulates 3 products as all relate to Overwatch. These products are for my own benefit rather than a client. Video games in general each have their own unique worlds. They have their own set of rules and persona archetypes. As a result, video games are a great incubator for design problems that may not arise in the real world. It really challenges your thought process in an unconventional way. A solution that arises from trying to address these problems may be applicable in the real world as well. It’s all how you frame the problem and relate it to existing issues.
Each of the 3 products are inspired by 3 unique heroes in Overwatch. Each hero persona has their own set of wants, needs, and motivations. What these products do are address an unfulfilled need for the hero that could also exist as a real product within our own world. Each of the products are small in scope but directly address a specific need. In addition, these products could serve as a basis for a much larger project (bigger team, more funds, investors)
Product Discovery
Similar to Sombra, I needed to research as I didn’t know what my design problem was. Unlike Sombra however, D.Va had much more information available about her, she had many interests like a 17 year old might have. While helpful, it didn’t make it any easier because it was more difficult to find a focal point. I went about my research in the same manner of establishing who my stakeholder is, what are their desires and needs.
I documented my findings in the form of a persona for me to work from. Determining her motivations was slightly difficult because she herself lacked focus. However, the only time she was focused was when she was playing games. What exactly made her so focused when she was gaming? I determined that it was her competitiveness that drove her. It was evident in voice lines such as “new high score” and “I play to win”. She would trash talk her opponent during matches. She prides herself in being the best. For D.Va, her primary motivation was to be the best. One could argue that her competitiveness transcended the gaming scene and extended into her life as it does for most competitive people. The question became what does a competitive person need? This question was too broad, I need to come up with something more focused.
I went back to her persona, she was a pro gamer and a streamer. Pro gamers not only compare with their own past performances but with other players. I want to see how they stack up against each other. Gaming is setup so players can easily compare. However, aspects like streaming would not be so easy. I focused on the streaming aspect for a second because how does one be competitive in that respect? It is not a direct competition. If she were to compare, it would need to be something like viewership. However, D.Va used multiple platforms/apps. She would need to manage all of her accounts whether it be a game or a stream D.Va would want to be able to see how she stacks up against people in every aspect to fuel her competitive nature. To frame it as a problem;
I went back to her persona, she was a pro gamer and a streamer. Pro gamers not only compare with their own past performances but with other players. I want to see how they stack up against each other. Gaming is setup so players can easily compare. However, aspects like streaming would not be so easy. I focused on the streaming aspect for a second because how does one be competitive in that respect? It is not a direct competition. If she were to compare, it would need to be something like viewership. However, D.Va used multiple platforms/apps. She would need to manage all of her accounts whether it be a game or a stream D.Va would want to be able to see how she stacks up against people in every aspect to fuel her competitive nature. To frame it as a problem;
How can we track and compare stats across multiple platforms and accounts?
I started looking at apps such as Twitch and Youtube as they show the content creator their analytics to track how they are doing. Each platform carefully chose how and what information was important for the user. Apps like Twitch even added a gamification element such as; it shows the user’s viewership in a progress bar and has achievements for when they reach the maximum. After the user gets the stats, one could compare.
However, one may not be able to access all the statistics of another user making the comparison almost impossible. Some apps like Twitch allow the user to link with other platforms such as Discord and Amazon. However, the information linked was limited. After I completed my analysis of apps with analytics, it was time to start conceptualizing.
However, one may not be able to access all the statistics of another user making the comparison almost impossible. Some apps like Twitch allow the user to link with other platforms such as Discord and Amazon. However, the information linked was limited. After I completed my analysis of apps with analytics, it was time to start conceptualizing.
Design Process
Similar to Sombra, I started brainstorming possible features. I used ‘compare and view stats’ as the primary use case as my leap off point for which features the app would need. When the feature list was finalized, I mapped out the primary user flow. From there I created some wireframes to go along with the flow. I used my wireframes for prototyping in Invision before moving on to mock ups. My design principles for this project differed from the other slightly;
Principles
|
Energetic
Quick to digest information Content Focus |
Cute but modern
Soft but assertive |
My style guide included my palette, basic forms, typography, and app icon. My palette was based on her mech suit rather than her outfit. For the forms used in the app, I looked at the contours of the mech suit. The contours were round and the edges were softened by bevels. For typography, I chose a custom font similar to the Overwatch typeface as well as Futura PT for smaller copy. The app icon uses the contours of her mech as a basis. The edges beveled but not all of them. D.Va is strong, I needed to show this in some hard edges and the contrasting gradients with the shape. Following my principles, I made the gradient is soft and whimsical.
|
|
|
Solution
Below is a presentation of the solution called “URank” (referring to the function of the app, showing the user where they rank among others).
Landing Screen
The left screen shows the apps loading screen. I really like how the logo came out.
The left screen shows the apps loading screen. I really like how the logo came out.
Ranking Screen
The middle screen shows the ranking of each user within a particular category. Currently, it is showing ranking for Twitch followers. The user can change the category using the tabs just above the list (things such as most viewed stream, channel views, Average views, etc).
To view the rankings of a different platform, ie; Youtube, the user can tap the logo in the top-left to open a menu with all the platforms the user is subscribed to (within this menu the user can add & remove platforms, and link accounts). A user can see details of each other user by tapping on them. Users can also compare in two ways. Tap the more button (top-right) and select compare users or press and hold a user and drag it over the other user they wish to compare with.
The middle screen shows the ranking of each user within a particular category. Currently, it is showing ranking for Twitch followers. The user can change the category using the tabs just above the list (things such as most viewed stream, channel views, Average views, etc).
To view the rankings of a different platform, ie; Youtube, the user can tap the logo in the top-left to open a menu with all the platforms the user is subscribed to (within this menu the user can add & remove platforms, and link accounts). A user can see details of each other user by tapping on them. Users can also compare in two ways. Tap the more button (top-right) and select compare users or press and hold a user and drag it over the other user they wish to compare with.
Comparison Screen
The right screen shows the comparing screen which compares stats between two users. The user can search the comparison via the search icon at the top right or access the comparison options via the more icon in the same location.
The right screen shows the comparing screen which compares stats between two users. The user can search the comparison via the search icon at the top right or access the comparison options via the more icon in the same location.
