WES Website Redesign
WES Website Redesign
Problem
The website was looking outdated, had inflexible page templates, and confusing information architecture. Leadership wanted to better balance the core product and social impact initiatives. The site also was exemplifying many accessibility issues.
Scope
Navigation, footer, homepage, about page, and 4 category listing pages. 3 month timeframe.
Role
Lead Designer.
Outcome
Raised the accessibility score from ~70% to ~90% (measured using Google Lighthouse). Introduced a component library. Improved information architecture.
Before
During
After
Mobile, After
Information Architecture and Navigation Design
Before
Users had to access B2B services via the institutions link, the whole navigation would change but stay within the site, a very confusing experience. Mission driven activities (philanthropy and policy work) were hidden. Tools and Advice were given too much real estate. No clear CTAs to direct users to the product. Visually, the navigation, along with a permanent alert banner, took up almost 1/3 of the desktop view and were sticky. Font and color contrast issues.
After
Reduced navigation height significantly, and introduced disappear on scroll functionality. Information hierarchy improvements, merged the B2C and B2B experiences. Font and color contrast issues fixed. Button hierarchy for CTAs.
Home Page
About WES
About Credential Evaluations
Wireframing Process
I took time to explore layout options of the desktop and mobile experience. Most of this time was spent time iterating, developing page sections that could help tell the organizations story, and checking in with developers about the technical feasibility and effort needed to achieve our ideas.
Home Page (Before and After)
Introduced a hero carousel to give important information about the product. Clear outlining of the process of the product/service. Improved CTAs, button hierarchy and no more giant icons. Using a mosaic to showcase the philanthropy, policy and though leadership work.
Improved photography, putting an emphasis on original photography either from our customers or our mission driven events. Only using stock photos when needed.
All final designs were delivered to developers with redlines and detailed interaction specs.
Documentation for Developer Handoff and Creation of a Component Library
Throughout the process, we built a component library including page sections, buttons, and icon styles to simplify the design process of new pages and standardize development, making the website design more easily scalable.
View More Work
