Powerability: Design Elements

Sitemap

Screen Shot 2021-03-07 at 5.34.24 PM.png

Routes included onboarding, manual wheelchair, and scheduling, as well as edge cases. A prototype was created using wireframes which were used in the guerilla usability test using Marvel.

Five users tested it to see if the design and flow made sense. Their feedback led to the creation of the style guide which would lead design decisions for the Powerability app.

Branding

The name for the app would be called Powerability, as both caregivers and patients want to have power and ability in their daily lives and freedom.

Moodboard

A mood board was created in the creation of the brand that led to the style guide.

 

Personality: Purpose gives caregivers and patients the power and ability to have more confidence in their daily lives

 

Attributes: Safety, compatibility, effort, and caring

Screen Shot 2021-03-07 at 5.40.43 PM.png

Style Guide

Image Inspiration
  • The images were inspired by the attributes of safety, efforness, caring, and compatibility.

 

  • The inspiration also uses the two terms that make up the name: power and ability which are seen in the images.

 

  • Images were chosen from options that emulated a calmness and trustworthiness, which is seen in the colors.

UI Inspiration
  • The UI was inspired by attributes of effortless, caring, safety, and compatibility

  • The colors that were chosen were warm, accessible colors of trust and calmness.

  • The UI examples were chosen from healthcare options that were clear, simple, and easy to understand and navigate

Created the colors, logo, grid, typography, icons, UI elements and imagery so that they were consistent across the app. 

Logo

In creating the logo for the app, it was originally using separate elements that emulate power (in a person) and  ability. Unfortunately those elements didn’t quite work and were on the harsh side.  This is the second iteration, realizing that the image needed to be consistent across platforms and background. The original had multiple colors and a font that did not work for the final design.  As this image for the logo, still uses the mobility and power themes, was chosen to represent the Powerability  app for caregivers.

Here are the greys that were used depending on the background:

The primary colors were chosen based off of the purple of calm and peace and the blue that was a color that showed power and resilience:

Colors

Screen Shot 2021-03-08 at 4.37.42 PM.png
Screen Shot 2021-03-08 at 4.39.33 PM.png

Typography

Font Family: Roboto

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

Header and Body

This is the weight and font of H1: Roboto bold, 32 pt font

This is the weight and font of H2: Roboto bold, 24 pt font

This is the weight and font of H3: Roboto bold, 18 pt font

This is the weight and font of the body: Roboto Regular, 14 pt font

This is the weight and font of the captions: Roboto Regular, 12 pt font

This is the weight and font of the footer: Roboto Semibold, 12 pt font

Design

After the style guide was complete, it was used to make decisions in the high-fidelity mockups. Red routes, including onboarding, scheduling, wheelchairs, and settings and account information.

Profile Screens

Profile.png
Profile.png

The initial profile screen included a text box which showed to be unsuccessful. In the high fidelity screen, I changed text boxes to check boxes and included patient assessment questions.

In addition the bottom bar was simplified to just have equipment, home, search, and profile. It also included a setting button.

No Results Screens

No results.png
No results.png

Scheduling Screens

Schedule.png
Schedule.png

In the scheduling, the difficulty was in determining whether or not to use a regular button, a radio button, or a toggle switch. After the usability tests, I elicited to use the radio button for simplicity sake.

New Screens

Home.png
Preferences.png

Initially there was no “home” screen, as the equipment page served as a home page but users felt that having a simplified home page created a better user experience. Preferences relate to the actual equipment used, as opposed