OFFICIAL IUGA WEBSITE REDESIGN
Background
IUGA (Informatics Undergraduate Association) is the “student-led RSO that communicates between the Informatics student body, faculty, and administration of the University of Washington Information School”. I was recruited to become a part of the IUGA website committee in hopes of redesigning their old website. The overarching goal of this project was to provide Informatics students with a website that better suited their needs. Our target audience was iSchool undergrads, incoming Informatics students, as well as prospective Informatics students. I worked with three full-stack developers and an illustrator who created all of the illustrations for our site.
Problem SatEment
The old website was very outdated and the style was not cohesive with what IUGA branding hoped to be. Features like the old calendar had a very confusing UI, and contained a lack of functionality. No events were posted on the calendar due to the difficulty of it’s usage. Other pages contained too much text, and a lack of clarity for the users. Above is a link to the past website, which has been left for reference purposes. Below are a few screenshots of the old site.
Role: UX Designer, Front-End Developer
Duration: January 2024 - June 2024
Tools Utilized: Figma, React
Application Type: Web
Interviews
I interviewed 14 students with varying demographics.
Key Insights:
Individuals reported that they were not very involved within the iSchool.
They didn’t really understanding what ‘IUGA’ is.
They mentioned a desire for a clear way to access and gain information about upcoming events.
It was communicated that the old calendar was not visually exciting or interesting to engage with.
There was too much content on the elections page and users reported a feeling of ‘information overload’.
The cards containing information about officers on the home page did not fit on the entire screen when displayed.
The past officers tab contained fragments of missing data in the timeline.
Research
Surveys
I collected 62 survey responses. For survey questions we were focused on:
The purposes that individuals visit the IUGA website for.
Information that they did not find while visiting.
Suggestions for features.
Key Insights:
A lot of our target audience rarely visit the IUGA website.
While visiting the site they were unable to find academic and career resources, communities within the iSchool.
The calendar was not up to date and contained no previous events (not regularly updated).
To begin the ideation process, I drew out sketches and basic wireframes. I also planned out a sitemap to understand the structure of our website to gage what information would go where.
Brainstorming:
To brainstorm ideas I started out by creating some mood boards. We all agreed that we were looking for a site that was ‘professional’ yet ‘playful’.
Sketches
Sitemap
Ideation
Sketches/Sitemap:
Mood Board
User Pain Points Addressed:
Design
Low-Fidelity Prototype:
Some key pages in the low fidelity design were Home, Events, Resources, About and Contact Us.
Initial Ideas:
Home
Events
Resources
Contact Us
About
Establishing IUGA BRanding:
I had a hard time deciding on the colors and fonts since I was developing entirely new branding. Something that helped me develop the design of the website was working with our illustrator. Her illustrations had a lot of character, and implementing these into the website allowed me to build the colors and fonts around the illustrations, bringing the website to life.
I drew inspiration from the styles seen to the right. A few pops of color, white as the background, and a bold black font for the headings.
Changes Implemented
Events
Resources
High-Fidelity Prototype:
The high-fidelity prototype featured a clean white background, pops of color, fun illustrations and clear headings and subsections. Organization and clarity of information architecture was something that I really focused on in this design.
About
Calendar Card v2
Home
Through 4 user interviews, I discovered that the best way to display the card in the calendar was to the right of the calendar. Users agreed that having the card on the same page allowed them to click through different events without having to navigate back to the calendar page. Navigating to a new page was confusing and didn’t allow users to look at other events seen throughout the calendar. I therefore returned to the original version of the card component and kept it on the same page as the calendar.
Users also mentioned the need for an elections page. I developed this page with the IUGA IT committee.
Usability Testing:
Final Design
Design System:
Final Screens:
The new design contains all of the content that was missing from the old site. There is a visually appealing landing page, with lots of illustrations and color. The calendar also has the new colors implemented, with a clean and sophisticated look. Each page is consistent with the rest of the site, playing into the overall theme and goal for the new IUGA website.
Development
To further my understanding of the feasibility of design and the development process, I was also a part of the front-end development for the website. I contributed to the about page and the resources page. We created a React Application, adhering to good code quality, and dynamically displaying the data on the page, reusing variables whenever possible, and creating appropriate components. I was much more involved in the UX design process as seen by this case study, but I still think that my development contributions helped me gain more experience and grew my skillset as a designer.
Currently there is a Google Analytics page setup in order to monitor the success of the new website. So far I have seen a 50% increase in user engagement time. I am continuing to track the impact of this project throughout the current 2024-2025 school year. I also conducted a survey at the end of January 2025, and I saw a 95% satisfaction rate with the website’s new features and it’s ability to serve Informatics students.
Conclusion
At the end of spring quarter 2024, the new site was presented to IUGA committee members, and they were all thrilled with the results. In the 2024-2025 school year I have taken on a position as an IUGA IT Committee member and continue to help update the website.
This design project required complete rebranding for the current IUGA club. This was very difficult since starting with a blank slate was quite the challenge. It took a lot of iterations and testing to arrive at the website that is now published. I think that having an illustrator on our team and developing characters to live on the website really helped with branding and understanding who IUGA is and what they want to be known for. This project tested my limits, and put my creativity to the test. Overall I think the new website turned out great, and am proud of the work my team and I put into this site.
