Car Repair Service Interface

UI DESIGN AND ANIMATION BUILT WITH HMTL5 CODE

Overview

The Service Video widget allows users to identify the problem with their car and determine what repair they need. The primary goal is to get them to go to the dealership. I first designed the animated repair video itself, which you will find at the bottom of the page. Although this is a rendered video, the final product is web based and coded so it can be completely dynamic and unique to each user.

I designed the UI/UX for the search interface as well. The user enters in their make, model, and year and then has an option to search by Category or by the Indicator Light they may see in their car. Once they select a video, it will play in their browser with an accompanied pre-recored voice over that cues the graphics. Because it’s dynamic, the user sees their own car, location, and information about the repair they selected.

Skills Involved

UI/UX, Graphic Design, Animation, Editing

Tools

Ae, Ps, Ai, Premiere

When

June 2016

Follow the step by step interface below

Summary

One of the key takeaways from this is how revolutionary the product is. Most of the time I received little direction as to what the interface was supposed to look like, because we were building something that simply doesn’t exist yet. My goal was to design a clean, sleek, and flat user experience to avoid an overwhelming amount of information in one space.