-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcivictechjobs.html
193 lines (180 loc) · 11.4 KB
/
civictechjobs.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
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
<!DOCTYPE HTML>
<!--
Dopetrope by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7V2T37B7CE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7V2T37B7CE');
</script>
<title>Civic Tech Jobs - Janzen Molina</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body class="no-sidebar is-preload">
<div id="page-wrapper">
<!-- Header -->
<section id="header">
<!-- Logo -->
<h1><a href="index.html">Janzen Molina</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li class="current">
<a href="#">UI/UX</a>
<ul>
<li><a href="acm-website.html">ACM at UCSD Website</a></li>
<li><a href="navassist.html">NavAssist</a></li>
<li><a href="civictechjobs.html">Civic Tech Jobs</a></li>
<li><a href="zoomredesign.html">Zoom Redesign</a></li>
</ul>
</li>
<li>
<a href="#">Beyond UI/UX</a>
<ul>
<!-- <li><a href="grove.html">Grove</a></li> -->
<li><a href="synposium.html">SYNposium</a></li>
<li><a href="vrexhibition.html">VR Exhibition Night</a></li>
<li><a href="eds124br.html">EDS 124BR</a></li>
</ul>
</li>
<li><a href="resume.html">Resume</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</section>
<!-- Main -->
<section id="main">
<div class="container">
<!-- Content -->
<article class="box post">
<a class="image featured"><img src="images/civictechjobs-banner.png" alt=""></a>
<header>
<h2>Civic Tech Jobs</h2>
<p>A responsive website that makes it easy to find local volunteer opportunities in a variety of industries.</p>
</header>
<p>
<b>Team:</b> Jen Chung (Lead UX/UI Designer), Grace Lin (UX/UI Designer), Janzen Molina (UX/UI Designer), et al.
</p>
<section>
<header>
<h3>Background</h3>
</header>
<p>
With a bit more design experience, I was eager to discover what the UX designer experience would be like in a more industry-like setting. I set out for opportunities that would allow me to utilize my design skills on website or mobile app mockups similar to what was being produced for the general public. I was introduced by the Hack for LA project to a colleague where I became greatly interested in their non-profit work and organizational structure that mimicked that of an actual company.
</p>
<h4>Objective</h4>
<p>As part of the Civic Tech Jobs team, our product was meant to serve three purposes:</p>
<ol>
<li>Help prospective volunteers find inter disciplinary projects that will be useful for their career development</li>
<li>Give the larger Hack for LA projects organization a place to be able to list their open roles.</li>
<li>Match volunteers by availability, role, and program area in a way that a volunteer can better prepare themselves for the marketplace</li>
</ol>
</section>
<section>
<header>
<h3>Banner</h3>
</header>
<p>
When initially starting my work in Figma, I tested my understanding of the program's core functionalities by creating a 2D banner. I had initially begun work on the banner in Illustrator, but in order to maintain consistency in the overall workflow, I began to use the same tools as the other designers.
</p>
<a href="images/civictechjobs-2Dbanner.png" target="_blank"><img class="article-image" src="images/civictechjobs-2Dbanner.png" alt="2D banner for Civic Tech Jobs"></a>
<p class="gallery-description">2D banner I created that pleased a difficult stakeholder
</p>
</section>
<section>
<header>
<h3>Paper Prototypes</h3>
</header>
<p>
In order to rapidly explore different options for the design of certain elements, I used a paper prototyping process where I took a maximum of 10 minutes to come up with as many different iterations of the element as possible within the time limit. The process was fluid in the sense that a lot of the time, the minor details would not be given in order to maximize the amount of iteration happening in the given time, but in some cases, I would give a bit more detail in order to better flesh out a single idea that I thought laid a good foundation for future iterations.
</p>
<div class="row">
<div class="col-6 col-6-medium col-12-small">
<a href="images/civictechjobs-paper1.png" target="_blank"><img class="article-image" style="width:90%" src="images/civictechjobs-paper1.png" alt="Paper prototype for calendar in Civic Tech jobs project"></a>
<p class="gallery-description">One iteration for calendar on qualifier page with more details on interactions</p>
</div>
<div class="col-6 col-6-medium col-12-small">
<a href="images/civictechjobs-paper2.png" target="_blank"><img class="article-image" style="width:90%" src="images/civictechjobs-paper2.png" alt="Paper prototype for alert in Civic Tech jobs project"></a>
<p class="gallery-description">Multiple iterations for alerts on qualifier page with less detail between each version</p>
</div>
</div>
</section>
<section>
<section>
<header>
<h3>Wireframes</h3>
</header>
<p>
I translated my ideas from paper into a more visually complete wireframe on Figma. These mid to high fidelity wireframes would serve as a method of teaching developers our ideas on how the project was to be laid out, with details like icon placement and spacing between the elements being included in the process.
</p>
<p>
One concept that I had running continuously throughout my wireframes was the use of icons and picture-based information in tandem with shorter text. I thought this would improve efficiency and reduce confusion when it came to translating the website into other languages, which I thought was significant due to Hack for LA's far reach in terms of different demographics, backgrounds and languages. Improvements such as these would help with accessibility and the overall user friendliness for our website.
</p>
<a href="images/civictechjobs-howtojoin.png" target="_blank"><img class="article-image" src="images/civictechjobs-howtojoin.png" alt="How to Join page for Civic Tech Jobs"></a>
<p class="gallery-description">How to Join page wireframe prioritizing icon view
</p>
</section>
<section>
<header>
<h3>Design System</h3>
</header>
<p>
In order to design with efficiency and consistency, we organized our repetitively used components into a design system, which I contributed to by taking an instance of an element from the website and standardizing it to be used in various wireframes and prototypes in the future. This required pixel-perfect precision in order to guarantee that instances of each component did not look inaccurate to what was going to be made as part of the final website development.
</p>
<a href="images/civictechjobs-stickybar.png" target="_blank"><img class="article-image" src="images/civictechjobs-stickybar.png" alt="Sticky Bar component card for Civic Tech Jobs"></a>
<p class="gallery-description">Sticky bar component card
</p>
</section>
<section>
<header>
<h3>Usability Testing</h3>
</header>
<p>
Although we were not explicitly UX researchers, the design team was called to host usability testing sessions as a means of gaining experience and assisting the research team due to a constraint on resources at the time. In order to get a better understanding of what the process was like, I observed a researcher host their own session while I took some notes and informed my future designs based on the insights our team received from that session. When it came to leading a session, however, I ended up not hosting a session before the testing for that particular iteration of the design had concluded.
</p>
</section>
<section>
<header>
<h3>Reflection</h3>
</header>
<p>
One of my greatest regrets as part of this position (and as a designer in general) was not taking up the offer to conduct my own usability testing. As of writing, I have been a part of conducting usability testing, so the experience itself was not that much of a loss, but more so that I could have taken the initiative and gotten that experience earlier if I was not afraid to fail. Moving forward, I strive as a designer to take charge of my work and take the opportunity if it's given to me rather than being timid and staying behind a safety net. I might fail, but I know now that it's an important part of learning: to gradually learn and improve, and learn from one's mistakes.
</p>
<p>
Beyond being more inclined to take risks and not be afraid to fail, I also learned much about the design process itself. One important lesson was that UX/UI design is not about reinventing the wheel in terms of interactions with users; although it's important to make designs unique and relevant to each individual product, the overall user flow and layout of elements could be very similar to an already existing solution, which is alright. I found that trying to develop new ideas for the sake of being novel was an inefficient and overall ineffective use of time and resources, so knowing what works and what doesn't played an important role in my design process.
</p>
</section>
</article>
</div>
</section>
<!-- Footer -->
<div id="copyright" class="index-copyright">
<ul class="social">
<li><a class="icon solid fa-envelope" href="mailto:[email protected]"><span class="label">Email</span></a></li>
<li><a class="icon brands fa-github" href="https://github.com/janzenmolina"><span class="label">GitHub</span></a></li>
<li><a class="icon brands fa-linkedin" href="https://www.linkedin.com/in/janzenmolina/"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="links">
<li>© Janzen Molina 2022</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>