michael puskas
View

Mobile App Design

Skills: User Discovery, App Design, Wireframing, Prototyping, Design Documentation

 
 

Concept

The Power Rangers are a group of rad teens with access to giant robots.
“What could they possibly need from a phone app?”, you might ask.
Well, the rangers turned to modern technology for the same reason as everyone else: convenience.

 

Exploring The User


 
In the discovery phase, I interviewed a potential user and developed a simple persona.
 
Jason, as a rad teen, has most of his ranger-related needs met by his wrist communicator. However, he isn’t always in a situation where it’s safe to make a check-in call to Alpha 5. Thus, we discovered a need for a covert way to quickly monitor his zord’s status.
 
As the Red Ranger, most zord-related needs are met by the cockpit’s instrumentation. However, it doesn’t provide any up-to-date information about the status of his teammate’s zords. This can make it difficult to check in the heat of battle if they’re doing alright, and if they can form the Megazord. Here we discovered a second need, for team zord monitoring.

 
 

Design


 
To begin the design phase, I planned how the screens would be laid out to achieve the required functionality. As the needs of the user are fairly focused, I decided on a 2 screen design: one where teen Jason can accomplish his goals, and one where the Red Ranger can accomplish his.
 
 

 
A significant challenge was deciding how to represent the zord’s individual part status in a way that could be understood at-a-glance.
 
Relying on our human proclivity towards images over words, a model was designed to represent the user’s zord. The outline of each part changes color to yellow and red as the armor and internal system health is depleted. This provides a complete overview of the zord’s health from a quick glance.
One downside is that a model must be drawn for each zord, but drawing 5 models is still fairly low-cost.
 
For additional information, the user can select an individual part by tapping on the associated circle. The “circle hotspot” interaction was chosen to give the user’s thumb ample room for tapping without mistakes.
 
 

 
For viewing the team status, a simple, single-page view was designed.
 
At the top of the view is an at-a-glance indicator of whether the Megazord can be formed, and which zords are ready to combine.
 
The rest of the page provides an overview of the user’s teammates zord health, with an additional indicator of their readiness to combine.

 
 

Wireframing, Prototyping, Solving Emergent Problems

(Click the “View” button above to view the interactive prototype.)
 
Wireframing was done using Figma, a web-based Sketch-like program.
Material Design was used as the design system, due to the app being targeted at Android devices.
InVision was used to develop the interactive prototype.
 
I worked through the designs in my head and on paper before wireframing, to solve any immediate issues before moving to the more expensive processes. No changes were made during wireframing, but one major issue was found through the prototype.
 
Originally, a “tap on the parts to select them” interaction was implemented for the model, but implementing this in the prototype exposed some issues:
First, developing this system would be troublesome due to either needing to break the parts into objects and aligning them somehow, or to leave the model as an image and place a million hitboxes to approximate the shapes.
Second, tapping on the less-exposed parts such as the torso would be very error-prone and a large potential pain point for the user.
 
I chose to switch to the “circle hotspot” interaction to solve these issues.

 
 

Documentation

Documentation was developed in the form of redlines with annotations and componentization where applicable.

Team Status Redline
« 1 of 4 »

 
 

Takeaways

I’m very happy with the results of the project. The finished design solves the original needs well, with a goal-based flow.
I’m confident that, if developed, this app will be extremely useful to Jason and the rest of the Rangers.

© Michael Puskas, 2016. All rights reserved.