Responsive Web Design
Project Overview
Date
May 2023 - July 2023
UI/UX Design
Wireframing
Graphics & Imagery
Content Integration
Responsive Design
Branding
Roles
Figma
WordPress
Elementor
Photoshop
Tools
Addison Hunter - Project Manager
Collaborators
The project involves a comprehensive redesign of Equality Virginia's website with the primary objectives of rebranding, enhancing user-friendliness, modernizing the design, and providing accessible resources to Virginians. The existing website's layout is to be streamlined, eliminating clutter and complexity to improve user experience. The ultimate goal is to create an engaging online platform that serves as a valuable hub for information, support, and advocacy related to LGBTQ+ rights and resources in Virginia.
Project Background
The project encompasses a range of tasks, including UI/UX design, visual rebranding, content restructuring, and technical optimization. The redesigned website will feature a simplified and intuitive navigation system, ensuring easy access to essential information and resources. Modern design elements, including typography, color schemes, and graphics, will be incorporated to reflect Equality Virginia's mission and enhance visual appeal. Special emphasis will be placed on ensuring the website's responsiveness across various devices.
Scope of Project
Key Objectives
Develop a fresh visual identity that aligns with Equality Virginia's mission, incorporating updated logos, color palettes, and brand guidelines. Maintain consistency throughout the site.
Rebranding
Reorganize and optimize content to enhance readability, ensuring that information is concise, up-to-date, and categorized logically.
Content Restructuring
Revamp the website's layout and navigation to simplify user journeys, making critical resources, news, and events easily discoverable.
User-Friendly Design
Infuse contemporary design elements, clean interfaces, and multimedia components to create an engaging and visually appealing user experience.
Modern Aesthetics
Implement a responsive design approach to guarantee seamless functionality and aesthetics across desktops, tablets, and mobile devices.
Responsive Design
Strategy & Planning
A significant need for this redesign was simplifying the site information and resources to make to website user-friendly and easily accessible.
Creating a sitemap allowed the Equality Virginia’s team and myself decide on what’s most important and in what order the site will be categorized.
Sitemap
Lo-fi wireframes were created using pen and paper for easy editing and getting quick ideas on paper. This process was primary for construction of repeating and important layouts.
Lo-Fidelity Wireframes
Once the sitemap and lo-fi wireframes were analysed I took the feedback to create the layout for each page including: header & footer, buttons, and navigation elements.
This stage helped bridge communication between myself and the client by providing important visual elements for their team to review. It also ensures consistency across a large site which is crucial for the goal of rebranding.
While hi-fi wireframes should resemble the final product, I found the changes in copy and requested content to be a challenge in maintaining my wireframe reference. As copy was being approved at the same time as the website design was being created my layouts had to be quite flexible and ready to be reworked depending on the content.
Hi-Fidelity Wireframes
UI Kit
Responsive UI Design
The site was created with responsive UI as a necessity to improve accessibility to the community. The established style of the website was meticulously converted to tablet and mobile devices while maintaining branding, visual balance, and prioritizing information.
Challenges & Solutions
Designing a website for a busy non-profit organization presents a unique set of challenges. First and foremost is the need to balance aesthetics with functionality. The site must not only look appealing but also effectively communicate the organization's mission and activities. The site should stand out but be simple enough for their team to update information and events without the original designer in the future. Furthermore, given the limited time and resources of this talented team there was difficulty in receiving necessary copy, imagery, and other resources for a comprehensive website overhaul. Receiving information outside of the usual corporate workflow required a high level of adaptability and organization. Accessibility is another vital concern, as the site must cater to a diverse audience. Maintaining a user-friendly interface that allows visitors to easily access information, donate, or get involved in the organization's initiatives is paramount. In overcoming these challenges, the website should become a powerful tool for driving engagement, support, and awareness for the non-profit's cause.
Results & Outcomes
In closing, this case study exemplifies the impact of my collaboration with Equality Virginia. By designing a user-centric website, not only is essential information more accessible to the public but the non-profit's branding and outreach efforts are significantly enhanced. This project reaffirms the vital role of design in championing social causes and fostering inclusivity. Utilizing design to advance noble causes, amplify voices, and contribute positively to underserved communities.
