-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathLGBTredesign.html
executable file
·204 lines (180 loc) · 10.4 KB
/
LGBTredesign.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>LGBT Website Re-Design</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/modern-business.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Kelly Miller</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="portfolio-2-col.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Website Re-Design
<small>LGBT Center of Raleigh</small>
</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="https://github.com/victoriarainc/lgbtCenterofRaleigh">View on Github</a>
</li>
</ol>
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-12">
<h3 class="my-3">Project Overview</h3>
<p>This project was completed in a group as part of a final project for a code academy that I attended in 2017. The code academy was an immersive 12 week boot camp designed to help people change their careers to become Software Engineers.</p>
<p>My partner for this project was Victoria Coleman. Check out her amazing work <a href="https://github.com/victoriarainc"></a>here</p>
<p>Our goal for this project was to re-design the exisiting LGBT Center of Raleigh website. This was an excellent opportunity to put our new skills to use for a cause that we cared about. It was also a chance to learn more about UX/UI Design.</p>
<h3 class="my-3">About the LGBT Center of Raleigh</h3>
<p>The LGBT Center of Raleigh is a 501(c)(3) tax-exempt non-profit corporation that seeks to identify needs and advocate for resources benefiting the diverse population of lesbian, gay, bisexual, and transgender people, their friends and supporters within and beyond central North Carolina.</p>
<h4>Project Goals</h4>
<!-- <h3 class="my-3">Project Goals</h3> -->
<ul>
<li>Re-design the exisiting site to look and feel more modern</li>
<li>Promote community involvement and awareness</li>
<li>Increase donations and sustainers</li>
</ul>
<h3 class="my-3">Tools</h3>
<ul>
<li>Trello</li>
<li>Balsamiq</li>
<li>Bootstrap</li>
<li>Survey Monkey</li>
<li>Canva</li>
</ul>
</div>
</div>
<!-- /.row -->
<br>
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-6">
<h3 class="my-3">The Original Website</h3>
<p>The original website was outdated in a number of ways. It looked clunky, it had redundant information, and it was difficult to navigate.</p>
<p>Voices from all over Raleigh helped contribute to this redesign. Staff, volunteers, and members of the center were all welcomed to provide feedback and ideas for the website. This is an application that affects a large and growing community. Their voices mattered most during the planning and development of the LGBT Center of Raleigh's website.</p>
<p>The Executive Director James Miller, Assistant Executive Director Kelly Taylor, and Web Developer Jim Manchester all led the way for this redesign to be a successful project that benefited both the community and the Center.</p>
</div>
<div class="col-md-6">
<img class="img-fluid" src="images/ExistingSiteFullScreenShot.png" alt="">
</div>
</div>
<!-- /.row -->
<br>
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-6">
<img class="img-fluid" src="images/trello.png" alt="">
</div>
<div class="col-md-6">
<h3 class="my-3">The Design Process</h3>
<ul>
<li>Plan</li>
<li>Conduct Research</li>
<li>Create Mockups and Wireframes and Prototypes</li>
<li>Gather Feedback</li>
</ul>
</div>
</div>
<!-- /.row -->
<br>
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-6">
<h3 class="my-3">Plan</h3>
<p>We worked together in week long Agile sprints. Each week we had a new goal to accomplish. The sprint cycles were broken up into 3 weeks. During week one, we spent time planning and conducting UX research. We also gathered website requirements from the LGBT Center. During week two we created wireframes, mockups and a prototype. Week three was the final week of the project to finalize our prototype and create a presentation for the project.</p>
<h3 class="my-3">Wireframes and Mockups</h3>
<p>We created wireframes and mockups using Balsamiq to create a visual representation of what our final site should look like. This helped us have a clear idea of what type of code we needed to write and how complex the site needed to be.</p>
</div>
<div class="col-md-6">
<img class="img-fluid" src="images/Homepage.png" alt="">
</div>
</div>
<!-- /.row -->
<br>
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-6">
<img class="img-fluid" src="images/homepageBootstrapFinal.png" alt="">
</div>
<div class="col-md-6">
<h3 class="my-3">Bootstrap Prototype</h3>
<p>We chose to create a high-fideltity prototype in Bootstrap for a few different reasons. Since Bootstrap is a framework for HTML and CSS that allowed us to quickly create a prototype without customizing the code base. Bootstrap is also mobile responsive and scaleable for an organization if they need to make updates to the site. It's more intuitive to change the code than with a customized coded site.</p>
<p>Orignally, our project end goal was just to redisign the homepage of the LGBT Center. However, Bootstrap allowed us to re-design the entire site in three weeks. </p>
<p>As part of our learning goals, Bootstrap was a framework that we had not worked with before and this project was a great opportunity to learn it.</p>
<p>Orignally, our project end goal was just to redisign the homepage of the LGBT Center. However, Bootstrap allowed us to re-design the entire site in three weeks. </p>
<p>As part of our learning goals, Bootstrap was a framework that we had not worked with before and this project was a great opportunity to learn it.</p>
<h3 class="my-3">Gathering Feedback</h3>
<p>A Facebook poll collected opinions from the volunteers of the center to talk about what they would like to see improved, how they believe the site is used most, and what questions they receive most often from members of the community.</p>
<p>Additionally, a suggestion box was left at the Center for a week to collect suggestions from members. These were collected and recorded for future maintenance and continued editing of the webpage as a whole.</p>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-12">
<h3 class="my-3">Future State and Roadmap</h3>
<ul>
<li>Continue to maintain and update the new site</li>
<li>After the site is launched, a link will be provided at the bottom of the page to bring users to a survey about their experience. This data will be monitored and taken into consideration for further maintenance of the site to make sure goals were reached.</li>
</ul>
</div>
</div>
<!-- /.row -->
<!-- Portfolio Item Row -->
<div class="row">
<div class="col-md-12">
<h3 class="my-3">Challenges and Lessons Learned</h3>
<p>It was challenging to get feedback from the LGBT Center throughout our project due to conflicting events and priorities. Meetings were often rescheduled. </p>
<p>Spending time on project planning was the key to our success. This allowed us to stay organized and created a very efficient work environment for myself and my project partner. Planning helped us both stay accountable for our deliverables and it minimized chaos under tight deadlines.</p>
<p>This project helped us compete a project from start to finish for the first tiem during our code academy. It was rewarding to actually work with the community and improve a problem.</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Email: ukmills12@gmail.com</p>
<p class="m-0 text-center text-white">
<a href="https://github.com/designbright" target="_blank">GitHub</a> |
<a href="https://www.instagram.com/design_bright/" target="_blank">Instagram</a> |
<a href="https://www.linkedin.com/in/kelly-miller-b2417756/" target="_blank">LinkedIn</a>
</p>
<p class="m-0 text-center text-white">Copyright © Design Bright 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>