Website redesign that simplified navigation and strengthened the brand experience
Website redesign that simplified navigation and strengthened the brand experience
Website redesign that simplified navigation and strengthened the brand experience
By Any Means is an organization focused on helping the homeless in Orange County. As a board member, I sought to improve their website to better reflect the mission and improve the information architecture.
By Any Means is an organization focused on helping the homeless in Orange County. As a board member, I sought to improve their website to better reflect the mission and improve the information architecture.
My Role
My Role
Solo website design project with assistance from Anqi Luo on planning and copywriting. Spearheaded research and design over the course of 3 months.
Solo website design project with assistance from Anqi Luo on planning and copywriting. Spearheaded research and design over the course of 3 months.
Initial Audit & Research Findings
Initial Audit & Research Findings
I found four major issues with the website by conducting an audit and surveying 14 individuals.
I found four major issues with the website by conducting an audit and surveying 14 individuals.
Confusing & Misleading Navigation
Confusing & Misleading Navigation
Home
Home
Get the Facts
Get the Facts
Advocacy
Advocacy
Events
Events
Members
Members
History
History
Contact Us
Contact Us
Only 40% of respondents expected the Get the Facts page to be information about the homelessness crisis.
Only 40% of respondents expected the Get the Facts page to be information about the homelessness crisis.
Advocacy and events were seen as interchangeable terms for volunteer opportunities which caused confusion in expectations and navigation for users.
Advocacy and events were seen as interchangeable terms for volunteer opportunities which caused confusion in expectations and navigation for users.
1
Original navigation bar
Disconnected Features
Disconnected Features
Several weak features that didn't connect to the mission or add value to users.
Several weak features that didn't connect to the mission or add value to users.
Club History
Club History
Lacked a current connection to the club
Lacked a current connection to the club
Search Button
Search Button
Redundant feature that served little purpose
Redundant feature that served little purpose
Blog Posts
Blog Posts
Only 25% of users expected a blog on the website
Only 25% of users expected a blog on the website
2
No Visual Interest
No Visual Interest
Generic page layouts, low design consistency, poor color contrast, low quality photos, and dense text strayed people away from the website’s information.
Generic page layouts
Low color contrast & dense text
3
Generic page layouts, low design consistency, poor color contrast, low quality photos, and dense text strayed people away from the website’s information.
Lacked Important Information
Lacked Important Information
No comprehensive list of our various volunteer events
Get the Facts & History pages lacked current information
No comprehensive list of our various volunteer events
Get the Facts & History pages lacked current information
of users were expecting to find information on membership, general meetings, and the intern program
of users were expecting to find information on membership, general meetings, and the intern program
75%
75%
4
The Plans
The Plans
Working alongside a fellow board member, we first restructured the navigation, created sketches, and mockups.
Working alongside a fellow board member, we first restructured the navigation, created sketches, and mockups.
Then, as the sole designer, I began implementing the designs into Wix.
Then, as the sole designer, I began implementing the designs into Wix.
Iterative Design Approach
Iterative Design Approach
I continuously iterated by asking myself questions such as…
I continuously iterated by asking myself questions such as…
How might I make this information more visually organized and interesting?
How might I make this information more visually organized and interesting?
First Mockup of General Meeting Information
A new format that draws attention and organizes the information more succinctly.
Final iteration of General Meeting Information
How might I apply different visual treatments to diversify the experience and draw more attention?
How might I apply different visual treatments to diversify the experience and draw more attention?
First iteration of Events page
Often, the first iteration was just missing that extra oomph!
Over time, I learned how to design to capture interest despite repetitive elements and dense information.
Many times, the first iteration was just missing that extra oomph!
Over time, I learned how to design to capture interest despite repetitive elements and dense information.
Final iteration of Events page
Final iteration of Events page
A refreshed visual layout that highlights the impact and uniqueness of each event.
A refreshed visual layout that highlights the impact and uniqueness of each event.
Designing Solutions
Designing Solutions
Here's how I tackled issues and further improved the site.
Here's how I tackled issues and further improved the site.
Clarifying Information Architecture
Clarifying Information Architecture
Reduced navigation buttons and unnecessary features, and included important, missing information.
Reduced navigation buttons and unnecessary features, and included important, missing information.
Home
Events
Membership
Resources
About
Contact Us
History page served little function and was combined with About page
Users felt navigation was
Users felt navigation was
15%
easier on the new site than the old site
easier on the new site than the old site
Users were
Users were
27%
more confident in finding necessary information
more confident in finding necessary information
1
Created one place for all things related to events
Home
Events
Membership
Resources
About
Contact Us
Created one place for all things related to events
Home
Events
Membership
Resources
About
Contact Us
Home
Events
Membership
Resources
About
Contact Us
Created one place for all things related to events
Home
Events
Membership
Resources
About
Contact Us
Created one place for all things related to events
Create a More Cohesive and Up-to-Date Brand Experience
Create a More Cohesive and Up-to-Date Brand Experience
Implemented the new brand identity and added recent media that better encompassed BAM's mission
Implemented the new brand identity and added recent media that better encompassed BAM's mission
Modernized the logo and added brighter colors to reflect a more friendly and hopeful brand.
Included recent media that attracted attention and offered a better view of the variety of events BAM hosts.
Included recent media that attracted attention and offered a better view of the variety of events BAM hosts.
The #1 descriptor for the previous site was that it was generic.
The #1 descriptor for the previous site was that it was generic.
Now, users described the site as more inspiring, empowering, modern, cheerful, clear and passionate.
2
Modernized the logo and added brighter colors to reflect a more friendly and hopeful brand.
Modernized the logo and added brighter colors to reflect a more friendly and hopeful brand.
Now, users described the site as more inspiring, empowering, modern, cheerful, clear and passionate.
The #1 descriptor for the previous site was that it was generic.
Now, users described the site as more inspiring, empowering, modern, cheerful, clear and passionate.
Storytelling Approach
Storytelling Approach
Focused on visual storytelling to create stronger impact
Focused on visual storytelling to create stronger impact
Focused on making the information more digestible and telling a story that connects to BAM's mission
Focused on making the information more digestible and telling a story that connects to BAM's mission
On average, users reported information to be
On average, users reported information to be
21%
more digestible than before, for both resources and events
more digestible than before, for both resources and events
Users rated the new resources page as
Users rated the new resources page as
36%
more emotionally impactful and aligned to the mission
more emotionally impactful and aligned to the mission
3
Takeaways
Takeaways
Being my first web design project, the novelty was invigorating and challenging, and I was devoted to making a final product that pushed my limits as a designer. This was a project where I rapidly learned, whether it be as small as learning to use Wix, or as big as learning to make dense information more visually enticing.
Being my first web design project, the novelty was invigorating and challenging, and I was devoted to making a final product that pushed my limits as a designer. This was a project where I rapidly learned, whether it be as small as learning to use Wix, or as big as learning to make dense information more visually enticing.
Learnings
Learnings
Introduction to Wix
Scrollytelling techniques
How to ask more effective questions about comparative improvements
Maintaining visual interest despite repetitive information
Using animations to improve the experience
Introduction to Wix
Scrollytelling techniques
How to ask more effective questions about comparative improvements
Maintaining visual interest despite repetitive information
Using animations to improve the experience
Areas of Improvement
Areas of Improvement
Website responsiveness
Research shortcomings of new navigation
Scale back on complicated animations
Implement a stronger home hero section
Expand the color palette
Website responsiveness
Research shortcomings of new navigation
Scale back on complicated animations
Implement a stronger home hero section
Expand the color palette