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.
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.
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
Dated Visual Design
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
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.
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