![mockup.png](https://static.wixstatic.com/media/914085_b024bbf52ad74db8a70df250a871328f~mv2.png/v1/crop/x_0,y_812,w_4108,h_2485/fill/w_1541,h_932,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/mockup.png)
The CMEC Website Redesign
The WSU Composite Materials and Engineering Center website serves as the online hub for information about the center's research, faculty, and programs. It caters to students, researchers, and sponsors in the field by providing details on research, academics, and resources. Interactive elements like event calendars, research publications, and contact information foster engagement and connection within the center's community.
Services Offered: WordPress, Figma, Adobe Illustrator, Miro
Duration: May 2023 - November 2023
Client: WSU The Composite Materials & Engineering Center
Project Summary
The CMEC website is outdated, offers limited engagement, and has poor user experience. This hinders its ability to represent WSU's brand and connect with students, researchers, and sponsors. The revamp project aims to solve these issues, creating a modern, engaging, and user-friendly platform.
Project Goals
This project aims to transform the CMEC website into a modern digital hub aligned with WSU branding. We'll improve engagement and accessibility for diverse users, creating a user-friendly platform. The ultimate goal is an online presence that reflects WSU's excellence in the field, strengthens community connections, and promotes innovation.
My Role
Designer - Design research, wireframe, prototype, user research, user experience design, user interface design
Target Audience
-
Researchers publishing their projects
-
Researchers seeking resources
-
Prospective Students seeking opportunities
-
Students seeking educational purposes
-
Sponsors interested in connecting talents and project Industry
Jump To
Phase I: Research
Our Clients
Phase II: Brainstorming
Website Navigation
Understand the current website layout by identifying and categorizing main pages and subpages. Once done, identify which pages could be categorized together or pages that could be combined to decrease navigation and shorten the navigation bar.
Methods: Card Sort, Figma
Findings
-
Navigation: Difficult to use and find information, including contact details.
-
Content: Unclear homepage, lacking fresh and engaging content.
-
Branding: Inconsistent with WSU's new branding, impacting user experience.
Overall, the website needs significant improvements in navigation, content, and branding to enhance usability and user experience.
![](https://static.wixstatic.com/media/914085_16472858b17d4b0ba0fae8fd2b5df433~mv2.png/v1/fill/w_598,h_330,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/914085_16472858b17d4b0ba0fae8fd2b5df433~mv2.png)
Solution
Revamp and Modernization solutions for the website:
-
Homepage: Showcase research projects, student contributions, impacts, and metrics using visuals
-
Content: Implement features for easy updates to publications, upcoming events, research, etc.
-
Navigation: Simplify menu for efficient user exploration
-
Branding: Align website design with WSU branding
-
Visuals: Incorporate visuals for greater clarity and engagement
![](https://static.wixstatic.com/media/914085_003a9b74b4574127ae58addb6ce62cda~mv2.png/v1/fill/w_598,h_329,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/914085_003a9b74b4574127ae58addb6ce62cda~mv2.png)
Information Architecture
-
Based on user research (card sorting and requirements).
-
Improves user experience by:
-
Guiding users efficiently through the website.
-
Enabling users to easily complete tasks.
-
Providing clear information about CMEC's offerings for students and stakeholders.
-
![](https://static.wixstatic.com/media/914085_58e9e901ce0f4ae8b90038fa42d02ecb~mv2.png/v1/crop/x_507,y_126,w_1429,h_1483/fill/w_426,h_442,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/914085_58e9e901ce0f4ae8b90038fa42d02ecb~mv2.png)
Style Guide
WSU BRANDING STYLE GUIDE
“Crimson, gray, and white are the foundation of the WSU color palette. They serve as the brand’s primary colors for print, electronic, and environmental applications.” - WSU
COLOR PALETTE
Primary
#A60F2D
#4D4D4D
Secondary
#CA1237
Accent
#F3E700
#152F52
#000000
#5BC3F5
#5FA5BF
#FFFFFF
#FF6727
BUTTON
![image.png](https://static.wixstatic.com/media/914085_224821dd60b941e9ba15ee1e6a31f241~mv2.png/v1/fill/w_342,h_123,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/914085_224821dd60b941e9ba15ee1e6a31f241~mv2.png)
TYPOGRAPHY
WEB
Montserrat
Proxima Nova
Phase III:
Final Design
ACCESSIBILITY CONSIDERATIONS
Large text with high contrast for users with vision impairment
Icons and images are used for quick and easy navigation without the over usage of text
Pop-ups and separate pages for certain information creates a for focused experience for users to prevent confusions
Iterations Based on Clients Feedback
Data Analytics
Data analytics show a noticeable uptick in user traffic on the CMEC website, beginning in June when the website transitioned to its new design, indicating its positive impact. The data reveals a compelling surge in site visitors with the engagement being attributed to various factors such as providing a more effective content organization and improving users experience that successfully attracted and retained a larger audience.