Project Overview

Background

This small project was for the redesign of a public-facing website and my role was only the visual design and UX for 2 different layouts. I was to provide wireframes and design mockups that would be used to define the site look and feel.

Research & Wireframing

From my initial interviews, there were mixed feelings on the type of layout the homepage should have. We had all the content, but it seems there was already a lot of thought given to the design before I even came into the project. Some stakeholders wanted to have the site open and spacious, while others were determined that all content should remain above "the fold" for the smallest laptops they had on site. I explained before we can even think about the visual design we need to take a look at what kind of users are coming to the site, what kind of devices they are using, and what kind of information they are primarily looking for.

Early data analysis revealed that substantial amount of the traffic to the current site was from mobile devices, which the current design did not accommodate and the new design most certainly should. User testing also revealed that several users didn't like how long it took to navigate to where they wanted to go. I stressed the importance of these points and that it's not about what someone likes or dislikes about something as subjective as design, it's what works and what doesn't for the userbase. This data was well-received by some, while others still clung to an "above the fold" mentality. Two different layouts were proposed in the wireframing, one with a much smaller and denser feel.

UI Design

After the wireframes were created, I then applied the content of the existing site into two different design mockups in Photoshop. I created an html styleguide for the developer who would be building the site and also provided the necessary user stories to explain how everything should function.

This is the homepage design mockup
Back to Portfolio