Website Redesign and Development

Analysis
Design
Development

The beginning

Need for redesign

The client wanted to expand his existing web presence. He was not happy with only one page among many on his agency website. My challenge was to create a web presence that would be intuitive, fun, and a showcase of his talents and personality.

Social and content metrics

With no access to the site's web analytics data, I started by looking into social and content metrics of his present web presence using tools like Serpstat.

Traffic sources and search keywords provided insight into the kind of information visitors were looking for and helped to identify the website's content gaps.

Mobile reports showed that more than half of viewers were viewing the site using a mobile device. Being that the site was not responsive and did not render correctly on small screens, this was a significant usability problem.

Usability Testing

I recruited representative users to test the existing website in-person. Users were given specific tasks and questions.

Top insights:

  • The site contained too much text and was overwhelming to look at
  • It wasn't clear how to contact the client

Low-Fidelity Sitemap and Wireframes

I created a sitemap and low-fidelity wireframes using Balsamiq. This was a quick and effective way to map out the new website's structure and page layout.

Initial Mockup.

I created a mockup of the homepage and tested it with recruited users. I showed users my design and asked them: "How does this page make you feel? Please list your top three emotions."

The majority of responses were positive. However, there were some negative responses such as "overwhelmed".

Based on these results, I modified the design by reducing the amount of color, increasing white space, and improving the text readability.

Prototype

Using InVision I created a prototype using my wireframes. This allowed me to test out user flows and get quick user feedback before development.

I coded the site using HTML5 and CSS3. The site is fully responsive and also based in the open source content management system, Joomla.

The Final Product

The new design is light and responsive, putting the client's talents into perspective and is bound to bring in more business!