After we launched the new homepage, it was important that we converted the new sections and code into reusable and documented components within our CMS.

I started in Sketch, outlining important measurements and creating the variations, to help myself and my team wireframe more effectively in the future.

For more on my design process, see my homepage project link.

• Alerts – replaces announcement component, allows for small bits of important quickly updating content like Coronavirus updates

• Events Calendar – replaces old calendar, a visually interesting way of displaying upcoming campus events

• By the Numbers - replaces stat cards, and showcases compelling stats and areas of strength

• Call to Action – large buttons ensure action items and paths don’t get lost

• Marketing Banner – a way to integrate “ads” for things like the current campaign or new president announcement

Collaborating with our developer through Zeplin

Later, when I was tasked with documenting all new components, and needed to collaborate with our developer, I also created the University’s first online style and component guide for designer/developer collaboration in Zeplin, which translates and stores interface design in code form for developers.

• Designers can upload to Zeplin directly from the Sketch file, and share in a project folder with developers

• Developers can click on any element in the files to obtain the styling code and measurements, which appear to the right

• I included organized component documentation for the developer, typography, swatches, and more