COMPUTING SCIENCES UNIT
Revamping the unit website to modernize design and update content
Team
Collaborated with a Developer/UX Designer
Role
UX Designer
Visual Designer
Timeline
Oct - Dec 2024
Methods
Heuristic evaluation
Competitor analysis
Tools
Figma
FigJam
Affinity Photo
University's CMS
THE PROBLEM
What is the Computing Sciences unit?
Tampere University (TAU), a multidisciplinary university and the second largest in Finland by student enrollment, was formed in 2019 through the merger of the University of Tampere and Tampere University of Technology.
Organized into seven faculties, TAU includes the Computing Sciences (CS) Unit under the Faculty of Information Technology and Communication Sciences, which plays a crucial role in education and research in IT-related fields.
Who are the stakeholders?
The primary stakeholder for this project was the unit’s steering group, a team composed mainly of university professors and lecturers, with some representing a research theme and others overseeing areas such as Laboratories and Infrastructure or Degree Programmes.
Stakeholders were looking for…
A facelift to the unit's website to better reflect its identity. Since it had been a long time since the last update, we were tasked with refreshing the textual content, improving the visuals, and modernizing the overall design.
DISCOVERY
We first conducted a heuristic evaluation
To identify usability issues on the current website. Key issues included:
Then, we analyzed the competition
To benchmark against similar academic units. We analyzed 6 departments and schools across 5 universities: Aalto University, MIT, Lund University, University of Oslo, and the The University of British Columbia.
Key findings revealed common characteristics among these institutions:
Comprehensive Structure: All had a homepage and dedicated pages for Studies, Research, and People. While the specific wording of these pages varied, the overall site structure was consistent. Some also included sections like About, Collaboration, and Research Infrastructure.
Hero Section with CTAs: All had a hero section featuring clear CTAs directing users to key areas of the website.
Engaging Marketing Content: Some had highlighted research achievements, some showcased reasons for students to choose their department or school, and some others shared compelling stories from students and alumni about their experiences, motivations, and career paths.
Modern Design: All featured a visually appealing, modern look and feel that enhanced user engagement.
Additionally, we had to work with some constraints
Technical Limitations
The University's Content Management System (CMS) presented challenges in adjusting visual elements.
Stakeholder Considerations
The stakeholders emphasized minimizing content that would require regular updates which influenced our design approach to ensure ease of maintenance.
Media Constraints
University's guidelines prevented us from using external images, and we also struggled to find suitable visuals from the media bank.
So we decided to explore other units within TUNI as well
To better understand the capabilities of the university's Content Management System (CMS), we examined how other units within TUNI structured their websites. Notably, the Architecture unit stood out for its cohesive design, achieved by placing images at the top of each page. These images functioned as hero elements and created a visually unified and engaging look.
IDEATION
With all this in mind, we started designing
Based on our initial research and analysis, we designed a high-fidelity version of the website to present to the stakeholders and gain their confirmation to proceed with the proposed ideas.
As our ideas were well-received by them, we moved forward with them.
One key question remained:
What makes this unit unique?
In collaboration with stakeholders, we explored the unit's identity and values. The slogan "Supermarket of IT" was coined to highlight the wide range of expertise and opportunities available.
The unit encompasses 7 interrelated research themes, spanning from Mathematics and Data Science to Computer Engineering and Human-Technology Interaction. The stakeholders wanted us to ensure this breadth was conveyed in the illustration.
VISUALS
Bringing the unit’s identity to life
From this step forward, I took the lead in designing the visuals for the website, focusing on creating a cohesive aesthetic that also aligned with Tampere University's identity.
Color palette
I selected a blend of Tampere University's signature purple with shades of blue to evoke a modern, technology-oriented vibe while maintaining visual consistency with the university's branding.
Style
To capture the breadth of the unit, I incorporated collage-like art which allowed me to combine diverse images and elements. These visuals represented key areas of the unit, such as research and education, as well as its multidisciplinary research themes, such as Computer Engineering, Data Science, and Network and Information Security, etc.
OTHER IMPROVEMENTS
Other key enhancements delivered
Text revision
To enhance the text on the website, we provided stakeholders with a collaborative document where they could edit or add content for different sections. We drafted the initial text and invited feedback, which stakeholders refined further. This process ensured that the text was accurate, up-to-date, concise, and aligned with TUNI’s guidelines.
Accessibility improvements
We ensured the website adhered to accessibility standards by:
Checking the color contrast ratios of visuals to make them accessible even for individuals with colorblindness.
Writing descriptive alt text for images that convey meaningful content to improve usability for screen readers while omitting alt text for purely decorative images.
Highlighting the unit's strengths
We created a dedicated section to showcase the unit’s impressive operations, designed to appeal to both students and researchers.
Call-to-Action buttons
To improve user engagement, we added CTA buttons that have a conversational tone and direct users to other pages.
Data organization
We organized data alphabetically to improve navigation; including the table of contents for research themes and the list of permanent staff.
In-page navigation
To simplify navigation, we added in-page links for research themes on the Research page and staff categories on the Our People page.
Due to limitations of the CMS, we were unable to customize the style of the table of contents or implement smooth scrolling from links to corresponding sections.
Additionally, we would have liked to include a "Back to Top" button, but this feature was also restricted by the CMS.
Degree program categorization
Initially, we planned to categorize degree programs into 3 groups: Bachelor's, Master's, and Doctoral degrees. However, during our research, we realized this approach was not suitable, especially for Master’s programs.
The challenge stemmed from the differences between Finnish and international Master’s programs. Although both groups end up studying the same tracks (e.g., Human-Technology Interaction, Embedded Systems, etc.), their requirements, application periods, and relevant links differ.
To provide users with the most accurate and relevant information, we divided the Master’s programs into two categories:
Master's Programmes in Finnish
International Master's Programmes
This solution ensures that users can easily access the information most relevant to their circumstances.
