NSPARC Website

NSPARC Website

NSPARC Website

UI Concept • 2021

Client: NSPARC

Project Vision: Develop a new website that more accurately explains the innovative services NSPARC provides to its partners. 


Role: Concept, Research & Visuals

Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop

Challenges: Navigating working and meeting remotely one month into the 2020 pandemic shutdown (NSPARC swiftly shifted to remote operations in March 2020).
Developing a layout that meet the needs of the different types of users that would visit the site. 
Ensuring the layout and content met the requirements and expectations of the executive team.

Project Vision: Develop a new website that more accurately explains the innovative services NSPARC provides to its partners. 


Role: Concept, Research & Visuals

Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop

Challenges: Navigating working and meeting remotely one month into the 2020 pandemic shutdown (NSPARC swiftly shifted to remote operations in March 2020).
Developing a layout that meet the needs of the different types of users that would visit the site. 
Ensuring the layout and content met the requirements and expectations of the executive team.

Project Vision: Develop a new website that more accurately explains the innovative services NSPARC provides to its partners. 


Role: Concept, Research & Visuals

Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop

Challenges: Navigating working and meeting remotely one month into the 2020 pandemic shutdown (NSPARC swiftly shifted to remote operations in March 2020).
Developing a layout that meet the needs of the different types of users that would visit the site. 
Ensuring the layout and content met the requirements and expectations of the executive team.
Name
Name
RESEARCH

NSPARC, a unit of Mississippi State University, is a nationally recognized interdisciplinary research center focused on workforce and economic development. To align their website with their new mission and vision, the NSPARC executive team appointed their communications manager to lead the NSPARC Website Committee. This seven-member committee, representing Research, Design & Development, IT, and Communications, was tasked with researching website features, providing feedback on the current site, and creating visitor personas to guide design decisions. These personas reflect typical website visitors, such as academic researchers or reporters. See the personas below:

Name
Name
DESIGN PROCESS

After gathering research, the committee chose website features, top navigation buttons, and homepage content. Adhering to MSU’s visual standards, we created a navigation map and website mockup. I presented the mockup to the committee for feedback and made necessary adjustments before seeking executive approval.

Name
Name
MID-FI SCREEN FLOW
Name
COLORS

This phase of the project was somewhat simpler. As a unit of MSU, NSPARC is required to use the official MSU color palette, primarily maroon, light grey, and dark grey, along with 16 approved accent colors. Below are the colors the committee selected for the website.

Name
NAVIGATION & DROPDOWN MENU
Name
Name
MAIN ICONS
Applied Research creates accurate and up-to-date reporting and analyses that inform decision-making.
Design & Development builds high-quality software and systems based on the specific needs of partners.
Security & Infrastructure provides system, network, and helpdesk support and implements measures to ensure data is safe and secure.
Policy, Planning & Communication  provides policy review and grant writing services to meet partners’ needs.
Name
HI-FI SCREEN FLOW
Name
FINAL PAGES
Name
HOMEPAGE
Name