auburn university
background
During my time working for the College of Engineering as a Web Assistant, I orchestrated a major redesign for the department websites. The redesign brings each department’s pages into the modern age and includes an organized site architecture and navigation to improve user experience. The department websites are visited by tens of thousands of users a month, so it was important to provide a great user experience and a captivating, modern design.
what was wrong
The current design was outdated and was lacking features compared to other university websites. The site was also not engaging for multiple reasons. The navigation was confusing and had too many layers - you had to click into multiple links to view certain pages that the user might not even know existed just from viewing the main navigation. Many pages had an information overload, it was not clear at first glance what the most important content was and often important content that was hidden/not easy to access. Since the design of the site was years old, there was also a lot of outdated content that distracted from what was relevant.
accomplishments
I wanted to create a modern and beautiful page to encourage current students to use the page for information and for prospective students to get excited about joining Auburn Engineering. I initiated and worked through the entire design process for the department pages including...
- Identifying problem areas and hard-to-understand features (page navigation, information overload, important content that was hidden/not easy to access, and outdated content)
- Drafting multiple low fidelity and high fidelity wireframes using Figma
- Attending design meetings to refine the vision for the pages
- Pitching my designs to those involved with the college’s marketing goals, such as the dean of engineering, department heads, and marketing heads
- Producing the website pages by writing HTML, CSS, XML, and JavaScript code
- Implementing the new design into the overall existing site architecture
- Making sure all pages are accessible to all users and translate to mobile screens
- Working with many different departments to ensure that their content and marketing goals were expressed correctly through the new design
results
The new website is a beautiful representation of Auburn Engineering’s achievements and how it serves students. It brings Auburn Engineering into the modern age and it reflects their innovative stance in the industry. Since the department sites draw so much traffic (tens of thousands of users a month) I made sure that it is responsive to accommodate all users and screens. Along with a refreshed facade, all of the departments had the chance to look over their old content and update it to best reflect their current research and department initiatives.
View my design in action here!
challenges and lessons learned
Something I learned was working within the constraints of Auburn’s marketing and design goals. For example, I wanted to make the fonts more modern and interesting, but changing fonts for the department pages would affect changing fonts around the entire engineering site. I then focused on finding fonts that were a bit more interesting than the default san-serif that Auburn was using, but did not draw attention away from the information.
Another thing I learned was making the pages accessible to the fullest extent due to the large audience and mobile users. Users access the site from a variety of screens, so the website had to be perfectly responsive. This included having different components that were hidden/visible to certain screens and a mobile first design. For example, my original design had hovers in the navigation menu that would expand the menu item to show a longer submenu. While this was working great for the web design, mobile users do not have the option to hover. The design was changed to make sure that the navbar fit for every screen type, and the submenus are accessible with a click and have an indicator icon to prompt the user that there is more information under the main menu options.
I learned a lot during the design and implementation process, especially since this was my first project at this scale. I learned how to collaborate with other creatives and Auburn administration to create a beautiful design that not only looks modern and nice, but also reflects the goals and work of the College of Engineering. This was one of the most extensive projects I have gotten to work on because the department pages are such a central, core element to Auburn Engineering’s site. Many precautions were in place to ensure that the new pages would update smoothly and no links/formatting would be broken.
Another issue that arose was getting content for the new pages - a classic roadblock. I had designs ready to roll out for multiple departments, but it took a lot of time to work with the department heads to update what they wanted to feature on their site. I graduated before all of the department pages were updated to my design, but now all of them have been brought into the modern age!
extra
I was nominated for Student Employee of the Year for my efforts during this project.
Check out https://eng.auburn.edu/csse/ to see a familiar face :-)
original homepage
web homepage
web secondary page
