About This Project

This project is a series of visual mockups that I created for a leading social media app. The design is meant for car touch screens. 

Project Rationale

The client wanted me to update the visual design to reflect the third-party app's latest features and functionality.

Design Features

Special emphasis was placed on driver safety, as this version of the app would be used exclusively on car touch screens. For instance, no actions could be performed while the vehicle was in motion. App features were also designed to be used in as few steps as possible, to reduce distractions. 

Design Constraints

The app was designed for the client's specific screen sizes, hardware, and software corresponding to the make of the vehicle. This meant that certain layouts needed to be followed. 

My Contribution

I worked in collaboration with another designer on this project, and we divided up screens equally. 

Team and Timeline

In addition to working with another designer, I collaborated with the client project manager and  and client software engineer. We worked on this project for about two weeks. 

Design Process

The mockups were created using Adobe Illustrator and Axure. To address the fact that users could not perform any actions in the app while the vehicle was in motion, I made two versions of screens. One where buttons were shown in their default state, and one where buttons were shown as disabled. Again, we also wanted the user to take as few steps as possible. To accomplish this, the user was able to have pre-set responses that could be sent out in two taps. They could also repost another user's activity with one tap, and have the vehicle's audio system read app content out loud so that the user did not have to look at the screen.

Design Deliverables

This is only an excerpt of the full deliverable, and app-specific wording has been removed per the NDA agreement.

App main screen - Timeline

App main screen - Timeline

Content Detail screen

Content Detail screen

Reply screen

Reply screen

Edit Presets screen

Edit Presets screen

Edit Presets screen - Distracted Driver mode enabled, buttons disabled when vehicle is in motion

Edit Presets screen - Distracted Driver mode enabled, buttons disabled when vehicle is in motion

Keyboard screen - Distracted Driver mode enabled, buttons disabled when vehicle is in motion

Keyboard screen - Distracted Driver mode enabled, buttons disabled when vehicle is in motion

Project Outcome

This project received an 'A' grade from the client and led to many further projects for me with that same client.