PROJECT OVERVIEW
PROJECT OVERVIEW
PROJECT OVERVIEW
A website redesign project for SIAM UB, Universitas Brawijaya's student portal. The new design focuses on creating a more organized and modern look, enhancing the information structure and visual hierarchy, as well as simplifying the navigation and improving the whole user experience for a more intuitive and efficient platform.
A website redesign project for SIAM UB, Universitas Brawijaya's student portal. The new design focuses on creating a more organized and modern look, enhancing the information structure and visual hierarchy, as well as simplifying the navigation and improving the whole user experience for a more intuitive and efficient platform.
A website redesign project for SIAM UB, Universitas Brawijaya's student portal. The new design focuses on creating a more organized and modern look, enhancing the information structure and visual hierarchy, as well as simplifying the navigation and improving the whole user experience for a more intuitive and efficient platform.
PROBLEMS
PROBLEMS
PROBLEMS
Cramped UI design with a lack of structured layout
Cramped UI design with a lack of structured layout
Cramped UI design with a lack of structured layout
The UI is cluttered with a lot of informations and the placement of sections within the website is quite confusing for users to find relevant information quickly.
The UI is cluttered with a lot of informations and the placement of sections within the website is quite confusing for users to find relevant information quickly.
The UI is cluttered with a lot of informations and the placement of sections within the website is quite confusing for users to find relevant information quickly.
Outdated Visual Design and Inconsistent Color Scheme
Outdated Visual Design and Inconsistent Color Scheme
Outdated Visual Design and Inconsistent Color Scheme
The website's visual appearance is quite outdated and lacking a modern aesthetic. Some icons also appear to have low quality setting. Furthermore, the website uses a variety of colors that appear quite inconsistent.
The website's visual appearance is quite outdated and lacking a modern aesthetic. Some icons also appear to have low quality setting. Furthermore, the website uses a variety of colors that appear quite inconsistent.
The website's visual appearance is quite outdated and lacking a modern aesthetic. Some icons also appear to have low quality setting. Furthermore, the website uses a variety of colors that appear quite inconsistent.
Lack of Clear Visual Hierarchy
Lack of Clear Visual Hierarchy
Lack of Clear Visual Hierarchy
Important elements do not stand out due to the absence of a clear visual hierarchy, causing everything to appear equally prominent.
Important elements do not stand out due to the absence of a clear visual hierarchy, causing everything to appear equally prominent.
Important elements do not stand out due to the absence of a clear visual hierarchy, causing everything to appear equally prominent.
GOALS
GOALS
GOALS
Enhance Navigation
Enhance Navigation
Enhance Navigation
Improve the structure and layout of the website to simplify navigation, making it easier for users to find features intuitively.
Improve the structure and layout of the website to simplify navigation, making it easier for users to find features intuitively.
Improve the structure and layout of the website to simplify navigation, making it easier for users to find features intuitively.
Modernize UI Design
Modernize UI Design
Modernize UI Design
Update the visual design to be more contemporary, aligning with modern web design standards and providing a more appealing look.
Update the visual design to be more contemporary, aligning with modern web design standards and providing a more appealing look.
Update the visual design to be more contemporary, aligning with modern web design standards and providing a more appealing look.
Establish Clear Visual Hierarchy
Establish Clear Visual Hierarchy
Establish Clear Visual Hierarchy
Ensure important elements are prominently displayed, creating a clear visual hierarchy that guides users effectively.
Ensure important elements are prominently displayed, creating a clear visual hierarchy that guides users effectively.
Ensure important elements are prominently displayed, creating a clear visual hierarchy that guides users effectively.
RESEARCH
RESEARCH
RESEARCH
Preparation
Preparation
Preparation
I began by analyzing SIAM UB existing website, navigating through each section to identify specific areas needing improvement. This initial assessment focused on pinpointing navigation inefficiencies, visual clutter, and misplaced content priorities.
I began by analyzing SIAM UB existing website, navigating through each section to identify specific areas needing improvement. This initial assessment focused on pinpointing navigation inefficiencies, visual clutter, and misplaced content priorities.
Next, I gathered design inspirations and created a mood board to guide the visual and functional elements. Once I had a clear vision for the website redesign, I planned the information structure and sketched it onto rough layouts, outlining the new design’s key elements and placements.
Next, I gathered design inspirations and created a mood board to guide the visual and functional elements. Once I had a clear vision for the website redesign, I planned the information structure and sketched it onto rough layouts, outlining the new design’s key elements and placements.
REDESIGN
REDESIGN
REDESIGN
In the initial steps of the redesign process, I began by creating color styles and text styles to ensure consistency across the website. I adhered to SIAM UB's main colors—dark blue and orange—and selected complementary secondary colors to maintain a cohesive look.
For text styles, I chose modern and readable fonts, establishing a hierarchy with different sizes and weights for headings, subheadings, and body text. Following this, I also designed common elements and components, such as the navigation bar, sidebar, and buttons.
In the initial steps of the redesign process, I began by creating color styles and text styles to ensure consistency across the website. I adhered to SIAM UB's main colors—dark blue and orange—and selected complementary secondary colors to maintain a cohesive look.
For text styles, I chose modern and readable fonts, establishing a hierarchy with different sizes and weights for headings, subheadings, and body text. Following this, I also designed common elements and components, such as the navigation bar, sidebar, and buttons.
login page
login page
login page
The Login page has been updated to reflect the new design concept, using SIAM UB’s color scheme of dark blue and orange for a cohesive look.
To enhance the visual appeal and create a stronger connection to the university, I added a picture of Universitas Brawijaya on the side. This image not only makes the page more engaging but also instills a sense of university pride and identity.
The Login page has been updated to reflect the new design concept, using SIAM UB’s color scheme of dark blue and orange for a cohesive look.
To enhance the visual appeal and create a stronger connection to the university, I added a picture of Universitas Brawijaya on the side. This image not only makes the page more engaging but also instills a sense of university pride and identity.
Before
Before
Before
After
After
After
LANDING PAGE
LANDING PAGE
LANDING PAGE
In redesigning the SIAM UB website, I made key changes to the landing page for better usability and visual hierarchy, adding a modern and clean look. The navigation bar was moved from the top to a left sidebar, where it allows for more vertical space, making it easier for users to see all navigation options at a glance without needing to scroll.
In redesigning the SIAM UB website, I made key changes to the landing page for better usability and visual hierarchy, adding a modern and clean look. The navigation bar was moved from the top to a left sidebar, where it allows for more vertical space, making it easier for users to see all navigation options at a glance without needing to scroll.
Similar to the existing website, the landing page continues to focus on the "Akademik" section, which is the most frequently accessed by students. Previously, the sub-menu appeared off to the right, seeming less important, while a large, red "Pengumuman" section dominated the page, making navigation cumbersome and unintentionally becoming the focal point.
Similar to the existing website, the landing page continues to focus on the "Akademik" section, which is the most frequently accessed by students. Previously, the sub-menu appeared off to the right, seeming less important, while a large, red "Pengumuman" section dominated the page, making navigation cumbersome and unintentionally becoming the focal point.
Similar to the existing website, the landing page continues to focus on the "Akademik" section, which is the most frequently accessed by students. Previously, the sub-menu appeared off to the right, seeming less important, while a large, red "Pengumuman" section dominated the page, making navigation cumbersome and unintentionally becoming the focal point.
To improve clarity, I implemented a bento-style design for sub-menus, organizing information into distinct, clickable boxes for easy access. The "Pengumuman" section is now a list on the far right, keeping announcements accessible without distracting from the main academic content. This layout enhances visual hierarchy, guiding users' attention to the most critical information and reducing clutter.
To improve clarity, I implemented a bento-style design for sub-menus, organizing information into distinct, clickable boxes for easy access. The "Pengumuman" section is now a list on the far right, keeping announcements accessible without distracting from the main academic content. This layout enhances visual hierarchy, guiding users' attention to the most critical information and reducing clutter.
Before
Before
Before
After
After
After
biodata page
biodata page
biodata page
The Biodata page, where students access and/or edit their profile and personal informations, was updated to align with the new design while maintaining a similar format to the original. Additionally, I added a "Foto KTM" section within the Biodata page, allowing students to edit their student ID photo directly in this section.
The Biodata page, where students access and/or edit their profile and personal informations, was updated to align with the new design while maintaining a similar format to the original. Additionally, I added a "Foto KTM" section within the Biodata page, allowing students to edit their student ID photo directly in this section.
Before
Before
Before
After
After
After
kartu rencana studi page
kartu rencana studi page
kartu rencana studi page
The Kartu Rencana Studi or Course Selection Sheet page, part of the Akademik section, has been updated to match the new modern design. The redesigned table now features increased white space to improve readability and reduces visual clutter. To achieve this, in the new design, I had removed the “Batal” column by shifting it into a checkbox system, where users would select a course via a checkbox before presenting the "Batalkan Mata Kuliah" option outside of the table which also adds a layer of intentionality to the process.
I also introduced a colored labels for the “Keterangan” column by using light blue and light orange label to provide immediate visual cues that help users quickly distinguish between approved and pending courses.
Furthermore, for additional information, such as the maximum credit hour regulations, is now organized into clickable cards. As for the GPA details, I decided to move it to the front of landing page and are now displayed in a graph format, making it easier for students to track their academic progress at a glance.
The Kartu Rencana Studi or Course Selection Sheet page, part of the Akademik section, has been updated to match the new modern design. The redesigned table now features increased white space to improve readability and reduces visual clutter. To achieve this, in the new design, I had removed the “Batal” column by shifting it into a checkbox system, where users would select a course via a checkbox before presenting the "Batalkan Mata Kuliah" option outside of the table which also adds a layer of intentionality to the process.
I also introduced a colored labels for the “Keterangan” column by using light blue and light orange label to provide immediate visual cues that help users quickly distinguish between approved and pending courses.
Furthermore, for additional information, such as the maximum credit hour regulations, is now organized into clickable cards. As for the GPA details, I decided to move it to the front of landing page and are now displayed in a graph format, making it easier for students to track their academic progress at a glance.
Before
Before
Before
After
After
After
What's your next move?
Drop me a line: arra18qibtiah@gmail.com
© 2024 Arra Qibtiah / All Rights Reserved
What's your next move?
Drop me a line: arra18qibtiah@gmail.com
© 2024 Arra Qibtiah / All Rights Reserved
What's your next move?
Drop me a line: arra18qibtiah@gmail.com
© 2024 Arra Qibtiah / All Rights Reserved
What's your next move?
Drop me a line: arra18qibtiah@gmail.com
© 2024 Arra Qibtiah / All Rights Reserved
What's your next move?
Drop me a line: arra18qibtiah@gmail.com
© 2024 Arra Qibtiah / All Rights Reserved