-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject-story-3.html
More file actions
229 lines (203 loc) · 12.6 KB
/
project-story-3.html
File metadata and controls
229 lines (203 loc) · 12.6 KB
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="DarrenRM - bPanel Story">
<meta name="author" content="Darren">
<!-- Favicon -->
<link rel="icon" href="images/favicon.png">
<!-- Site Title -->
<title>DarrenRM CV</title>
<!-- Bootstrap 4 core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div id="preloader">
<div class="preloader">
<span></span>
<span></span>
</div>
</div>
<div id="top"></div>
<div id="main-content">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
<button class="navbar-toggler collapsed menu-text" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
<span class="sr-only">Toggle navigation</span>
</button><!-- / navbar-toggler -->
<div class="collapse navbar-collapse" id="navbar-toggle">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="project-story-1.html">PROJECT STORIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#my-story">MY BACKGROUND</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#projects">RECENT WORK</a>
</li>
</ul><!-- / navbar-nav -->
</div><!-- / navbar-collapse -->
</div><!-- / container -->
</nav><!-- / navbar -->
<header id="dark-overlay" class="has-sticky-menu story3" style="padding-bottom:0;">
<div class="container">
<div class="header-content text-right" style="padding-bottom:30px;">
<div class="story-hero-title">
<h2>Citizen Sync Mobile App</h2>
<p class="mb-0">PRODUCT DESIGN</p>
</div>
<div class="spacer-2x"> </div>
<div class="hero-info text-left">
<div class="info">
<p class="mb-0"> <span class="info-title va-middle">CLIENT</span></p>
<p>Citizen Sync, Various Cities</p>
</div><!-- / info -->
<div class="info">
<p class="mb-0"> <span class="info-title va-middle">TOOLS</span></p>
<p>Adobe Illustrator, Photoshop, Pop</p>
</div><!-- / info -->
<div class="info">
<p class="mb-0"> <span class="info-title va-middle">AUDIENCE</span></p>
<p>Suburban Families & Municipal Gov't</p>
</div><!-- / info -->
<div class="spacer-2x"> </div>
</div>
</div><!-- / header-content -->
</div><!-- / container -->
</header>
<div class="spacer-2x"> </div>
<section id="project-details" class="p-0">
<div class="container">
<div class="section-w-image">
<div class="row">
<div class="col-lg-6 project3-details-image"><p></p></div>
<div class="col-lg-6 offset-lg-6 section-description">
<h4 class="section-title mb-3"><span class="text-primary">01.</span> CITIZEN SYNC APP v3</h4>
<p class="mb-3 lh-28">In 2013, I founded Citizen Sync, a startup building mobile apps for cities in Ohio. For over 4 years, I lead the entire brand & multiple re-designs of the app.
The third version of the mobile app was the most well-designed of any app we built; it allowed each new city to have their app proceedurally built
from a collection of assets supplied up front, including dymanic colors and transparency.
</p>
<p class="mb-3 lh-28">Each city would maintain their app from a CMS supplied by us so the app needed to accomodate the varying ways each city intended to use it.</p>
<div class="project-info">
</div><!-- / project-info -->
</div><!-- / section-description -->
</div><!-- / row -->
</div>
</div><!-- / container-fluid -->
</section><!-- / project-details -->
<div class="spacer-2x"> </div>
<section id="project-details2" class="p-0 image-right">
<div class="container">
<div class="section-w-image">
<div class="row">
<div class="col-lg-6 section-description">
<h4 class="section-title mb-3"><span class="text-primary">02.</span> PLANNING & RESEARCH</h4>
<p class="mb-3 lh-28">After years of meeting with city and community leaders and listening to feedback, we knew the majority of their content would fall into
three major sections: announcements, events and content-resources. On the main landing page, each city could decide which featured items would be showcased.
</p>
<p class="lh-28">Another major part of our ecosystem was local businesses. Our recurring revenue was generated by adding business listings to the app for free,
and up-charging to list events or offers in the official feed. We needed a clean, effective landing page that could represent local brands while also
being dense with information, events and offers.
</p>
</p>
<div class="spacer-1x"> </div>
<div class="info">
<p class="mb-0"><i class="fas fa-tag text-primary mr-1"></i> <span class="story-detail-info va-middle">SKILLS</span></p>
<p>User Research, Information Architecture, Product Design, Product Management</p>
</div><!-- / info -->
</div><!-- / section-description -->
<div class="col-lg-6 offset-lg-6 project3-details-image2"><p></p></div>
</div><!-- / row -->
</div>
</div><!-- / container-fluid -->
</section><!-- / project-details -->
<div class="spacer-2x"> </div>
<section id="project-details3" class="p-0">
<div class="container">
<div class="section-w-image">
<div class="row">
<div class="col-lg-6 project3-details-image3"><p></p></div>
<div class="col-lg-6 offset-lg-6 section-description">
<h4 class="section-title mb-3"><span class="text-primary">03.</span> DESIGN & UX</h4>
<p class="mb-3 lh-28">I used Adobe Photoshop and Illustrator to create the app design. The single largest challenge was making a product design that both
looked and felt modern, but could also be built from a small handful of assets: photos, primary and secondary colors etc. Each city would have
a different set of photos and colors, so the design had to accomodate anything they could throw at it.
</p>
<p class="lh-28">
To solve this, I relied on two key features: being able to pull a color palette from an image and a clever use of transparency. This filled
that app with color and photos, and still allowed enough text contrast for readability. The design was prototyped using Pop, which allowed a
semi-functional version to be demo'd during sales.</p>
<p class="lh-28">Ultimately, over ten cities used our product, representing a population of over 150k individuals and an install base over 12k.
</p>
<div class="spacer-1x"> </div>
<div class="info">
<p class="mb-0"><i class="fas fa-tag text-primary mr-1"></i> <span class="story-detail-info va-middle">SKILLS</span></p>
<p>UI, UX, Visual Design, Prototyping, Product Management</p>
</div><!-- / info -->
</div><!-- / section-description -->
</div><!-- / row -->
</div>
</div><!-- / container-fluid -->
</section><!-- / project-details -->
<section class="pagination">
<h3 class="hidden">PAGINATION</h3>
<div class="container">
<a href="project-story-2.html" class="btn btn-link btn-lg btn-direction"><i class="fas fa-long-arrow-alt-left mr-2"></i> Prev</a>
<a href="index.html#projects" class="btn btn-link btn-lg btn-direction pull-right">Recent Work <i class="fas fa-long-arrow-alt-right ml-2"></i></a>
</div><!-- / container -->
</section><!-- / pagination -->
</div><!-- / main-content -->
<a href="#top" class="scroll-to-top dark-scroll is-hidden smooth-scroll" data-nav-status="toggle"><i class="md-icon dp24">expand_less</i></a>
<div id="reveal-footer">
<div class="reveal-content">
<footer class="bg-darkgrey dark">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 footer-left-area">
<p>© 2019 DarrenRM</p>
</div>
<div class="col-lg-4 social-icons footer-right-area">
<a href="https://twitter.com/DarrenMills" class="btn-social"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/DarrenRM" class="btn-social"><i class="fab fa-github"></i></a>
</div><!-- / social-icons -->
</div><!-- / row -->
</div><!-- / container -->
</footer>
</div><!-- / reveal-content -->
</div><!-- / reveal-footer -->
<!-- Core JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- / Core JavaScript -->
<!-- preloader -->
<script src="js/preloader.js"></script>
<!-- / preloader -->
<!-- Smooth Scrolling -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<!-- / Smooth Scrolling -->
<!-- Hide Nav -->
<script src="js/hide-nav.js"></script>
<!-- / Hide Nav -->
</body>
</html>