-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjaxxliberty.html
229 lines (207 loc) · 12.4 KB
/
jaxxliberty.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
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>
<!--[if lte IE 6]><html class="preIE7 preIE8 preIE9"><![endif]-->
<!--[if IE 7]><html class="preIE8 preIE9"><![endif]-->
<!--[if IE 8]><html class="preIE9"><![endif]-->
<!--[if gte IE 9]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Theme Color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#F5F5F5">
<!-- Short description of the document (limit to 150 characters) -->
<meta name="description" content="Hi, I'm Warren. I am a passionate and versatile UX and Visual designer based in Toronto, Canada.">
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
<!-- Control the behavior of search engine crawling and indexing -->
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->
<!-- Tells Google not to show the sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">
<!-- Tells Google not to provide a translation for this document -->
<meta name="google" content="notranslate">
<!-- Verify website ownership -->
<!-- <meta name="google-site-verification" content="verification_token"> -->
<!-- Short description of your document's subject -->
<meta name="subject" content="UX Designer Portfolio Website">
<!-- Gives a general age rating based on the document's content -->
<meta name="rating" content="General">
<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Geo tags -->
<meta name="geo.region" content="Canada">
<meta name="geo.placename" content="Toronto, Ontario">
<title>Warren Yen | Jaxx Liberty</title>
<meta name="author" content="Warren Yen">
<link rel="stylesheet" href="/styles.scss" type="text/css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-Y']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
'.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<main id="swup" class="transition-fade">
<!-- nav -->
<nav id="myNav" class="navbar fixed-top navbar-expand-lg bg-light transition-fadeInDown">
<a class="navbar-brand" href="/">
<img src="/img/warren_yen_logo.svg" alt="Warren Yen Logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navCollapse" aria-controls="hamburgerMenu" 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>
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="/">Projects <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.html">About Me</a>
</li>
<!-- resume PDF doc -->
<li class="nav-item">
<a class="nav-link" href="/warrenyen_resume.pdf" download="Warren_Yen_CV">Resume</a>
</li>
<!-- resume PDF doc -->
</ul>
</div>
</nav>
<!-- /nav -->
<div class="container mt-4 pt-4">
<!-- header -->
<div class="jumbotron jumbotron-fluid rounded p-5 mt-4 bg--jaxx">
<div class="row d-flex">
<div class="col-md-6 flex-right flex-center-sm">
<img class="h-100" src="/img/jaxxliberty_top.png" alt="">
</div>
<div class="col-md-6 flex-left flex-center-sm pt-4 pb-0 px-2">
<h1 class="font-weight-bold">Jaxx Liberty</h1>
<p class="m-0">Cross platform blockchain wallet, exchange, markets and news - all in one app.</p>
</div>
</div>
</div>
<!-- /header -->
<!-- text component -->
<div class="row">
<div class="col-sm-12 pt-3">
<h1 class="pb-3">Overview</h1>
<p>Given the opportunity to design an app from scratch and have <span class="font-weight-bold">full creative control</span> is every designer’s dream. Though challenging and requiring scalable insight, it can also be extremely rewarding. My primary tool of choice was Sketch, which is best for <span class="font-weight-bold">building design systems and working with components</span>.</p>
<hr class="my-5"/>
</div><!--end col-->
<div class="col-sm-12">
<h1 class="pb-3">Challenges and Solutions</h1>
<p>Working in a cutting edge industry created very unique challenges which provided opportunities to design for solutions rarely encountered in traditional industries.</p>
<p>The main challenge with this project was ensuring that all UI components were <span class="font-weight-bold">scalable and flexible</span> to accommodate different scenarios and also adapt to multiple viewport sizes. Diligent research, planning, and feedback sessions were done early in the design process.</p>
</div>
<div class="col-sm-12 pt-3">
<h3>Wireframes</h3>
<p>For this project, the wireframing process was condensed due to the aggressive timeline for delivery. The wireframes started with the home page and then moved on the landing pages for each module. The focus for the wireframes was solely on mobile. Tablet and desktop designed were addressed in the visual design phase.</p>
</div><!--end col-->
<!-- 1 column image row -->
<div class="col-sm-12 py-3">
<img class="w-100 mb-3" src="/img/jaxxliberty_wireframes.png" alt="">
</div>
<!-- 1 column image row -->
<!-- 2 column image row -->
<div class="col-sm-12 py-3">
<h3>Establishing Patterns</h3>
<div class="row">
<div class="col-md-6">
<p>UI patterns and heirarchy were established early on. From the intro page, the user inherently learns that the primary colour "orange" represents the <span class="font-weight-bold">main call-to-action</span>.</p>
<p>This pattern is repeated throughout the app. Subsequent pages use blue buttons and text links represent secondary or tertiary call-to-actions.</p>
</div>
<div class="col-md-6">
<img class="w-100 mb-3" src="/img/jaxxliberty_patterns.png" alt="">
</div>
</div>
</div>
<div class="col-sm-12">
<h3>Keeping it Simple</h3>
<p>Getting started in sending or exchanging cryptocurrency can be extremely intimidating and nerve-wracking. Cryptocurrency is by nature very technical. In most cases, the user does not need to be exposed to this. By keeping the UI simple and only showing the user what they need to see <span class="font-weight-bold">retains user focus</span> and removes some of the imitidation factor.</p>
</div>
<div class="col-sm-12 py-3">
<img class="w-100 mb-3" src="/img/jaxxliberty_simple.png" alt="">
</div>
<div class="col-sm-12">
<h3>Win States</h3>
<p>Win states were implemented throughout the app after successful actions were completed. This <span class="font-weight-bold">inspires the user with confidence</span> - not only in using the app, but in the cryptocurrency ecosystem as a whole. Win states were shown to the user after every send transaction, exchange transaction, and successful wallet back up.</p>
</div>
<div class="col-sm-12 py-3">
<img class="w-100 mb-3" src="/img/jaxxliberty_winstates.png" alt="">
</div>
<div class="col-sm-12">
<h3>Adopting for Desktop</h3>
<p>The home page for desktop needed carefully design consideration to adopt the one page card style design. Widget re-order functionality was removed. Cards were laid out in order of important and sized to take full advantage of the dimenstions of desktop.</p>
</div>
<!-- 1 column image row -->
<div class="col-sm-12 py-3">
<img class="w-100 mb-3" src="/img/jaxxliberty_desktop.png" alt="">
</div>
<!-- 1 column image row -->
<!-- 2-paragraph text component -->
<!-- 2 column image row -->
<div class="col-sm-12 py-3">
<h3>Wallet Widget</h3>
<div class="row">
<div class="col-md-6">
<p>The wallet widget carousel needed a scalable solution needed to accommodate an infinite number of pages.</p>
<p>A custom built <span class="font-weight-bold">auto re-sizing trackbar</span> expanded and contracted based on the number of pages - much like the scrollbar on a web page. The more pages, the shorter the trackbar and vice versa.</p>
</div>
<div class="col-md-6">
<img class="w-100 mb-3" src="/img/jaxxliberty_walletwidget.png" alt="">
</div>
</div>
</div>
<div class="col-sm-12">
<h3>Tabbed Navigation</h3>
<p>As more modules were added to the application, tabs were introduced as quick links to each module. The main modules were housed on the default view, and secondary modules were accessed by on the expand arrow.</p>
</div>
<!-- 1 column image row -->
<div class="col-sm-12 py-3">
<img class="w-100 mb-3" src="/img/jaxxliberty_tabnav.png" alt="">
</div>
<!-- 1 column image row -->
<!-- /end 2 column image row --><!--end col-->
</div>
<!-- /end row-->
</div><!--/end container-->
<!-- footer -->
<footer>
<div class="row my-3">
<div class="offset-sm-2"></div>
<div class="col-sm-4 flex-right flex-center-sm p-3">
<a href="mailto:warrenyen@gmail.com" target="_blank">
<img src="/img/mail-icon.svg" alt=""> <span>warrenyen@gmail.com</span>
</a>
</div>
<div class="col-sm-4 flex-left flex-center-sm p-3">
<a href="https://www.linkedin.com/in/warren-yen-toronto/" target="_blank">
<img src="/img/linkedin-icon.svg" alt=""> <span>tinyurl.com/sn4bmmx</span>
</a>
</div>
<div class="offset-sm-2"></div>
<div class="col-sm-12 text-center">
<p id="copyright" class="my-3"></p>
</div>
</div>
</footer>
<!-- /end footer -->
<!-- end main -->
</main>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js" type="text/javascript"></script>
<script src="/index.js"></script>
</body>
</html>