Projects

About

Contact

Projects

About

Contact

Metropolia UAS
2022 | WEBSITE | UX/UI DESIGN

Overview

During my studies for a Bachelor’s Degree in Design I participated in an assignment where our goal was to redesign an existing website for new applicants to our degree program. In addition, we updated and managed the social media accounts of the program.

You can check out the site from the link below, note that a new class of students redesign the website every fall, so the link takes you to their redesign.

digimuotoilu.metropolia.fi

Instagram

Client

Metropolia UAS,

Degree Programme in Design

Client

Metropolia UAS,

Degree Programme in Design

Client

Metropolia UAS,

Degree Programme in Design

My role

UX/UI Designer & Developer

My role

UX/UI Designer, Developer

My role

UX/UI Designer & Developer

Tools

Figma

VS Code

Google Forms

Jira

Adobe Illustrator

Tools

Figma

VS Code

Google Forms

Jira

Adobe Illustrator

Tools

Figma

VS Code

Google Forms

Jira

Illustrator

The challenge

New applicants need to go through multiple websites in order to find all the necessary information that they need for applying to the degree program. Our challenge was to redesign the website so that all the necessary information is in one place in a way that also inspires new applicants to apply to the degree programme.

The design process followed a Double Diamond framework. Our work was organised by using a kanban board. Figma was used for ideation, wireframing and prototyping.

Research

User research was conducted through surveys, interviews and comprehensive benchmarking. I addition, user personas, user journeys and an information architecture were laid out.

As a part of our research we benchmarked several applicant websites and other websites in the field of design. This was done in order to notice current trends in web design.

Interviews

Interviews were conducted with visitors from a vocational school who are potential applicants to the program. This allowed us to understand what kind of information they are looking for and how they search information about potential degree programs.

In addition, we interviewed students from each year and two alumni for content displayed on the website.

Survey

A survey was conducted through Google Forms and was directed to students who had applied to the program in the previous year.

Wireframing & prototypes

From the research phase we moved onto creating wireframes from all of the needed screens. After our client had approved them we created a prototype with finalized visual designs.

Written code syntax on a computer screen

Writing the code

After the prototype had received approval we started to write the code utilising Visual Studio Code and GitHub. First we wrote the HTML and CSS and then added functionalities with Javascript.

Javascript was used in the navigation bar, a day counter and an accordion.

Key insights

The survey helped us to understand how the website has been used during the application process and what students felt missing from the site.

We came to the conclusion that the website should have information about things like the application process, old entrance examinations, general information about studying in the program and interviews from the alumni.

Through benchmarking we ended up on a fresh and an appealing color palette and a design with accessible and informative content.

The survey helped us to understand how the website has been used during the application process and what students felt missing from the site.

We came to the conclusion that the website should have information about things like the application process, old entrance examinations, general information about studying in the program and interviews from the alumni.

Through benchmarking we ended up on a fresh and an appealing color palette and a design with accessible and informative content.

Final designs

In the redesign we wanted to keep the colors fresh and light as according to our benchmarking and client’s wishes. The current trends include rounded corners, wisely applied negative space and some broken lines. Selected typefaces were chosen according to best practices so that they remain readable and there are only one Sans-Serif and one Serif typeface.

The redesign aims to provide good usability but also good accessibility. The contrasts on the page fill the WCAG AAA-classification. Typography is clear and of appropriate size. Too long paragraphs have been avoided with clear organization in the content.

Interactive elements have different states such as hover and focus and the links and buttons state their destinations. Elements are designed so that they are familiar to users. The code itself follows best practices and semantic syntax. In addition the website is optimized for mobile devices.

Takeaways

During this project I learned more about front-end development, working in a design team, project management with Jira’s software and communication with a client. Overall, this was a very educating and fun project that taught me a lot and prepared me for future endeavors in web design.

'' The best looking applicant site so far! ''

'' Gorgeous logo and the design looks trendy and fresh! ''

Previous project

Next project

Overview

Overview

Client

Client

Client

My role

My role

Tools

Tools

The challenge

The challenge

The design process followed a Double Diamond framework. Our work was organised by using a kanban board. Figma was used for ideation, wireframing and prototyping.

The design process followed a Double Diamond framework. Our work was organised by using a kanban board. Figma was used for ideation, wireframing and prototyping.

Research

Interviews

Survey

A survey was conducted through Google Forms and was directed to students who had applied to the program in the previous year.

Wireframing & prototypes

From the research phase we moved onto creating wireframes from all of the needed screens. After our client had approved them we created a prototype with finalized visual designs.

Writing the code

After the prototype had received approval we started to write the code utilising Visual Studio Code and GitHub. First we wrote the HTML and CSS and then added functionalities with Javascript.Javascript was used in the navigation bar, a day counter and an accordion.

Key insights

Key insights

Final designs

Final designs

Takeaways

Takeaways

After the prototype had received approval we started to write the code utilising Visual Studio Code and GitHub. First we wrote the HTML and CSS and then added functionalities with Javascript.

Javascript was used in the navigation bar, a day counter and an accordion.