Overwatch "Sombra" Routed 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
I didn’t know what I was designing nor did I know what problem or need I was trying to address. The first thing I needed to do is research the lore behind the hero. I needed to understand my user, which in this case was the hero. This meant looking at documented character sheets from the developers, voice lines, interactions between other heroes (because who are is defined by our interactions with the world and people around us), animations, and overall aesthetic choices for her costume. Once the data was all together, I created a persona to work with as a starting point. I was able to identify some of her motivations in life and what she needs and wants.
I decided to focus on her fascination with hacking as an area for continued exploration. One of her primary characteristics is she is a hacker. She has hacked into multiple systems and sold the data. When she is conversing with other heroes, she taunts them by saying she knows the “truth” about them. Sombra not only hacks for a living but as her passion. But why? As I sifted through the data I began to realize, she hacks to gain information because in the age of technology, knowledge is power. She wanted to be strong; the more she knew the stronger she was. That’s why she hung that information about the heads of the other heroes, to show she has power over them. From this, I was able to form an exploratory question for possible development;
I decided to focus on her fascination with hacking as an area for continued exploration. One of her primary characteristics is she is a hacker. She has hacked into multiple systems and sold the data. When she is conversing with other heroes, she taunts them by saying she knows the “truth” about them. Sombra not only hacks for a living but as her passion. But why? As I sifted through the data I began to realize, she hacks to gain information because in the age of technology, knowledge is power. She wanted to be strong; the more she knew the stronger she was. That’s why she hung that information about the heads of the other heroes, to show she has power over them. From this, I was able to form an exploratory question for possible development;
How might we gather information?
I started to look at informative apps such as Quora and Wikipedia. I wanted to understand how they function and how people use them. One function that stuck out to me was the ability to find related data. For example; people generally go to Wikipedia to figure something out quickly. With Wikipedia, you are able to navigate to related information quickly within the article itself. You could think of it as a node system, where what you were looking for is the main node and the branches are related information. You could keep heading further and further down the line.
This allows the user the ability to form a well rounded knowledge base around a topic. However, after going through reviews, forums, and feedback, I noticed users were critical of how related information was displayed and absorbed. If anything they found it difficult to visualize how topics were related. After looking at Qoura, Wikipedia, and other knowledge based apps, the question changed to something more specific;
This allows the user the ability to form a well rounded knowledge base around a topic. However, after going through reviews, forums, and feedback, I noticed users were critical of how related information was displayed and absorbed. If anything they found it difficult to visualize how topics were related. After looking at Qoura, Wikipedia, and other knowledge based apps, the question changed to something more specific;
How can we help people deepen their understanding of how topics are related to one another?
Design Process
Initially, I wrote out what people would need within an app to help them gather information quickly and how they might find related information. As I was brainstorming the features, I noticed I was using a node system again. The node system is present in the game itself. One of my favourite images is of Sombra in front of a string network of people, organizations, places, all linked like from some detective series when they are trying to link a murder. The network showed how information is connected and related (6 degrees of Kevin Bacon!).
I decided that the node system would be the primary feature within the app as it was the best way to show information and how it relates to one another. With the node system as my basis and design direction, I was able to see how other features would go together. I put together some wireframes and used Invision to prototype how it would work.
Before moving on to mock ups, I came up with a style guide for myself to work from. Within the style guide I set some design principles based on Sombra’s characteristics;
Before moving on to mock ups, I came up with a style guide for myself to work from. Within the style guide I set some design principles based on Sombra’s characteristics;
Principles
|
Systematic and Organized
Intricate but not complicated |
Depth over Shallowness
Energetic and Vibrant |
For my palette, I took swatches of Sombra’s costume. For typography, I chose something that was systematic in nature (like data) with an even weight throughout each character. I also made sure the typography had some character to it to resemble her personality and the dynamism of her hair/costume. In terms of forms, I again tried to use hints from her costume. Forms would be systematic, using simple geometric shapes. But they would be dynamically placed like the details on her suit, pieces overlapping and combined. In terms of the app icon, I focused on my principles and referenced the node system for inspiration. I thought of a tree as that is what nodes resemble.
|
|
|
Solution
Below is a presentation of the final product called “Routed”. (The name came from the idea that users would navigate down the node system like a trail or route)
Article Screen
The left screen shows an article about Talon. The user can see a back button to return to the network view of the currently searched subject. The bottom hexagon button gives the user access to particular options available for the article such as saving and sharing it.
Searchable or keywords relating to other topics are annotated with blue hexagons, indicating to the user they are tapable. If the user taps them, it will show the number of connections in the network as well as the number of networks the user has already viewed and not viewed. The user can then tap the connections to see the full network.
The left screen shows an article about Talon. The user can see a back button to return to the network view of the currently searched subject. The bottom hexagon button gives the user access to particular options available for the article such as saving and sharing it.
Searchable or keywords relating to other topics are annotated with blue hexagons, indicating to the user they are tapable. If the user taps them, it will show the number of connections in the network as well as the number of networks the user has already viewed and not viewed. The user can then tap the connections to see the full network.
Node System Screen
The middle screen shows the full network of information based on what the user searched for or tapped as a keyword. The search result/keyword will be hidden unless the user taps the main hexagon at the top of the screen. This hexagon acts as the root of the network and below shows all related connections. Each connection will branch revealing other sub-connections.
The connection physical size is equal to the number of sub-connections under it. Some connections will have too many connections to display at once and thus will appear as their own networks, which is represented by lines running from the connection to the edge of the screen. Users can see these networks by pressing and holding down on the network/connection and then swiping off screen. This will show a new network with the selected connection as the root on top. When a user taps a connection, it will show a detail view.
The middle screen shows the full network of information based on what the user searched for or tapped as a keyword. The search result/keyword will be hidden unless the user taps the main hexagon at the top of the screen. This hexagon acts as the root of the network and below shows all related connections. Each connection will branch revealing other sub-connections.
The connection physical size is equal to the number of sub-connections under it. Some connections will have too many connections to display at once and thus will appear as their own networks, which is represented by lines running from the connection to the edge of the screen. Users can see these networks by pressing and holding down on the network/connection and then swiping off screen. This will show a new network with the selected connection as the root on top. When a user taps a connection, it will show a detail view.
Peek View
The right screen shows a detail view of a connection. Best way to describe it is as a peek or a summary of the connection before accessing an article view. To access the article view of the selected connection, the user will tap details in the top right corner.
The right screen shows a detail view of a connection. Best way to describe it is as a peek or a summary of the connection before accessing an article view. To access the article view of the selected connection, the user will tap details in the top right corner.
