This repository has been archived by the owner on Apr 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathprocess.html
executable file
·197 lines (182 loc) · 9.83 KB
/
process.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Vas - My Process</title>
<!-- Mobile Specific Metas
================================================== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Vasundhara - My Process">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta name="author" content="Vasundhara Sharma">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.svg"/>
<!-- ** Plugins Needed for the Project ** -->
<!-- Bootstrap -->
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css">
<!-- bootstrap-icon -->
<link rel="stylesheet" href="plugins/bootstrap/bootstrap-icons.css">
<!-- Main Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<!-- Calendly link widget begin -->
<!--suppress JSUnresolvedLibraryURL -->
<link
href="https://calendly.com/assets/external/widget.css"
rel="stylesheet">
<!--suppress JSUnresolvedLibraryURL -->
<script
src="https://calendly.com/assets/external/widget.js"
type="text/javascript">
</script>
<!-- Calendly link widget end -->
<!-- Lottie -->
<script
src="js/http_unpkg.com_@lottiefiles_lottie-player@latest_dist_lottie-player.js"
type="text/javascript">
</script>
</head>
<body>
<!-- Navigation Bar -->
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-sm py-0 px-0 my-0 mx-0 navbar-dark">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.svg" alt="VS" width="24" height="24">
</a>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav ml-auto mr-0">
<li class="nav-item">
<a class="nav-link" href="work.html">Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="process.html">Process</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- /Navigation Bar -->
<!-- Main Content -->
<section class="section">
<div class="container">
<div class="row flex-lg-row align-items-center pt-5 px-3">
<h1 class="text-dark">My Process</h1>
</div>
<p>The process and steps described below are used in typical UI/UX development. These are however not set in
stone and
are always adapted to best fit the project and/or the team's needs.</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<div class="section-process">
<lottie-player class="float-lg-left mr-4" src="images/process/process-1.json" speed="0.2"
style="width: 300px; height: 250px;" loop autoplay></lottie-player>
<h4>Discovery & Research</h4>
<p>First step of any design process involves understanding the problem, the target audience or
users and the project requirements.</p>
<p>I start with reviewing the brief followed by conducting stakeholder and/or client interviews.
This is followed by analyzing the competition.</p>
<p>After this the user's needs and pain points have to be identified as well. Once all of these
points are
covered can the project goals and objectives be defined.</p>
</div>
<div class="section-process bg-gray">
<h4>Strategy & Planning</h4>
<lottie-player class="float-lg-right ml-4 mb-1" src="images/process/process-2.json" speed="0.2"
style="width: 300px; height: 250px;" loop autoplay></lottie-player>
<p>In this step an overall vision for the product and a roadmap for the design team is created.</p>
<p>The overall scope and constraints for the project are worked out and agreed upon in this step.</p>
<p>A design strategy has to be planned out, following which I start by making user personas and
user journey maps.</p>
<p>A final project plan and timeline is created at the conclusion of this step.</p>
</div>
<div class="section-process">
<lottie-player class="float-lg-left mr-4 mb-1" src="images/process/process-3.json" speed="0.2"
style="width: 300px; height: 250px;" loop autoplay></lottie-player>
<h4>Design</h4>
<p>In this stage the user experience and visual design aspects of the product are created.</p>
<p>The User-Flows, Wireframes and Prototypes are created which quickly start forming a visual
look and feel of the product.</p>
<p>After this the UI is designed, which includes typography, iconography and a comprehensive components library.</p>
</div>
<div class="section-process bg-gray">
<lottie-player class="float-lg-right ml-4 mb-1" src="images/process/process-4.json" speed="0.2"
style="width: 300px; height: 250px;" loop autoplay></lottie-player>
<h4>User Testing</h4>
<p>In this step, the design is tested with real users for feedback and validation.</p>
<p> This helps in testing the usability of the design and gathering feedback from users.</p>
<p>Data gathered in this testing and analyzing the user behaviour are then incorporated into necessary design changes.</p>
</div>
<div class="section-process">
<lottie-player class="float-lg-left mr-4 mb-1" src="images/process/process-5.json" speed="0.2"
style="width: 300px; height: 250px;" loop autoplay></lottie-player>
<h4>Development & Implementation</h4>
<p>This is the final stretch in the UI/UX process where the design (including all assets) are
handed over to the development team.</p>
<p>During this step, collaboration with the development team is key to insure proper implementation of the design.</p>
<p>Final quality assurance testing is conducted at the conclusion of this step.</p>
</div>
<div class="section-process bg-gray">
<lottie-player class="float-lg-right ml-4 mb-1" src="images/process/process-6.json" speed="0.2"
style="width: 300px; height: 250px;" loop autoplay></lottie-player>
<h4>Launch & Beyond</h4>
<p>Once the product hits the market, constant improvements and updates need to be made.</p>
<p>User feedback and various other analytics direct these updates.</p>
<p>The product needs to be regularly refreshed according to the latest design trends and
guidelines. For
example, Google's
<a class="btn btn-tertiary" style="padding: 0; margin-top: 0; margin-bottom: 2px"
href="https://m3.material.io" target="_blank"> Material Design</a> and Apple's
<a class="btn btn-tertiary" style="padding: 0; margin-top: 0; margin-bottom: 2px"
href="https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/"
target="_blank"> Human Interface Guidelines</a>.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /Main Content -->
<!-- Footer -->
<footer class="bg-dark footer-section-alternate">
<div class="border-top text-center border-dark py-2">
<p class="mb-0 text-light">Copyright ©<script>
const CurrentYear = (new Date().getFullYear()).toString();
document.write(CurrentYear)
</script>
Vasundhara Sharma
</p>
</div>
</footer>
<!-- /Footer -->
<!-- jQuery -->
<script src="plugins/jQuery/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<!-- slick slider -->
<script src="plugins/slick/slick.min.js"></script>
<!-- filter -->
<script src="plugins/shuffle/shuffle.min.js"></script>
<!-- Main Script -->
<script src="js/script.js"></script>
<!--Calendly Floating Button-->
<!--suppress JSUnresolvedVariable, JSUnresolvedFunction -->
<button class="btn btn-primary btn-float btn-sm"
onclick="Calendly.initPopupWidget({url: 'https://calendly.com/meet-vas/1hour' }); return false;">
Schedule a Meeting
</button>
</body>
</html>