👩🏻💻 Redesigning the University of Waterloo’s Computer Science Club Website
ROLE : Lead UX designer
TIMELINE : Feb - Aug 2021
TEAM: 4 designers & 9 developers
TOOLS : Figma
⚠️ Blast from the past 🚀 this case study is quite outdated! New great things to come 😁
To complement recent re-branding, our team of designers and developers were tasked to ideate and implement a brand new, optimized website for the University of Waterloo’s (UW) Computer Science Club (CSC).
The old site being reminiscent of a "bare bone website made in 1498, appealing to the basement dwelling CS student aesthetic" (transcribed words of actual CSC members), it was understood that a revamp was well overdue.
IMPACT: The website’s redesign serves as a means of connecting past, current, and future CSC members. The platform is actively used by 2000+ students and continues to help foster the University of Waterloo’s Computer Science community.
HIGHLIGHTS: Responsive web design, primary and secondary research, low to high fidelity prototyping, information architecture revision, design systems
🦎 The Process
Cross collaboration across all of CSC was essential at each stage of the process. As the project advanced, the need for designer/developer communication became vital in creating meaningful progression.
GOAL: To migrate old website content to a newly structured, revamped, environment.
⛰ Challenges
Having complete freedom to start from scratch; where do we start?
Choosiness of content migration; what should stay and what should go?
Understanding the problem space; what can be improved?
Cross team collaboration; how should we go about decision making?
💪 Goals
Utilize primary and secondary research as a basis for decision making
Find the middle grounds between functionality and aesthetic
Engage in continual communication and feedback sessions
🔎 Research
Having the ultimate freedom to start from scratch, our research phase consisted of soliciting a wide range of insight from UW students and relevant UW groups/clubs. Research provided meaningful grounds for decision making and ideation. Seen below are key research takeaways in terms of design and navigation.
Primary Research
To seek insight on user behaviour and needs, our team surveyed 55 UW students, including both undergraduates and alumni. Considering the scope of the project, surveyees mainly consisted of CS/Math students and CSC members.
Secondary Research
Competitor analyses and website audits were conducted on relevant UW groups such as Tech Plus UW, UW Blueprint, and UW Software Engineering Society to gauge insight on commonalities and opportunities.
🔑 Key Research Takeaways (Click to Expand):
🔑 Revised Information Architecture (Click to Expand):
🎨 Designs
The largest challenge faced by the team was the need for responsive designs. Funnily enough, this seemingly simple acknowledgement was overlooked in the earlier stages. Another hurdle faced was the assembly of the design system. Once again, this was overlooked in the earlier stages.
As I am alluding, there was a lack of foresight and planning at the beginning of the process. Luckily, our team was able to adapt and roll with the punches as we learned from our mistakes.
Design System:
The design system was largely built around the newly established CSC branding. We were able to experiment with the simple colour palette, ultimately integrating and reflecting its feel into our design system.
Home Screen:
The home screen designs are straightforward, acting as a quick means of accessing the most sought-after features: social links, upcoming events, and mailing list sign up.
Text-heavy Areas:
As a way of streamlining navigation of text-heavy areas of the website (such as the constitution, code of conduct, and machine usage policy), we utilized sidebar navigation on desktop designs, and hovering hamburger menus on mobile designs. These designs provide efficient means of skimming and navigating through these wordy passages.
Event Screens:
Being a main focus of the website, the events section provides a quick overview of upcoming events, with CTA’s to learn more or register for the specified events. Information on past events are also stored for referential purposes.
🐸 Takeaways
IMPACT: The redesign now serves as a means of connecting past, current, and future CSC members. The website is actively used by 2000+ students and continues to help foster the University of Waterloo’s Computer Science community.
Check out our final product here!
I am incredibly thankful for the time spent with the talented designers and developers on the CSC team. There were so many occasions where I felt the utmost levels of cluelessness, only to be met with the kindest understanding and constructive feedback from the team.
Reflecting on what felt like a lifetime spent on this project, it can be said without a doubt that, as suspected, I don’t know squat! Or put in more optimistic terms, there is so much I don’t know I don’t know (not sure if that was much better)… put again, gosh is there a big wide (kinda scary, but also exciting) world of design and development waiting for me!