-
Notifications
You must be signed in to change notification settings - Fork 0
/
purposeux.html
151 lines (142 loc) · 6.78 KB
/
purposeux.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
---
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:[email protected]">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:[email protected]">CONTACT</a>
</li>
</ul>
</div>
<div class="workSection">
<h1 class="workSectionTitle">Purpose UX</h1>
<hr><br>
<p class="workBlurb workSectionSubTitle">view the site <a href="https://www.purposeux.com/" target="_blank"><span class="linkText">live</span></a></p>
<br><br>
<p class="workSubTitle">Background</p>
<p class="workBlurb">Purpose UX is a Durham, NC based UX Design company that helps take products from idea to existance. Purpose UX focuses on design-first, prototype-fast, get-your-hands-dirty design. Their approach involves immediate feedback, rapid iterations, and a polished user experience. <br><br>Purpose UX wanted to update it's existing company website and add detailed case study pages to increase traffic to the site, have more meaningful interactions with the user and partner with more users to solve their UX problems or collaborate on new ideas.<br><br>This project involves the design, development and support of all the case study pages and a redesign and development of Purpose UX’s company website.
<br><br></p>
<br><br>
<div class="projectLeft">
<p class="workSubTitle">Goal</p>
<p class="workBlurb">Design and develop Purpose UX's case study pages. Come up with a style guide that can be used across all case study pages. Develop case study pages in Wordpress for ease of maintanence and future additions. Redesign the main company website to be consistent across all pages. Move development of the main website over to Wordpress. </p>
<br><br>
</div>
<div class="projectRight">
<p class="workSubTitle">Technology / Tools</p>
<p class="workBlurb">Wordpress, Wordpress themes, HTML5, CSS3, Sass, Sketch, Photoshop, Trello</p>
</div>
<br><br>
<p class="workSubTitle">Approach</p>
<p class="workBlurb">1. Trello board for task breakdown, team member assignments and deadlines.<br>2. Research, brainstorming, design discussions.<br>3. Case study wireframes in Sketch.<br>4. Branding - identify accent colors to go with Purpose UX's logo colors and create a style guide.<br>5. Asset curation and content strategy.<br>6. Create new header, nav, footer and call to action sections to be used across all pages.<br>7. Mockups in sketch using the finalized wireframes and styletile.<br>8. Code case study pages in Wordpress - Wordpress themes, HTML5, CSS3, SASS.<br>9. Code Purpose UX's main site in Wordpress.<br>10. Add new header, nav, footer, accent colors and call to action to be consistent with the case study pages.<br>11. Code for responsiveness across all devices.<br>12. Design reviews, feedback, iterate, repeat.<br>13. Usability and user testing.<br><br></p>
<br><br>
<p class="workSubTitle workSectionSubTitle">Accent Color Brainstorm</p>
<br><hr><br><br>
<div class="projectImages-purposeux projectImages-purposeux-accent">
<img src="images/purposeux/accent-colors.png">
<br><br><br>
</div>
<br><br>
<p class="workSubTitle workSectionSubTitle">Mockup examples in Sketch</p>
<br><hr><br><br><br>
<p class="workSubTitle workSectionSubTitle">Work Homepage Mockup</p>
<br>
<div class="projectImages-purposeux">
<img src="images/purposeux/work-homepage.png">
</div>
<br><br><br><br>
<p class="workSubTitle workSectionSubTitle">CCL Compass Case Study Mockup</p>
<br>
<div class="projectImages-purposeux">
<img src="images/purposeux/casestudy-cclcompass.png">
</div>
<br><br><br><br>
<p class="workSubTitle workSectionSubTitle">Contract Hound Case Study Mockup</p>
<br>
<div class="projectImages-purposeux">
<img src="images/purposeux/casestudy-contracthound.png">
</div>
<br><br><br><br>
<p class="workSubTitle workSectionSubTitle">Noteables Case Study Mockup</p>
<br>
<div class="projectImages-purposeux">
<img src="images/purposeux/casestudy-noteables.png">
</div>
<br><br><br><br><br>
<p class="workSubTitle">Results</p>
<p class="workBlurb">With detailed case study pages and an updated company website Purpose UX has established itself well in the UX community. There has been an increase in the number of users visiting the site and a higher conversion rate. With development now in Wordpress, the code is easier to maintain, support and expand. View the site <a href="https://www.purposeux.com/" target="_blank"><span class="linkText"><b>live</b>.</span></a></p>
<br><br><br><br>
<!-- </div> -->
<br><br>
<div class="linkNextSection">
<a class="linkNext" href="design.html"> << Previous Project</a>
<p class="linkNext"> | </p>
<a class="linkNext" href="rightcomply.html">Next Project >></a>
</div>
<br><hr>
</div>
<!-- end of workSection -->
<div class="footerContainer">
<div class="socialIconsFooter">
<ul>
<li>
<a href="mailto:[email protected]"><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>