-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathembark.html
149 lines (139 loc) · 6.96 KB
/
embark.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
---
layout: default
---
<div class="innerbody">
<div class="topNavMobile">
<ul>
<li>
<a href="projects.html">WORK</a>
</li>
<li>
<a href="currentprojects.html">CURRENT</a>
</li>
<li>
<a href="about.html">ABOUT</a>
</li>
<li>
<a href="../resume-sk2018.pdf" target="_blank">RESUME</a>
</li>
<li>
<a href="mailto:sanchith@gmail.com">CONTACT</a>
</li>
</ul>
</div>
<div class="topNavLeft">
<ul>
<li>
<a href="index.html">HOME</a>
</li>
<li>
<a href="projects.html">WORK</a>
</li>
<li>
<a href="currentprojects.html">CURRENT</a>
</li>
<li>
<a href="about.html">ABOUT</a>
</li>
</ul>
</div>
<div class="topNav">
<ul>
<li>
<a href="../resume-sk2018.pdf" target="_blank">RESUME</a>
</li>
<li>
<a href="mailto:sanchith@gmail.com">CONTACT</a>
</li>
</ul>
</div>
<div class="workSection">
<h1 class="workSectionTitle">EMBARK!</h1>
<hr><br>
<p class="workBlurb workSectionSubTitle">view the code on <a href="https://github.com/EmbarkProject/Embark" target="_blank"><span class="linkText">github</span></a></p>
<br><br>
<p class="workSubTitle">About</p>
<p class="workBlurb">Embark! hosted on Heroku, is a tool geared towards career-changers who don’t know where to start.<br><br>For my final project at The Iron Yard, myself and another designer on the front-end along with a developer on the backend, decided to build a solution to address the challenging problems and opportunities we faced as career changers. Having just gone through this difficult and complicated process ourselves, our goal was to make this transition easier and more approachable. <br><br>We had three weeks to take this project from research and discovery to the final live, coded version. We worked in an Agile environment, conducted daily stand ups and used Trello for project management - task breakdown, blockers and daily progress. We kept the focus on the user's needs and behaviors and spent the first five days on user/design research and interviewed six career changers. We analyzed our data and findings, crafted personas and identified three main problem areas to address. We then proceeded with sketches and wireframes and validated its usability through peer review. Once validated we continued with branding, prototyping, coding and integration with the backend. We spent the final week ironing out integration issues and focusing on functionality and user testing. Through research, feedback and design iterations we were able to create a solution that not only met our user’s needs, but also anticipated opportunities to make the user experience more useful and efficient.
<br><br></p>
<div class="projectLeft">
<p class="workSubTitle">Features</p>
<p class="workBlurb">1. Industry suggestion quiz<br>2. Company culture ratings and location preferences<br>3. Tool that takes industry suggestions, culture ratings matches and location preferences and outputs real-time job listings from Indeed based on must-haves drawn from Glassdoor data</p>
<br>
<p class="workSubTitle">Goal</p>
<p class="workBlurb">To create a smart, modern, clean, inspirational and exciting site/tool geared towards career-changers who don’t know where to start.</p>
<br><br>
</div>
<div class="projectRight">
<p class="workSubTitle">Technology / Tools</p>
<p class="workBlurb">HTML5, CSS3, Sass, Javascript, jQuery, Sketch, Illustrator, Trello</p>
</div>
<br><br><hr><br><br><br>
<p class="workSubTitle workSectionSubTitle">Design Process Examples</p>
<div class="projectImages">
<img src="images/embark/persona-styletile.png">
<br><br><br>
</div>
<div class="projectImages">
<img src="images/embark/wireframes.png">
<br><br><br>
</div>
<br><br><hr><br><br><br>
<div class="projectLeft">
<p class="workSubTitle">Process</p>
<p class="workBlurb">1. Trello board for task breakdown, team member assignments and deadlines.<br>2. Research, brainstorming, design discussions - wordlist, SWOT and website analysis, competitive market study, persona creation. <br>3. Wireframes in Sketch<br>4. Branding - used styletile as a guide. A unique theme, with color pallette, typographic treatment, inspirational patterns and images.<br>5. Logo design<br>6. Mockups using the finalized wireframes and styletile<br>7. Code using HTML5, CSS3, JS and jQuery.<br>8. Early integration with backend.<br>9. Usability and user testing.</p>
<br><br>
</div>
<div class="projectRight">
<p class="workSubTitle">Challenges</p>
<p class="workBlurb">The main challenge we faced was making the website feel modern, trendy and exciting while simultaneously feeling trustworthy and authoritative. We achieved this through a consistent grid, bold colors and a clean interface. We also ran into several integration issues but were able to work though them cause we had alloted sufficient time for integration and usability testing.</p>
<br><br>
</div>
<br><br><hr><br><br>
<div class="projectImages">
<p class="workSubTitle workSectionSubTitle">Selected Screenshots</p>
<br>
<img src="images/embark/screen1.png">
<br><br><br>
</div>
<div class="projectImages">
<img src="images/embark/screen2.png">
<br><br><br>
</div>
<div class="projectImages">
<img src="images/embark/screen3.png">
<br><br><br>
</div>
<br><br>
<div class="linkNextSection">
<a class="linkNext" href="purposeux.html"> << Previous Project</a>
<p class="linkNext"> | </p>
<a class="linkNext" href="goodreads.html">Next Project >></a>
</div>
<br><hr>
</div>
<!-- end of workSection -->
<div class="footerContainer">
<div class="socialIconsFooter">
<ul>
<li>
<a href="mailto:sanchith@gmail.com"><i class="fa fa-envelope-square" aria-hidden="true"></i></a>
</li>
<li>
<a class="githubicon" href="https://github.com/sanchith" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
</li>
<li>
<a class="linkedinIcon" href="https://www.linkedin.com/in/sanchith-kuttappa-a2196145" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</li>
<li>
<a class="twitterIcon" href="https://twitter.com/sanchithdesign" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
</li>
<li>
<a class="behanceIcon" href="https://www.behance.net/sanchith8b1a" target="_blank"><i class="fa fa-behance-square" aria-hidden="true"></i></a>
</li>
</ul>
</div>
<div class="copyrightFooter">
<p class="copyrightText">© 2018 Sanchith Kuttappa. All rights reserved.</p>
</div>
</div>
</div>