Digital Product & UX/UI Designer
Key@2.png

Key

Digital Product Design • 2017 • Design

After moving to New York City in April of 2017, it became clear that the city was not built with accessibility in mind. Whether it’s a few stairs leading up to the front door of a corner store, or tables which are placed far too close together, there are a lot of unknowns for people with restrictions when they need to access certain goods and services. That can dampen a potentially adventurous spirit. 

Key is a mobile application that allows users to find businesses and services based on their accessibility needs. By looking at accessibility needs as design states, rather than creating specific personas, I was able to design an application that works for those who utilize wheelchairs, as well as parents who need enough space in a restaurant to fit a stroller.

 

Phase One: Brand Development

BRAND PERSONA

Traits

Fun, but not tacky

Vibrant, but not overwhelming

Trustworthy, but not stodgy

Contemporary, but not trendy

Casual, but not disorderly

Voice

The voice of our brand is meant to be casual but still delivers clear and concise messages to the user. We use positive reinforcement as well as custom messages to create a sense of relationship between the brand and the user. 

In-App greeting: Welcome back, Sonali!

Success feedback: Great job, Sonali! You added your first favorite location.

Error feedback: Oops! It looks like you didn't add an accessibility preference. Choose at least one before going to the next step!

Visual Lexicon

Colour: The colours should be bright and vibrant to convey youthfulness and fun, but should be white with pops of colour so as to not overwhelm the user. 

Typography: the type style will be in line with Apple's HIG and will use sans-serif typography for all headers. Slab serif will be used for body copy to make the text more readable. 

 

Site Map

The site map was a critical component to designing this application before diving into Sketch. Figuring out the intricacies of how a user gets from one place to another, what they can and cannot access before signing up, and how information needs to be ordered to be most efficient, are all important for building a strong foundation for any digital product. 

Accessibility App Wireframe.png
 

Wireframing & Prototyping

Wireframe #1: Map Flow

A super basic starting off point that I used to figure out the order of events and how those played out visually for a user in a hero flow. 

Wireframe #2: Onboarding Flow

My second wireframe was an onboarding flow that was a little more designed and the UI was coming together a little more.

Branding & Identity

The branding options I came up with were all based on aspects of the brand persona I had developed in the beginning of the project.