Case Study 1

Was to organize all the content that the client wanted to have in the website.  They needed a navigation system (IA) that would present their content in a logical and meaningful way for the user.

I used the Double Diamond approach to the design process.

After interviewing the stakeholders and researching their competitors.  I start to analyze all the information provided by stakeholders. This includes marketing details, their own research about the industry and business goals. It was discovered developers and contractors are the main users of the website.

A heuristic evaluation of the existing site revealed several structural flaws, specifically: 1) the site’s current IA made locating information and content difficult and confusing, and 2) the site’s overall visual hierarchy had typographical irregularities and lacked brand logic.

Because of the existing site’s disorganization, I conducted open card sort sessions with stakeholders in order to gain insight into how they perceived the firm viewed their website, looking for patterns I could use to inform a new site IA.

After synthesizing the card sort results, I tree-tested two proposed IA’s with two user groups (new users & supers users) to evaluate their intuitiveness. Both tests consisted of 5 users, and I adjusted the second tree test’s IA to reflect insights gained from the first.

It was difficult to organize all the fields of engineering services the client offered. We finally decided on two main categories: Land Development and Building Development. To best illustrate the tree test results, I crafted a new site map, eliminating and shortening several of the existing primary navigation categories.

Guided by the new site map, I started sketching my ideas on paper before creating digital versions of them. Since, the redesign is mobile-first, I first worked on the mobile version of the site. Bootstrap was used as the framework.

Below is the final design of the homepage, desktop and mobile. The website contains 20 pages. If you would like to the visit the website, Click Here.

The website navigation is now laid out in a more logical manner, users are now able to easily navigate the site and findability increased by 80%. Since the website has a responsive design, users can use their mobile devises to view the website. The client is pleased with the redesign.

“Mark led us through the process of this project making a quality website for us.”
- Dave Biddle

I really enjoyed the design process of this case study. Also, thinking outside the box can lead to great ideas.