Redesign & Responsive Design for Company Website

The Challenge

The site was dated and had many competing graphics making it hard for users to know what to focus on. The site looked small on larger screens making it very hard to read the small type. We found that the majority of our users were not paying their bills online using the my account feature. A good portion of the content on the homepage was more for internal use.

The Solution

We did some lean UX practices and discovered what tasks our users were struggling with to complete. We worked with key stakeholders and discussed what the main business objectives were for the homepage so we can scale back on the number of competing elements on the homepage. We focused on promoting my account so users can easily find it which turned out to be a huge success. We had a significant increase of new my account users paying their bills online instead of mailing checks or calling in. Please view tabs below to learn more.

I started with a content matrix to take inventory of all the content and note the last time it was updated. We then proceeded to update any pages that haven’t been touched within the past year and revised the content so it was current.

 

Research

Research

An important part of the design of the new site was to focus on the revised content and what our main objectives were for the site. We wanted our users to be able to find their account right away, which we discovered, is one of their main tasks to complete.

 

Homepage Wireframe

Homepage Wireframe

Interior Page Wireframe

Interior Page Wireframe

We made the site responsive so it’s mobile friendly and looks good on tablets. The text and images are also responsive within the page making it easier to read no matter how big or small your desktop is. As the lead designer for this project I had to define the breaking points for the mobile and tablet sized views.

 

Responsive Breaking Points

Responsive Breaking Points

A big key to the success of the development of the new site was to have a robust styleguide so that way when working with other front-end developers they can easily know the interaction styles, color palettes, as well as, the development of new pages or other applications.

 

Styleguide

Styleguide

Styleguide : Color Palette

Styleguide : Color Palette