Overwatch - Character Apps

Sombra, D.Va, and Mercy Apps

Hello all. My next "Fake-for-Funsy" app(s) are based on the popular hero shooter, "Overwatch", developed by Blizzard Entertainment. For those that do not know I am a UX/UI designer in Ontario, Canada. I design fake apps for fun to keep myself fresh and come up with new design challenges for myself.

Overwatch has a whole host of characters to choose from, each with their own personality and quirks. I choose to do an app for 3 characters in particular; Sombra, D.Va, and Mercy. There are several reasons for these choices. One, each character falls under a different play style or role; tank, attack (DPS), and healer. The second reason, I play these 3 the most in their respective roles (Sombra being my main and fav).

Now the breakdown of how I went about designing the apps. In the past, I have done fully fleshed out app designs (full docs, flows, all screens), but this exercise was about rapid prototyping and smaller apps. I researched the lore behind each character. I had to understand their motivations. I checked each one's backstory, reviewed voice lines said during matches, and the overall aesthetic of the characters. At the end of my research, I documented a form of persona in a sketch for each character so I can start brainstorming what kind of app each character would need/want.

Sombra

When designing an app for Sombra, I focused on her primary ability which is hacking. Hacking was the most defining aspect of Sombra’s character. She is meant to be a little mysterious as a hacker should. I had to understand why she did it, was it out of the pure thrill? Was she taking to expose wrongdoing? was it to save lives? Watching her origin, I found the answer to my question in one line, “knowledge is power”. This was my basis for designing an app for Sombra. I needed to make an app that suited her primary need which was to gain knowledge. I started to review other knowledge based apps, such as those from newspapers, to see how they present their info. During my research, I went back to Sombra to understand how she digests her knowledge as many people take in info differently. One of my favourite images is of her 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 shows how information is connected and related (6 degrees of Kevin Bacon!). A good app/website example of the network would be Wikipedia. Wikipedia shows you information about your current topic but within the article, it shows related topics or subjects. 

Sombra in front of a network.

Colour palette.

Testing out different logos for Routed.

Wireframing and blocking out content.

With wiki and other news apps as a basis for delivering knowledge I moved on to presentation. I looked at Sombra’s costume for my palette and patterns. I also looked to other artwork/videos about her to get a sense of the style and UI she works with. Ambient glows and line work seemed to be best suited for her. For typography, I used the Overwatch font (Koverwatch) for headers/CTA and Soliel for copy text as the typography had an even weight throughout the characters and the curvature resembled her hair and other details on her body. Little here and little bit there and voila, “Routed” the information network app was born.

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.
 
Full Network 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.
 
Detail 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

Dva

Unlike Sombra, D.Va has much more information about her character. However, because she had more didn’t make it easier. In fact, it was harder to find a focal point. Despite all of her interests I found that D.Va herself is very competitive (which is primarily evident in her voice lines such as “new high score” or “I play to win!”). She also trash talks her opponents during the match. She prides herself in being the best. So for her, a motivation would be to be the best and her need would be a way to see it. We know from her lore that she is a starcraft player and streamer (evident in her emote where she is streaming a game with over 9000 viewers). She probably wants to see how she stacks up against others in games and her numbers when she streams due to her competitiveness. Many apps such as Twitch and Youtube show their content creators analytics to track how they are doing. The difference here is D.Va is involved in more than one platform. When thinking of what to build I thought of password managers. Password managers work across multiple apps and accounts. I thought this could be translated into an analytics manager.

Dva out of her mech suit.

Dva colour palette

Testing out logo for URank.

Wireframing and blocking out content for URank

Now that I understood what it was about, I moved on to the aesthetics. Similar to Sombra, I looked to D.Va’s mech for her colour palette. I looked at the contours of the armor to get a sense of how I things should take shape within the app. I also looked to Overwatch’s UI for the character selection and career profile pages. For Typography I stuck with the Koverwatch font for main headers and I parred it with Futura PT for smaller text. I thought the 2 fonts complimented each other well, having a similar style with slight variations. Thus came “URANK”, providing analytics and rankings across all platforms in one app.

Landing Screen
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.
 
Compare 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.

Mercy

Mercy’s motivations are not driven by her own needs, rather, they are driven by the needs of others. Unlike the other two, I found Mercy to be more transparent. She is a doctor and she takes her profession very seriously as it envelopes her life. She is a caregiver, most of Mercy’s voice lines show a genuine concern for the well-being of her team. Some call her the mom of Overwatch. She constantly asks other characters for check ups and to receive different treatments for lingering ailments. Mercy needed a way to help her colleagues or/and patients. I have seen medical apps before, each have their own focus on what they are addressing (ie; who is the stakeholder). In this case, I know my stakeholder is a doctor. So, whatever I designed would be from their point of view.  So, the question arises, what would a doctor like Mercy need or want in a medical app? Like I mentioned earlier, Mercy keeps tabs on everyone’s health. I thought, how about an app to help her keep track of each of her patients.

Mercy concept art.

Mercy colour palette.

The visuals for this one, I referenced Mercy’s armor and other medical apps. Both are visually clean. They are minimal in design, focusing primarily on the subject rather than intricate details that may distract. Mercy’s palette reinforces the minimal design as it is full muted light tones. However, there are some parts of her design that show stark contrast in colour so I kept that in mind to do use sparingly. In the app, I used a generous amount of space and white to emulate the minimal style and giving it a clean look. I used other health monitoring apps as a basis for how elements should be spaced out. I rounded edges of elements to reflect Mercy’s peaceful demeanor. I strained away from the Koverwatch font this time and went with a thinner and taller typeface to stay consistent with the minimal muted tone. The font I chose was Avenir. In addition, I increased the character spacing to increase the amount of negative space and legibility. I chose to put most of the titles in lowercase to mute their voice. With a quick rez, “CheckUps” was brought to life, tracking all patients and their medical records.

Patient Ailments Screen
The left screen shows the selected patient’s pre-existing conditions. A user can tap the arrow icon at the end of each paragraph to see more details about the condition. At the bottom of the screen is a tab bar with 4 options; overview, ailments, records, and messages. The overview will be discussed shortly and the user is already viewing the ailments. The records tab will show all the appointments and any documents pertaining to the patient. The messages tab allows the user to directly communicate with the patient. The user can send messages here and the patient will receive them via their preferred form of communication. Lastly, the back arrow at the top will bring the user to the patient list screen.
 
Patient List Screen
The middle screen shows a list of all the patients. The user can search through the patients via the search icon at the top right corner. Back button leads to a feed with all updates and messages from all of Mercy’s patients. In addition, the user can add new patients on this screen. When the user taps on a patient, it will open a patient overview.
 
Patient Overview Screen
The right screen shows an overview of the selected patient. Each item highlighted in orange is selectable. The user can change any of the data sets by simply tapping them. As mentioned earlier, there is a tab bar available to the user.