-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapplico.html
163 lines (163 loc) · 17.4 KB
/
applico.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
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Sat Nov 26 2022 08:16:52 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="6379a8ccf3d6aa800e0e2cc9" data-wf-site="63375e06b7a5ae566ddc5555">
<head>
<meta charset="utf-8">
<title>applico</title>
<meta content="applico" property="og:title">
<meta content="applico" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/ux-ui-portfolio-999cb1.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic","Philosopher:regular,italic,700,700italic","Karla:200,300,regular,500,600,700,800,200italic,300italic,italic,500italic,600italic,700italic,800italic","ZCOOL XiaoWei:regular","Londrina Shadow:regular"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="index.html" class="link-block w-inline-block"><img src="images/website_logo.png" loading="lazy" width="50" alt="" class="image-brand"></a>
<nav role="navigation" class="w-nav-menu">
<a href="index.html" class="nav-link w-nav-link">My Works</a>
<a href="documents/Resume.pdf" target="_blank" class="nav-link w-nav-link">Resume</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="w-container"><img src="images/applico_websitebanner.png" loading="lazy" srcset="images/applico_websitebanner-p-500.png 500w, images/applico_websitebanner-p-800.png 800w, images/applico_websitebanner.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="page-banner"></div>
<div class="wf-section"></div>
<div class="container-3 w-container">
<h1 class="heading-2">applico</h1>
<p class="text-paragraph">Creating an organized platform for users to track job applications and stay on top of task deadlines</p>
</div>
<div class="container-2 w-container">
<div class="w-row">
<div class="w-col w-col-3">
<h3 class="text-heading">Timeline</h3>
<p class="text-paragraph">November 2022 (3 weeks)</p>
</div>
<div class="w-col w-col-3">
<h3 class="text-heading">Role</h3>
<p class="text-paragraph">UX/UI Designer</p>
</div>
<div class="w-col w-col-3">
<h3 class="text-heading">Team</h3>
<p class="text-paragraph">Myself</p>
</div>
<div class="w-col w-col-3">
<h3 class="text-heading">Tools</h3>
<p class="text-paragraph">Figma</p>
</div>
</div>
</div>
<div class="w-container">
<h3 class="text-heading">Overview</h3>
<p class="text-paragraph">Whether it’s for a handful of job applications, or hundreds, it can be difficult to stay organized with the statuses as well as the various assignments necessary to apply. Applico is a web app designed for anybody who is job searching and looking to stay organized and on top of their deadlines.<br><br>This was a personal project and I was the sole designer working on this project during Fall 2022.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Problem</h3>
<p class="text-paragraph">As a recent post-grad, many of my friends are currently job searching, and this sparked my initial interest in learning more about how to make the process easier for them, given the already stressful situation of trying to get a job within this current job market.<br><br>However, post-grads aren’t the only ones looking for a job, I wanted to ensure this web app is universal in helping anybody who is job searching.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Goals</h3>
<p class="text-paragraph">1. Create a convenient platform that provides organization for users that are job searching<br>2. Encourage users to stay on top of their tasks and deadlines</p>
</div>
<div class="w-container">
<h3 class="text-heading">Research</h3>
<p class="text-paragraph">First, I interviewed 7 people who have job searched before, or are currently job searching.<br></p>
<p class="text-paragraph"><strong>Interview Questions:</strong><br>1. Are you currently or have you applied to jobs before?<br>2. What is your process when applying to jobs?<br>3. What was the most difficult part about the process of job applying?<br>4. Tell me what your process is for when you know a deadline for a job application is coming up. <br>5. Tell me how you organize job applications.<br>6. Can you send me a screenshot of what you do?<br>7. What do you like about the product (whatever they use)? Which feature do you find most helpful?<br>8. What do you dislike about the product (whatever they use)? Or what do you think can be improved/added?<br>9. Have you tried any other methods of tracking/organization, ie. other websites, apps, etc.? If you have, what do you like or dislike about these products?<br>10. If you've had to answer short answer questions on job applications before, do you type them out on the spot or do you have answers already written/saved somewhere, and if so, where do you keep these answers?</p>
<p class="text-paragraph"><strong><br><br>4/7</strong> of the people I interviewed primarily use Google Sheets for keeping track of their job applications. With their permission, I will share how they set up their Google sheets.</p>
</div>
<div class="w-container">
<div class="text-block-4"><strong>#1</strong></div><img src="images/applico_interview1.png" loading="lazy" srcset="images/applico_interview1-p-500.png 500w, images/applico_interview1-p-800.png 800w, images/applico_interview1.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner">
<div class="text-block-4"><strong>#2</strong></div><img src="images/applico_interview2.png" loading="lazy" srcset="images/applico_interview2-p-500.png 500w, images/applico_interview2-p-800.png 800w, images/applico_interview2.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner">
<div class="text-block-4"><strong>#3</strong></div><img src="images/applico_interview3.png" loading="lazy" srcset="images/applico_interview3-p-500.png 500w, images/applico_interview3-p-800.png 800w, images/applico_interview3.png 999w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner">
<div class="text-block-4"><strong>#4</strong></div><img src="images/applico_interview4.png" loading="lazy" srcset="images/applico_interview4-p-500.png 500w, images/applico_interview4-p-800.png 800w, images/applico_interview4.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner">
</div>
<div class="w-container">
<p class="text-paragraph"><br>While designing the web app, I often referenced these examples in order to ensure the categories/features I included were what users needed/wanted.</p>
</div>
<div class="container-6 w-container">
<h3 class="text-heading">Insights</h3>
<h4 class="text-heading2">1. Job tracking should feel personalized.</h4>
<p class="text-paragraph">People enjoyed using Google docs since they are able to color code and set up categories as they need for the type of career they are pursuing.</p>
<h4 class="text-heading2">2. Users would like to have organization but don’t know where to start or note that it is time-consuming to start it.</h4>
<p class="text-paragraph">One user commented that they used Microsoft Word because that was what they knew how to use at the time, however noted that they did not have the best experience. <br><br>Another user commented they enjoy using Google Docs, however the downside is that it takes a while to set up.</p>
<h4 class="text-heading2">3. Managing tasks and their deadlines should be easy and help the user not procrastinate.</h4>
<p class="text-paragraph">Users commented how it’s easy to get distracted or become unmotivated to complete tasks they needed for job hunting.</p>
</div>
<div class="container-6 w-container">
<h3 class="text-heading">Turning Insights into Design Ideas</h3>
<p class="text-paragraph"><br>- Statuses are <strong>pre-colored by default.</strong></p>
<p class="text-paragraph">- Categories such as “Job Title, Status” are <strong>pre-made</strong>, however users are <strong>able to delete or create their own categories</strong> based on what they need.</p>
<p class="text-paragraph">- Users can <strong>create “tasks”</strong> that they need to complete, and there will be a <strong>checklist system</strong><strong></strong> that lets users know what they need to work on.</p>
<p class="text-paragraph">- Users can stay up to date with deadlines and upcoming important dates using a <strong>calendar system that syncs with all other features</strong> in the app.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Competitive Analysis</h3>
<p class="text-paragraph">Other than Google Sheets, I wanted to see if there were any web apps already available that would achieve the same function of job tracking. I also included LinkedIn because one user that I interviewed mentioned that they primarily job searched on LinkedIn and that they were able to track their applications on there since LinkedIn would compile which job postings they already applied to.</p>
</div>
<div class="container-16 w-container"><img src="images/applico_competitiveanalysis.png" loading="lazy" srcset="images/applico_competitiveanalysis-p-500.png 500w, images/applico_competitiveanalysis-p-800.png 800w, images/applico_competitiveanalysis.png 800w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 800px" alt="" class="image-banner"></div>
<div class="w-container">
<h3 class="text-heading">Ideation</h3>
<p class="text-paragraph">Now that I finished researching and compiling insights, I started to sketch and think about flows!</p>
<div class="text-block-2"><strong>Sketching</strong></div>
</div>
<div class="w-container">
<div class="w-row">
<div class="w-col w-col-6"><img src="images/applico_ideation.png" loading="lazy" srcset="images/applico_ideation-p-500.png 500w, images/applico_ideation.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"><img src="images/applico_ideation4.png" loading="lazy" srcset="images/applico_ideation4-p-500.png 500w, images/applico_ideation4.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"></div>
<div class="w-col w-col-6"><img src="images/applico_ideation2.png" loading="lazy" srcset="images/applico_ideation2-p-500.png 500w, images/applico_ideation2.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"><img src="images/applico_ideation3.png" loading="lazy" srcset="images/applico_ideation3-p-500.png 500w, images/applico_ideation3.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2"></div>
</div>
<div class="text-block-2"><strong>User Flow Map</strong></div><img src="images/applico_userflow.png" loading="lazy" srcset="images/applico_userflow-p-500.png 500w, images/applico_userflow-p-800.png 800w, images/applico_userflow.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner">
</div>
<div class="w-container">
<h3 class="text-heading">A/B Testing</h3>
<p class="text-paragraph">As I began to ideate what I wanted the look of the web app to be like, I researched existing designs of various web platforms. The two that I selected as potential designs were the dashboard look versus a navigation bar look.<br><br>I mocked up these two designs and created a poll for people to select which design they liked more.</p>
<div class="w-row">
<div class="w-col w-col-6">
<div class="text-block-3">A</div><img src="images/applico_votetrackerA.png" loading="lazy" srcset="images/applico_votetrackerA-p-500.png 500w, images/applico_votetrackerA.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2">
</div>
<div class="w-col w-col-6">
<div class="text-block-3">B</div><img src="images/applico_votetrackerB.png" loading="lazy" srcset="images/applico_votetrackerB-p-500.png 500w, images/applico_votetrackerB.png 500w" sizes="(max-width: 520px) 96vw, (max-width: 767px) 500px, (max-width: 991px) 354px, 460px" alt="" class="image-2x2">
</div>
</div>
<div class="columns-3 w-row">
<div class="w-col w-col-6">
<p class="paragraph-11"><strong>21/31 </strong>of the people who participated in the poll voted that they liked design A more than design B.</p>
</div>
<div class="column-7 w-col w-col-6"><img src="images/applico_voteresult.png" loading="lazy" alt="" class="image-2x2"></div>
</div>
</div>
<div class="w-container">
<p class="text-paragraph">*With hindsight, next time I would design the A/B testing differently as there were two people who questioned if design A would have a collapsible column, which would have affected their answer. <br><br>Even though they were two similar yet distinct designs, it seemed design A had the potential to function differently than design B, which was something I was not aware at first prior to creating the poll. If I were to re-do this A/B testing, I would ensure that I will only test a single variable so that the result was accurate.</p>
</div>
<div class="w-container">
<h3 class="text-heading">Wireframes</h3>
<p class="text-paragraph">After completing the A/B testing, I proceeded with creating the wireframes.</p>
</div>
<div class="w-container"><img src="images/applico_wireframes.png" loading="lazy" srcset="images/applico_wireframes-p-500.png 500w, images/applico_wireframes-p-800.png 800w, images/applico_wireframes.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner"></div>
<div class="w-container">
<h3 class="text-heading">Final Product</h3>
<p class="text-paragraph">Once I completed the wireframes, I added color to the frames and created a prototype!</p>
</div>
<div class="w-container"><img src="images/applico_final.png" loading="lazy" srcset="images/applico_final-p-500.png 500w, images/applico_final-p-800.png 800w, images/applico_final.png 1000w" sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px" alt="" class="image-banner"></div>
<div class="w-container">
<div style="padding-top:56.17021276595745%" class="video w-video w-embed"><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FAf0ZYWXMgoI%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DAf0ZYWXMgoI&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FAf0ZYWXMgoI%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" allowfullscreen="" title="applico demo"></iframe></div>
</div>
<div class="w-container">
<h3 class="text-heading"><strong>Reflection</strong></h3>
<p class="text-paragraph">I am happy with how this project turned out! Since my first large project (inspop) was a mobile app, I wanted to challenge myself with a new platform, this time, a web app. My process in designing this was different from inspop, since for this, I had much more space and needed to ensure I did not create too much negative space.<br><br>If I were to continue this project, I would design what it would look like to change a status of a job application. One idea I have for the column view is being able to click and drag boxes across columns, instantly updating the status in the backend. Another idea I have is for list view, for which users can click on the job’s status and a drop-down menu of other statuses would appear, allowing the user to easily switch between statuses.</p>
</div>
<div class="container-7 w-container"></div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63375e06b7a5ae566ddc5555" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>