SIUE.edu Redesign

Design Research

My research phase was divided into three parts, during which I also developed the university’s digital style guide and design system.
First, I researched SIUE’s existing site design and branding guidelines to understand their established do’s and don’ts. I also analyzed current marketing campaigns to ensure the block system could seamlessly adapt to their initiatives while maintaining a cohesive brand identity. The primary challenge here was working with elements that were limited and less flexible and trying to relate to them while also being visually neutral.
Second, I developed a digital color palette. SIUE’s signature color was essential to its branding, and supplementary colors had to avoid associations with other schools. Collaborating with the branding manager, we established a secondary color to complement the primary shade and serve as the foundation for site gradients. I also reviewed existing digital colors across the site and other materials, finalizing a palette to reinforce information hierarchy and align with the department’s broader design assets.
Third, I researched current design trends, focusing on those with longevity. While early 2000s-inspired aesthetics were resurging, many were fleeting. Instead, I prioritized composition and interaction design trends, which could elevate the user experience even within a simple layout. Below, you’ll find mood boards capturing my inspiration during this research phase.

Illustrator Exploration & Stakeholder Review

The project had an extremely fast turnaround, so I started working in Adobe Illustrator to streamline the process. With a library of assets from previous digital projects, I could quickly iterate on designs and minimize production time.
I began by blocking out wireframe elements with campaign and styled components to experiment with. Through stakeholder meetings, we compared designs and selected block and UI variations that worked best visually and functionally. I took notes during discussions and refined concepts accordingly, repeating the process until we narrowed everything down to a unified design with well-defined block variations.
In the final phases, budget constraints forced us to put some ideas, like the footer, on hold. To preserve these concepts for future development, we created a ‘parking lot’ for ideas to revisit as budgets allowed.
A key takeaway from stakeholder feedback was the enthusiasm for adopting a more modern, story-driven design. However, due to the slow-moving nature of departmental bureaucracy and funding, we couldn’t stray too far from the existing template. Although we were introducing a new template system, converting over 5,000 pages of content would be extremely time-consuming. Not every page would transition to the new template, so the design needed to maintain enough visual continuity with the existing system to ensure users still felt like they were navigating the SIUE website.

Develop Breakpoint Variations & WCAG Compliance in XD

With the fundamental designs established, I moved on to prototyping. The team initially wanted to stay within the Adobe ecosystem since the university already subscribed to its products. As a result, I transitioned from Illustrator to Adobe XD to develop the block components.
In XD, I created variations of all blocks, defined feature lists and rulesets, and mapped out responsive breakpoints. To maintain structural consistency across desktop breakpoints, we used a scaling ratio that adjusted font sizes based on a percentage of the base rem size. Image containers were also dynamically cropped to preserve framing at different window sizes. For mobile breakpoints, the design became more condensed for easier navigation. Supplemental images and other non-essential elements were removed at this size to prevent unnecessary page length and improve usability.
Throughout the design process, maintaining AA WCAG compliance was a priority. Key considerations included contrast ratios, screen reader integration, keyboard support, and consistent navigation patterns. Since this new template would work alongside existing, compliant templates—such as forms and error handling—we ensured that accessibility remained a core focus.

Develop Interactive Prototypes & Animations in XD

With the template built, I began prototyping interactive elements, including rollovers, navigation, and animations. I aimed to incorporate eye-catching interactions that would enhance the university’s visual appeal. This included animated headers and a parallax effect within content blocks. The header was designed to collapse on scroll, condensing the navigation for a more streamlined experience. To further enhance visual engagement, I developed a gradient effect that shifts horizontally as the user scrolls down the page.
Initially, I considered using After Effects to demonstrate these animations. However, Adobe XD proved to be a powerful tool, allowing me to showcase animations directly within the prototype. This made it easier for developers to see how the animations functioned in response to user actions.
XD also played a key role in user testing with stakeholders. The interactive prototype allowed them to experience the design firsthand, helping us assess which interactions were valuable and which might be unnecessary. We facilitated stakeholder reviews using Ziflow, our existing proofing system, allowing feedback to be gathered without requiring additional training on a new platform.
Key stakeholder feedback incorporated before development included:
Simplified rollover animations for a cleaner user experience.
Sub-navigation dots for slider navigation, improving usability.
Dropdown navigation indicators for better clarity.

Meet with Developers & Provide Documentation

To ensure clear and thorough communication with the developers, I compiled all completed work and organized the final proofs in our Ziflow proofing system. This included:
Annotated wireframes detailing the features and functionality of each block for both desktop and mobile.
Breakpoint demonstrations to illustrate responsive design adjustments.
Navigation and interaction prototypes showcasing user experience flows.
Header animations to demonstrate visual effects.
Links to live sites with similar features we aimed to incorporate, such as parallax scrolling methods.
A detailed outline explaining each proof component, how to utilize the demos, their intended goals, and the expected functionality in the new template.

The director and I then met virtually with the developer, where I walked them through each element and outlined our requirements. During this meeting, I addressed their questions regarding the assets and clarified any uncertainties from my end. Following this, the developer proceeded to build the first version of the design, which we would review and test in the next phase.

Design Review & Bug Testing

