Website Redesign - The LGBT Center of Raleigh
Project Overview
The LGBT Center of Raleigh website redesign was completed as part of a group project for a code academy that I attended in 2017.
The code academy was an immersive educational boot camp designed to help people change their careers to become Software Engineers and User Experience Designers.
I completed this project as a developer and designer.
Project Goals
Re-design the homepage of the existing site to look and feel more modern
Promote community involvement and awareness
Increase donations and sustainers
Problem Statement
Users of the LGBT Center of Raleigh website need to be able to quickly navigate through a visually appealing site in order to complete tasks such as:
Donating,
Learning more about upcoming events
Accessing community resources
The Design Process
Phase 1 - Understand
During this phase of the design process, we spent time understanding more information about the current user and gathering product requirements from the Executive Director of the LGBT Center of Raleigh.
Pain Points
The original website was outdated in a number of ways:
Looked clunky
Redundant information
Difficult to navigate
The main users
The LGBT Center of Raleigh website is used by a large and growing community of people with diverse backgrounds and a wide range of experience with technology.
The website is most commonly accessed on a desktop and used to complete the following tasks:
Donate
Learn more about upcoming events
Access community resources
Phase 2 - Planning
Plan - The Agile Sprint Cycle
My partner and I worked together in week long Agile sprints. Each week we had a new goal to accomplish.
Week 1
Create a Trello board to keep track of To Do items
Conduct user research
Week 2
Create wireframes using Balsamiq
Create a Bootstrap prototype
Week 3
Finalize prototype
Create a project presentation
Utilizing a Trello board helped keep us organized during the Agile Sprint Cycle
Phase 3 - Research
User feedback of current website
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.
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.
After conducting user research, we also created a SWOT Analysis to understand the website’s current state and identify opportunities for improvement.
Phase 4 - Wireframing and Prototyping
Wireframing
During this phase of the design process, we created wireframes using Balsamiq. The wireframes served as a visual representation of what our final site could look like. The wire framing process helped us quickly ideate on concepts and user workflows
Prototyping
We chose to create a high-fidelity prototype in Bootstrap for a few different reasons:
Originally, our project end goal was just to redesign the homepage of the LGBT Center. However, using a Bootstrap allowed us to re-design the entire site in three weeks.
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.
Bootstrap is mobile responsive
The original website “Donate” page
The redesigned “Donate” page using a Bootstrap prototype
The original “Calendar” page
The redesigned “Calendar” page using a Bootstrap prototype
Project Reflections
Future State and Roadmap
Phase 5 - Test and gather feedback
As part of the final phase of the design process, we would continue to test the prototype and gather user feedback to validate or invalidate our design.
Challenges
Gathering initial feedback from the LGBT Center of Raleigh was difficult due to conflicting schedules and priorities.
Lessons Learned
Spending time on project planning was the key to our success. Spending time in the “Planning” phase of the design process allowed us to stay organized and work more efficiently. It also helped keep us accountable for our deliverables by minimiz chaos under tight deadlines.
It was rewarding to actually work with the community and improve a problem.