top of page
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
Research
Brainstorming
Final Design

Phase I: Research

Our Clients

Yadama.jpg

Needs

  • User-friendly navigation with modern, intuitive, and responsive design that caters to various users

  • Structure and organized platform that effectively showcases the center’s researchers’ diverse projects

Vikram Yadama, CMEC Director

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.

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

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.

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
TYPOGRAPHY

WEB

Montserrat

PRINT

Proxima Nova

Phase III:
Final Design

Website Layout

Removal of website’s blank spaces and vertical scrolling
Methods: Change Website Theme, Utilize Multiple Columns, Figma

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

Issues
  • Grid layout with excessive white space limits content.

  • Static image and outdated icons lack visual appeal.

  • Multiple introductions clutter the homepage.

  • No event information or news updates

Solution
  • Designed for easy updates.

  • Dynamic carousel showcases diverse projects and research.

  • Blends informative graphics with engaging content.

  • Additional visuals highlight focus areas for user engagement.

  • Quicklinks for easy navigation.

 

Overall goal: create a captivating and visually appealing homepage.

Redesigning the Home Page

Redesign home page

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.

Similar Projects

© 2023 by Anh Ngo. Powered and secured by Wix

bottom of page