Website Redesign
Client
The Greenmount West Community Center (GWCC) serves as an incubator to develop the greatness and talents of Black youth and their families in Baltimore, MD.
The Problem
GWCC does a lot for the community. But by viewing the website, it could be difficult to understand the wealth of services they provide.
My Role
UX Research
UX/UI Design
Our Team
4 UX Designers
Tools Used
Figma
InVision
Miro
Optimal Sort
Slack
The Solution
Redesign the website so that the Greenmount West community can better understand the Center's offerings, while simultaneously making donation via third-party service, mightycause, a simple process.
Research & Discovery
Website Audit
Kick-off Meeting with the Client & UX Research
Based on our research (one stakeholder interview and four (4) usability tests), key pain points of the GWCC website include:
-
Navigation bar could be confusing; difficult to find specific information
-
Users didn't understand the breadth of services the Center offers
-
Color scheme wasn’t always consistent
-
The majority of their outreach is done via Instagram; but Instagram isn't emphasized on website
-
Limited call-to-action on website
The audit allowed our team better understand the strengths and weaknesses regarding GWCC's existing website navigation, performance, and UI Design.​
Competitor Analysis
Then, we identified two direct and two indirect competitors.
We looked at other websites of similar nonprofits in the Baltimore area to further our research on what a useful website is comprised of. Some takeaways of what made them successful included:
-
Logos of sponsors and/or are displayed
-
Mission, Vision & Values are easy to find
-
Events are emphasized and easy to register for
-
Prominent hero images that capture attention
-
Drop down navigation menu
-
Consistent button styles typography
Analyzing & Defining
Affinity Diagram
In order to group meaningful insights from the four (4) five-second user tests and stakeholder interview, we conducted an Affinity Diagram to visualize the relationships between different groups.
​
The goal was to categorize all of the stickies into groups by identifying patterns that occurred based on the content of the stickies. This resulted in six groups: Personality (Tone of Voice), Fundraising, Staff & Organization, Atmosphere, Communities Served/Initiatives, Content Management, Resources, Services/Activities.
Persona
User Journey Map
Information Architecture
Feature Prioritization Matrix
We then identified which features would be the most impactful for users, and require less energy for our stakeholder to maintain.
The MVP for our users and stakeholder are:
-
The incorporation of a video
-
Clear and intuitive navigation
-
An emphasis on Black Women and Girls page on the homepage and other pages of the website, and
-
An upbeat and positive brand personality
.png)
Open Card Sorting
As the current site navigation had no hierarchy, our team conducted an Open Card Sort exercise which allowed 10 participants to sort each of the navigation bar menu titles into groups that made sense to them.
From this exercise we were able to restructure the main menu navigation into intuitive categories, while giving the site navigational hierarchy. The new structure also freed up some space on the otherwise cramped navigation menu bar.
Revised Site Map
The new navigation structure, which was a result of the open card sort exercise.
User Flow Diagram
With our persona's journey in mind and our new navigational structure, we created a user flow diagram to demonstrate how a user would navigate through the site’s menu structure to access information.
Branding & UI Design
Style Guide: Overview & Logos
Our team maintained GWCC's existing color scheme as the branding aligns with the mission and vision of the organization. Additionally, we did not want the nonprofit organization to have to incur any extra costs by redesigning its current logo as the organization has merchandise and other items already featuring its existing branding. We did update the Typography, as the current website used display and stylistic fonts that made reading challenging.
Wireframes & Prototyping
From Sketches to Lo-Fi Wireframes
We began sketching the wireframes for the pages of most importance (based on the prior feature prioritization matrix). 'Homepage' and the 'Black Women and Girls' page.
The homepage took on a major re-design to include a carousel and hero video. Once completed, we began our low fidelity wireframes.
Usability Testing
Mid-Fi Testing
We created a mid-fidelity prototype to test our initial design assumptions, it included an interactive navigation bar and other 3 pages of the website. We used this prototype to conduct 5 usability tests. Below are the key iterations:
-
Full width hero video to the Homepage
-
Banner on Homepage to display real-time updates/events
-
Instagram Feed to Homepage - removed FB Feed
-
Hover state to the Donate button to indicate to users will be taken offsite to a third-party service
Hi-Fi Testing
After the mid-fi iterations, our team conducted 5 more usability tests and 70 A/B tests. Below are the key iterations from this stage of testing:
-
Increased clarity of hero video
-
Emphasized the Newsletter Sign Up box with yellow, rather than purple
-
Changed 'Programs' navigation menu label to 'Our Programs'
-
Added partner logos the 'Our Team' page
-
Re-vamped carousel on Homepage to emphasize GWCC's core initiatives
