Redesigning student portal for WSB Merito University

The process of redesigning the user interface of the Extranet portal, as an graduating project in 2024.

DELIVERABLES

UX, UI Concept

Industry

Education

DESIGNER

Patryk Szczesniak

YEAR

2024

Project phases

Empathize

Competetive analysis

Users interview

Moodboard

Define

Project goals

User personas

User Journey Map

Ideate

Web architecture

Design

UI Kit

Visual Design

Test

Usability testing

Gathering feedback

Implement

Project goal

The main goal during this challenge was to provide and show what a WSB Merito University student portal could look like. This topic was chosen because of all the problems I had during the 3 years of being one of the students. After consulting with my supervisor, we both agreed that showing the university authorities what the new user interface could look like by creating an undergraduate thesis on this topic might be a good idea.

Problems

In order to fully understand the problem, I needed to know other students' opinions on the current Extranet portal interface. I conducted surveys and interviews that were focused exclusively on the most important aspects such as navigation, class schedule and the view immediately after logging in.

01 Navigation is too complicated

Navigation - especially on desktop devices - is very complex and overwhelming. Some solutions have been used to help organize bookmarks, such as using different colors, but this is not sufficient for users. Many bookmarks will be visited by the average student at most once during the entire study period, and some not at all.

02 Home page have tons of information

The home page has all the information, just not what the user is looking for. Due to the arrangement of the content there, it is very difficult to focus and find the information that the user needs. The amount of superfluous information that the user does not need at all is enormous, and the grid used is designed in a chaotic way.

03 Portal isn't responsive

Currently, if a website is not fully responsive specifically for mobile devices, users forced to use it will be frustrated and angry. The app conveys key information, but the way it does so is very difficult and unreadable. Due to surveys, over 60% of students are using mostly mobile device.

Solutions

Overall solution is to create a new look for homepage with corrected navigation. There students are spending most of their time, and there is the most problems they are having during using a portal. The survey responses show that more than 95% of respondents say the navigation and homepage could have been designed better.

01 Simplified and categorized navigation

Creating correctly named and organized sections is crucial for a large type of navigation. Each section needs to be properly named, and providing more context for each sub-page will be more readable and easy to scan for users, so they won't have to open each page to figure out what it's for.

02 Fresh look of home page

All the most important information is included on the home page, but the visual content could be better. By creating a consistent grid and giving more white space, we will get a more modern style and it will be easier for users to scan the page and find the information they are looking for. I decided to keep all the sections, but with a new look.

03 Fully responsive on every device

Providing a web application that looks great on any device is now a must for a large educational institution. This shows that they are placing students as high as possible in the importance of user experience. Allthought's users mainly check the portal just before classes start.

User persona & Empathy Map

Providing a user persona and its empathy map helps visualize their needs and pain points during daily tasks on the portal. Key information comes from user interviews and surveys.

User Journey Map

Creating a user journey map helps visualize the process a user goes through when interacting with a product. It enables you to improve the user experience by identifying areas for improvement and enables you to make better strategic decisions based on your understanding of user needs and behavior.

Card sorting

For easier visualization of what categories each content should be in, I used the card sorting method. I listed all the items that were in the previous navigation and divided them according to the category they are closest to.

Style guide

A properly designed style guide helps in the future stages of creating a design system and screens. The most important thing was to create a simple, catchy and accessible style guide to provide a sense of professionalism and attention to detail.

Colors

#FDFDFC

rgb: 252, 252, 253

Lotion

60%

#101828

rgb: 16, 24, 40

Dark Jungle Green

30%

#0089F2

rgb: 0, 137, 242

Azure

10%

Switzer

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P R S T Q U V W X Y Z

1 2 3 4 5 6 7 8 9 0 ! @ # $ % ^ & * ( ) - = + ~ < > ?

Label

Heading 1

Heading 2

Heading 3

Text Large

Text Normal

Text Small

Text size / line height (in px)

30 / 38

24 / 32

20 / 30

18 / 28

16 / 24

14 / 20

UI Kit

In order to maintain consistency during the design process, I created a UI kit to help me with this. I included only the most important elements that will be used repeatedly during design process.

Visual Design

For new users, only posts from the official subble.co.uk account and creators' suggestions will appear on the homepage. You can use the filtering option to exclude sponsored or subscribed posts.

See more of my work

I'm proud of the work I've done in my career, and I'm excited to share it with you. Check out my other projects to see examples of my skills and experience.