Interactive Design

I use Axure to finish basic interactive way. And use After Effect to finish some animation part.

Screen Shot 2016-03-12 at 6.24.10 PM.pngScreen Shot 2016-03-12 at 6.25.55 PM.png


UI Design

Log in:

Use bluetooth to connect with user’s vehicle.

Browse page:

Browse vehicle basic information.

Car status:

Select car part you want to see detail. Then the page move to this part information. User can update their maintenance information.


Show all the car light, and highlight flash light. Click icon, move into more information. Explain how to deal with the situation, when this light flash. And can connect to car part which possible cause this problem happen.

At Shop:

List all the service, click can into evaluation page. Input your service relevant information, the got evaluation result.



  • Right:
  • Three functions are easy to understand and operate.
  • The logical of sitemap is right.
  • Wrong:
  • When design low fide prototype, I found some interactive way can use on web but fewer use in IOS platform.
  • Mistake1:
  • Text input bar can use in website just on same page, But in ios, we need to click and move to another page.
  • How to correct
  • Change text input bar from one page to two page. Click and move to a new page input text.
  • Screen Shot 2016-03-03 at 9.38.30 PM.png
  • Mistake2:
  • Use number stepper to select number is really hard and slow on phone.
  • How to correct:
  • Change number stepper to calendar.
  • Screen Shot 2016-03-03 at 9.38.39 PM.png
  • Mistake3:
  • “Open menu” icon is really hard to recognize, people may misunderstand its meaning.
  • How to correct:
  • Change icon, make it’s meaning more clearly.
  • Screen Shot 2016-03-03 at 9.38.45 PM.png


log in (1)

This week I move into sitemap and wireframe. The first thing I did is list all of the function that I want show on my app.


Then, I compared, ranked and ordered them. When I finish one interface, I will go back to check is all the function put into it.

Car status
My Car Status
At Shop
Prevent from fraud
Check history and status

Ideation & Sketch


This week, I move into ideation and sketch. This app have three function: vehicle maintenance reminder, common car problems diagnose and prevent from repair shop scams.

Screen Shot 2016-01-28 at 3.13.28 PM.png

The structure show, first log in vehicle information, next browse your vehicle basic status. Then move to main function.


My Car:

This part shows car maintenance informations and status. User rotate compass to select which part they want to know. And detail page shows maintenance status.


In diagnose, user could search the warning light that they meet. The app would explain the reason of why this light flash and give relevant suggestion.

At shop:

This function would help users to determine whether it be scammed.  The app would estimate the service whether it is reasonable.


For the sketch, I search some relevant car repair service design, which give much inspiration.

Car care schedule

A visual guide to car maintenance

Insight & Analyze Survey

With further research, I continue searching relevant information and doing survey. So far, numerous results were gathered to establish proven insights, and I will show the representative example.

Insight 1: People are concerned with their vehicle, but lack of knowledge about it.

From the survey, I found that  people maintain vehicle regularly, but only a few of them will choose to do it by themselves.

This slideshow requires JavaScript.

Insight 2: People easily trust expert, so they may be cheat easily.

From survey, video and relevant article, I found that auto repair scram is really common. However people hard to identify.

Screen Shot 2016-01-21 at 2.33.47 PM.png
Lots of people meet business promotion, most of them willing to follow assistant’s advice.


Screen Shot 2016-01-20 at 4.26.05 PM
This video shows repair store how to cheat customers.

From Spencer Wright’s article, shows ten common car repair scam:

1. Premature brake pads/rotors

2. Fuel injection service

3. Premature shock/strut replacement

4. Unneeded air conditioning recharge

5. Premature cooling-system flush

6. Transmission treatment

7. Replacing air and/or cabin filter prematurely

8. Unnecessary upgrade to synthetic oil

9. Engine treatment

10. Replacing spark plugs prematurely

Insight 3: Vehicle trouble is common in life, the first thing people do is ask one who has knowledge in vehicle field for help.

Screen Shot 2016-01-21 at 2.39.32 PM.png
lots of people meet vehicle trouble
wordcloud (1).png
The key word show most people choose ask for others help, when meet accident

Other Conclusion:

wordcloud (2).png
Tire, Light, Oil are easier brake parts.


Oil change scam Hidden camera investigation with CBC Marketplace and Wrenchspinne

Top 10: Mechanic Scams

Beware of These Common Car Repair Scams

Auto repair scams

Kick off: Assumption & Secondary Research


For the final project, I plan to design a self diagnoses and easy self repair application, which can help people quickly find vehicle trouble reason and solution. I named it iFix, which means I can fix it! From the interview, I found that some of my friends are less knowledge on how their vehicle works. When their vehicle has a breakdown, they become nervous and overwhelmed. Therefore, I think people have less information on their vehicle, but they really need to know how car works.

In order to prove my assumption, I read some of relevant information and materials:

Jessi Lang of Motor Trend said,

“Fewer and fewer people have the particular skills to fix these increasingly complicated control systems. It used to be possible to build a basic used vehicle, but today [it] requires professional skills.”

Jiffy Lube’s said,

“Cars are more complex with their controlled technology and information systems. ”

That’s means people hard to know about car inner and outer works,  since the informations systems is too complex.

And Jim Gorzelany list 10 ways that may be killing people’s car since they don’t know,

  1. Putting off recommended / scheduled maintenance.
  2. Ignoring the “check engine” light.
  3. Not changing the oil, or not having it changed on time
  4. Not checking tire pressure.
  5. Neglecting coolant, brake, transmission and other fluid services.
  6. Continuing to drive when the vehicle is overheating.
  7. Not changing fuel and air filters.
  8. Having unqualified shops service your vehicle.
  9. Using generic aftermarket parts instead of original equipment manufacturer (OEM)-quality parts.
  10. Trying to service your own high-tech vehicle.

Base on the secondary research,  prove my assumption. The result show people have less information on their vehicle, but they really need to know how car works.

Competitive Research:

From Thorin Klosowski’ s article The Car Repairs You Can (Seriously) Do Yourself, Despite Your Abilities,     list a couple of useful method to repair car. And this article shows some websites and youtube video channel that suitable for beginners.

AutoMD and Expert Village are both excellent resources of general purpose videos, how-to guides, and diagnostic assistance for the most common car problems.      

RepairPal is an excellent resource for checking the average cost of repairs in a shop and can help you decide if it’s worth the time and effort to do it yourself.

Screen Shot 2016-01-13 at 12.27.27 PM.png
AutoMD shows self repair video

Screen Shot 2016-01-11 at 9.11.23 PM.png

Screen Shot 2016-01-11 at 9.11.47 PM.png
RepairPal shows your car common problems and list the money that you need to spend



Does It Matter If Millennials Don’t Know How Cars Work?

10 Ways You May Be Killing Your Car

The Car Repairs You Can (Seriously) Do Yourself, Despite Your Abilities


Expert Village