C2ST Website

Using the nav menu in the C2ST mobile prototype

As part of Code for Chicago, I am the UX Designer for a new website for the Chicago Council for Science and Technology (C2ST). C2ST came to us with a robust set of Figma wireframes created by a previous designer. However, when I did a heuristic evaluation of the wireframes, I discovered some accessibility concerns and several missing screens and interactions.

(Left) original mobile navigation menu – (Right) my updated version

For example, the original wireframe for the mobile navigation menu did not account for the presence of submenus and didn’t match the rounded look of other modals on the site. As I have been updating the wireframes, I have also been rebuilding recurring elements as modular components so any future changes will propagate to all instances.

Every interaction flow for a single page in the C2ST prototype

This modular approach was especially helpful as I built out interactive desktop and mobile prototypes for the UX Research team to test with users. Rather than specifying the same interactions repeatedly across a dozen wireframes, I specified those interactions on the base component and replaced all the previous instances.