/
truecar.html
143 lines (130 loc) · 6.58 KB
/
truecar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<title>Erin Singer Portfolio Site</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!-- CSS -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
</head>
<body>
<div class="navigation visible-lg visible-md visible-sm">
<div class="navigation_overlay centered">
<div class="nav_item">
<a href="index.html#about">
ABOUT
</a>
</div>
<div class="nav_item">
<a href="index.html#experience">
EXPERIENCE
</a>
</div>
<div class="nav_item">
<a href="index.html#projects">
PROJECTS
</a>
</div>
<div class="nav_item">
<a href="index.html#other">
OTHER
</a>
</div>
<div class="nav_item">
<a href="index.html#contact">
CONTACT
</a>
</div>
</div>
</div>
<div class="content">
<div class="content_focus">
<br/>
<h2 class="section_title condensed">
<a href="https://www.truecar.com/">TRUECAR</a>
</h2>
<div class="relative row">
<div class="experience_text col-md-6 col-sm-12 col-xs-12">
<div class="experience_header">
<div class="position medium header_responsive">UI/UX/FRONTEND INTERN</div>
<div class="medium separator light header_responsive"> | </div>
<div class="experience_timeline condensed header_responsive">JUN 2015 - AUG 2015</div><br class="visible-md visible-lg"/>
</div>
<p>At TrueCar, I worked on a team of three to design and build a frontend prototype for a website where car manufacturers can view performance analytics and manage their TrueCar experience. We aimed to combine three TrueCar manufacturer products: TrueCar analytics, brand managment, and campaign management. This provided a huge UI/UX challenge; how could we combine three different products into one, cohesive interface without clutter while still providing a good user experience?</p>
<p>To answer these questions, we conducted needfinding interviews on a varied audience, made low-fidelity prototypes on whiteboards and pieces of paper, and then iterated onward using Sketch and Photoshop to create medium-fidelity prototypes. Finally, we created our high-fidelity, interactive prototype using Ruby on Rails, CoffeeScript, HTML, and Sass.
</p>
<p>Our team's web prototype won the intern award for "Best Overall Execution."</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<img class="truecar img-responsive auto_margin" src="truecar_car.jpg" alt="TrueCar Img" />
</div>
</div>
<div class="artistic_line experience_line"></div>
<h4 class="position centered">TRUECAR SHOWCASE</h4>
<div class="img_carousel auto_margin">
<div>
<img class="img-responsive" src="truecar_login.png" alt="TrueCar Login" />
<div class="explanation">
This is the login page. We pulled the image and color scheme from the true.com website because we wanted manufacturers to immediately know upon reaching the site that they were interfacing with a TrueCar product.
</div>
</div>
<div>
<img class="img-responsive" src="truecar_notifications.png" alt="TrueCar Notifications" />
<div class="explanation">
In our interviews, we found that car manufacturer employees would use our product as a supplementary resource to tools they already have. Resultantly, actionable items need to be easy to find, easy to understand, and easily route to any analytics that prompted the notification.
</div>
</div>
<div>
<img class="img-responsive" src="truecar_datavis1.png" alt="TrueCar Data Visualization 1" />
<div class="explanation">
We decided to display analytics in an almost story-like fashion. We chose to number any analytics that might answer some preset question, such as national market share, to lead the user to a holistic understanding of the question at hand. We found in our interviews that manufacturers love interacting with maps and are very interested in location-based data.
</div>
</div>
<div>
<img class="img-responsive" src="truecar_datavis3.png" alt="TrueCar Data Visualization 3" />
<div class="explanation">
We found that people responded positively to colorful graphs with hover features to dig deeper into any data points that seem particularly interesting.
</div>
</div>
<div>
<img class="img-responsive" src="truecar_brand1.png" alt="TrueCar Brand Management 1" />
<div class="explanation">
This is a sample of one of the brand management pages. Within brand management, manufacturers can create their TrueCar "showcases," which are used to advertise their cars to TrueCar customers. Showcases that are in an actionable state, for instance, an unfinished showcase or a showcase that is ready to launch, have either a red or green dot, to symbolize that state.
</div>
</div>
<div>
<img class="img-responsive" src="truecar_brand2.png" alt="TrueCar Brand Management 2" />
<div class="explanation">
When a manufacturer clicks on a showcase, he or she is taken to the showcase detail page, where more information about the showcase can be viewed. We found that putting a preview or sample of the showcase on the showcase detail page was an effective way of informing users of the current state of a showcase.
</div>
</div>
</div>
</div>
</div>
<!-- Slick scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.img_carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: false
});
});
</script>
</body>
</html>