This is a Website redesign I worked on for Delaware Law Widener University. I worked on this project as part of a team at Greatest Creative Factor. I was involved in almost every step and aspect of the process. We started with sketches, wireframes, and client meetings, went onto campus with the photographer to art-direct the photos featured on the site, edited a handful of looping video clips for the homepage, turned the wireframes into Photoshop flats, and worked with the developers to get the functionality that the school was looking for. I also designed the various breakpoints and how the content re-flows at various screen sizes. Right before the site went live, I combed through it one last time for style consistently and to find any last minute bug. Lastly, I developed a style guide that the school can refer to as they continue to update the site.
This project wouldn't be anywhere near the level it is without the help from:
This project was done in conjunction with the Widener Law Harrisburg website. These are two sister law schools with the same parent university. Part of our challenge was to give each school their own voice while remaining in the Widener University brand. We tried to reuse as much of the code and structure as possible across both sites to reduce costs. If you haven't seen that project, I recommend checking it out as well. View the project here.
A quick tour of some interaction from the site.
Drop down menu.
The home page. This page opens with a background video, it features upcoming news & events, the key signature programs of the school and closes with some insight from students, professors, and alumni of the school.
A highlight page. The Delaware Way.
Interior landing page. These generally open with a large banner image and end with a quote and box of useful information.
Interior page with tables.
We reflowed and, in some cases, trimmed the content that shows up on a tablet and mobile screen. You can see a sampling of pages below to compare how the content reshapes for a smaller screen sizes.
The four main responsive breakpoints: extra-wide, regular, tablet, & mobile.
Mobile tour of the site. This video highlights a handful of pages on the site showing how content and interaction have been reflowed and refined for a better mobile experience. It includes: the home page, mobile navigation, faculty directory, faculty biography, search feature, and an interior landing page.
Process & Extras
Before I spend time mocking up the site in Photoshop, I would do some quick pixel sketches. This allowed me to power out a ton of ideas very quickly before I worked with any digital files. After sketches, I made wireframes for several pages to work out the colors and layout across various templates.
Tablet sized home page sketch.
Mobile sized homepage sketch.
Sketch for how I envisioned the menu working on mobile.
Several wireframes showing the layout of the various pages.
Because the site is built on a CMS, the schools have the ability to update, edit, and add new content and pages to the site. I designed and wrote a style guide to help them keep the site looking just as good as the day it launched.
Three pages from the Styleguide.
I hope you enjoyed looking through the process we went through to make this site possible. Make sure to visit the live site as well. There are plenty of surprises left to find that we didn’t share here. Also, if you haven't already seen the work we did for Widener University Harrisburg Law, you should check it out too. View the project here.