case study

excel
Network
Redesign

year:

2020

client/job:

MSUCAL

project type:

UI • UX • Web Design

role:

Lead Webpage Designer

tl;DR

I lead the design on the development of a new online visual identity for the MSU College of Arts & Letters community website, the Excel Network.

intro

The Excel Network is “a holistic approach to experiential learning, career education, student advising, and alumni-student networking.” In simpler terms, it is a community building tool for the Michigan State University College of Arts & Letters (MSUCAL).

This site was a part of a department wide project to migrate & redesign ~25 websites, to our custom Red Cedar theme on Wordpress. This project was all handled by our small, six person, in house marketing team.

My role was to design the marketing pages (landing pages, special interest pages, any and all custom designed content, etc.).

I worked inside of Wordpress, using the Elementor plugin to design these pages. I collaborated with our Senior Graphic Designer and Web Developer to cultivate the Red Cedar theme, deliver custom, agency level design, and interface with our clients, the MSUCAL faculty & staff.

This project is a prime example of the web work I produced at MSUCAL. It shows my process, creative thinking and how I adapted my design within a theme to best suit the project.

old homepage

New homepage

six communities

old

New

The primary objective of this homepage is to get students to sign up for a career community. The old design was flat, difficult to read and not engaging. I addressed this by redefining the visual identities of the six communities. This was accomplished through a more vibrant distinguishable color scheme, bolder text styling, and consistent line breaks.

I worked with our web developer to revamp the primary call to action (CTA), the Career Communities Newsletter. The old design got lost between the sections, it did not call to the user in anyway. We reconfigured it to be more robust and engaging, as well as adding a drop down form function.

Communities Newsletter

Old

New

Process

I did all of my prototyping inside of Adobe XD. I began by tackling individual block(section) stylings and then working my way up to full pages. After this step I transitioned into Elementor where I refined the design through a process of revisions with the Senior Graphic Designer.

Most of the work for this project was developing a better design for the interior pages for the six career communities. I aimed to address this by tackling four main objectives:

The old site had two individual pages for each career community, this was not intuitive. These pages lacked distinction due to the reuse of sections. By applying the color of each community to the careers section & the community newsletter CTA we created a cohesive and repeatable design system that made each page different and memorable.

Here we see the idea evolve through the process, beginning by combining the two pages, prototyping the page in XD, and the resulting final product in Wordpress.

Career
COmmunities

idea development

  1. Distinct visual styles
  2. Readability
  3. Spacing
  4. Reduce redundancy

Old Pages

Scroll

(Click to enlarge)

Conclusion

I enjoyed working on this project;  it gave me an opportunity to work on a design system within a web application. This project also taught me about the importance of the Ui/web process, and how to build off of previous designs and gain creative momentum.

Thanks for stopping by!