During this phase, the developer hosted the new template with placeholder content on their system. I reviewed the designs, compared them against the documentation, and tested the template on a variety of devices to identify bugs. Any issues found were submitted via Wrike for revisions.
Additionally, we had to negotiate certain design elements and features with the developer. For example, the original header design exceeded their capability to maintain a lightweight structure, so I created a revised header animation as a compromise. This process lasted about a month, during which we also evaluated whether any features fell outside our budget. The new footer design, for instance, was ultimately postponed and added to our “parking lot” for future implementation.
To ensure accessibility, I tested the design on both modern and older devices, including browsers and mobile devices that were up to a decade old. While most bugs were resolved, we discovered that an iOS device that ceased support in 2019 could not properly display certain elements in Safari. After analyzing our user data, we determined that the affected audience was too small to justify allocating resources for a fix.
One of the biggest challenges we faced was the loss of information over time between the initial proof meeting and the first development implementation. Some notes may have been overlooked, and certain details were forgotten. To mitigate this in future projects with external developers, a mid-phase review meeting should be scheduled to ensure all features are still understood before the testing phase.
Another challenge was that some requested components were implemented using off-the-shelf APIs, which did not always support the specific features we had designed. This led to a decision point: whether to allocate developer hours to customize the API or adjust our expectations to align with its limitations.

Transition from XD to Figma & Design System Creation

During my research on streamlining our process, I discovered that Adobe XD was being placed into Maintenance Mode and was reaching the end of its lifecycle. With this news, I successfully convinced the team to transition to Figma. While this required additional work on my part to develop the design system and rebuild templates, I saw it as a worthwhile long-term investment.
To speed up the transition, I leveraged SVG assets and Figma’s advanced copy-and-paste features, allowing me to efficiently transfer the system. I also onboarded the team with minimal training, enabling seamless online collaboration.
With the new system in place, I collaborated with our information architect to translate existing sites into the new design. As we reviewed content, we identified additional ways to utilize design blocks and expand the site’s design language. Using Figma, we then met with department stakeholders to gather feedback on the designs. This required balancing client requests with our commitment to design and accessibility standards.
A key insight gained during this phase was identifying potential block feature expansions. One feature I proposed was the ability to combine blocks to create the appearance of a single, unified block, enhancing design flexibility. Reflecting on the process, I realized that having access to fully developed content at the start of the project—rather than relying on lorem ipsum—could have helped uncover these feature needs earlier.

User Acceptance Testing (UAT) & Future Rollouts

The final phase before rollout was User Acceptance Testing (UAT), where the implemented code was deployed onto our live servers. At this stage, we gained access to the back-end interface and could begin building pages. This phase was critical for ensuring the transition from design to development was executed correctly and for identifying any new bugs that arose post-launch.
We began with a meeting with the developer to address questions and receive a briefing on the tools available to us. This session allowed us to clarify how certain design elements should be implemented and to identify any features that were missing or misunderstood in previous phases.
During testing, we discovered that the developer had misunderstood the intended usage of certain blocks. Instead of being optional, some blocks were set as mandatory components on every page. This issue was only visible once we had full access to the system, as the previous mock-ups had been built by the developer. As a workaround, we had to find a way to deactivate certain blocks for pages where they weren’t necessary.
Our Media Systems Specialist joined me in the bug testing process. While I focused on design and UX-related issues, they handled structural and functional bugs within the site’s framework. Meanwhile, our director managed ongoing negotiations regarding funding and budget constraints, which also introduced some challenges during this phase.
Ultimately, we were able to shape the site into something close to our original vision, though some compromises had to be made, and additional features were placed in the “parking lot” for future development. One of my biggest takeaways from this phase was the experience of working with an external developer. In my previous game development projects, developers were part of the internal team, allowing for more direct communication and fewer budget limitations. This experience gave me valuable insight into managing budgets, negotiating scope, and setting realistic expectations when working with external developers in the future.

Final Thoughts

Looking back at this project, I am proud of the success we achieved. I developed a modern, scalable template system that balances flexibility with visual cohesion while maintaining alignment with existing site structures. I successfully transitioned the team from Adobe XD to Figma, improving collaboration and efficiency. Additionally, I ensured AA WCAG compliance, enhancing accessibility and usability for all users. Clear documentation and structured communication with developers helped streamline the process.
All of this was accomplished within a highly compressed timeline while balancing my other responsibilities as a Digital Designer at SIUE. This experience reinforced the importance of adaptability, strong documentation, and user-centered design in delivering successful digital projects.

Challenges & Takeaways
Even with our success, this project came with its share of challenges and setbacks. Budget constraints required us to pivot, placing some features in a “parking lot” for future implementation. Additionally, some design elements were misunderstood or lost in translation, leading to unexpected workarounds. This experience highlighted the need for a mid-phase check-in with external teams to improve alignment and reduce miscommunication.
During testing, we discovered that some older iOS devices (unsupported since 2019) had significant display issues. By analyzing user data, we made informed decisions on which browsers and devices to support, balancing accessibility with practicality.
Another key takeaway was the importance of working with real content earlier in the process. Doing so would have helped refine block functionality, so this step will be prioritized in future projects. Additionally, finding the balance between client requests and UX best practices is crucial to delivering a strong final product. While client needs will vary across departments, we will implement stronger guidelines that align with the university’s brand and WCAG legal requirements to reinforce non-negotiable design and accessibility standards.
Finally, the parking lot system proved invaluable, ensuring that strong ideas aren’t lost and allowing for iterative improvements as budgets allow. Despite these challenges, we successfully adapted, found solutions, and refined our approach. Most importantly, these experiences provided valuable lessons, strengthening our strategies for future projects.

Closing:
This project reinforced the importance of collaboration, adaptability, and accessibility in digital design. It also provided valuable experience in working with external developers, managing budgets, and advocating for strong UX/UI practices while meeting organizational constraints. Moving forward, I will take these insights into future projects, ensuring that design processes remain efficient, scalable, and user-focused. You can view my design system and style guide here or continue browsing my UX projects at the link below.