Scroll to Top

Website Revamp

I worked as Web Designer on campus for the IT department of the university. This project is a revamp of the department's official website.

Web Design

My Role

I worked directly with the Multimedia Director of the department and gathered requirements like 'important pages', what is required to be highlighted, what kind of audience is being targeted e.t.c. I also created a design library to create an efficient flow of work as building components in Sketch became easier with a library in hand. I also followed the Atomic design system to increase efficiency.

Problems noticed

The website had not been redesigned for quite a number of years and displayed old content and an outdated aestheic view. Following are a list of problems identified.

Too much Clutter

Confusing User Journey

Unstructured IA

Dated Visual Design

Monotonous Structure

Not Responsive

A good first impression

Every website requires that immediate attention grabbing display that helps to have the users remain on the website to view the remainder of the website.

More than that, what I tried to figure out is the most common information that the student's came to the website to view and did not even have to scroll for trivial information.

Following are the elements gathered from feedback through student interview's and by speaking with my manager regarding the most common essential information:

OFFICE HOURS CONTACT DETAILS UPCOMING EVENTS IMPORTANT LINKS

Intial Sketches

It was important to have all the important elements placed in the first view on the screen but at the same time also not overwhelm the user with too much information at once. Structuring of the data helped in organizing the data across the screen. A few initial drawings got me to the desired sketch

Low Fidelity Screen

Once the initial sketches were consifirmed, I created a Low-fid mockup to be presented to the director and explain to her what the structure would look like.

This mockup was also used to get usability feedback from the students I interacted with. After a couple of iterations, I landed on the following.

Design Guidelines

Using Sketch, I created a symbols for the colors and typography that would be used through out the website. This definitely helped me to speed up the process of designing all the high fidelity screens.

High Fidelity Screen

After receiving feedback from the students and the management, I iterated the design and started working on a color theme for the UI.

Following is the initial screen in high fidelity