contact ME

 

 

         

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Transcense

Transcense - Title - No Shadow - Angled - Change.png
 


Purpose & Goals

As lead designer at Transcense, my goal was to create a simple and usable UI allowing hard-of-hearing users to participate in conversations in real-time. Major goals of this project were to maintain strong readability and simplicity.

To kickstart the project, we decided to run a design spring. We came up with a list of core features to include based on our main project goals. Collaboration and coordination of the project was done through Trello.

 

 
 

 
 

MICROPHONE INDICATOR

Microphone icon turns orange when someone is speaking. Tapping it turns off the microphone.

 
 
Change Font Size.png

CHANGE TEXT SIZE

Quickly choose from three text sizes to suit the user's needs. Font is Avenir Next.

 
 

IDENTIFY UNRECOGNIZED SPEAKERS

Tap the Unknown Speaker Avatar to quickly identify or add a new person to the conversation.

 
 

MARK AS IMPORTANT

Tapping the Mark as Important button begins bolding captions until tapped again. Swiping right on a body of text bolds the entire selection.

 
 

REPEAT REQUEST

Holding the speak button sends a preset repeat request. Tapping the text box allows user to type a custom response.

 

 
 
  CLICK FOR REAL PIXELS

CLICK FOR REAL PIXELS

 
 


Dark Mode

User testing revealed a strong demand for a dark mode.

I tried to maintain readability by using medium weight type - refraining from the trend of ultra lightweight type against a dark background.

 

 
 
  CLICK FOR REAL PIXELS

CLICK FOR REAL PIXELS

 
 

Designing the login flow for Transcense was a good exercise of creating paths of least resistance. My goal was to maintain a logical flow with a clear sense direction.

 
 
 
 

A lot of emphasis was placed on the design and placement of the buttons. For example, because signing up with Facebook is the path of least resistance, it's corresponding button was placed at the top of the list. Within the buttons themselves, I pulled in the distance between icon and description in an effort to minimize cognitive load.