• Twitter
  • Facebook
  • Google+
  • Instagram
  • Youtube

Saturday, May 28, 2016

Designing a Business Site: the Illada Website Re-design Process

User Interface Design Process for Consulting Business Website

Notebook mockup created by Medialoot.com

These are some screenshots showing the iterative design process for the User Interface of a website designed for Illada LLC, a Fort Collins consulting group.

Goals and Requirements

Specific client requests included:

  • Responsive Design
  • Green + Blue Color Scheme
  • "Submit Your Resume" function
  • Contact Us area
  • Ability to post White Papers
  • More personalized and relevant photos + graphics

I interviewed the stakeholders and reviewed their existing site and content to establish:

a) What does the company excel at? - Program and Project Management, generally IT related and mostly for government clients, but Program Management really seemed to be the STAR of their service offerings.
b) What makes Illada different? Length of experience/service in their industry; strength of their network and connections and the personalized service they offer; considerable experience and certifications

Content Top Priorities: 

  1. What Illada does + what value they provide 
  2. Socioeconomic statuses and certifications

Design Problems

Based on my research and interviews, I established a few Design Problems that the site redesign needed to address.

  1. The existing site design was not an accurate reflection of their brand.
  2. The most important information was buried within the site's information architecture.
  3. It was initially unclear what services they offered and what industry they served.
  4. The site did not highlight the considerable qualifications of the business owners.
  5. There was no clear call to action.
I also realized that the site needed to serve two main groups of users:
a) Potential clients
b) Potential talent/employees

Competitor Review and Analysis

The client highlighted several existing websites that had elements they liked, noting well-organized services list, layouts that were concise and to-the-point, and clean design with lots of white space as especially important considerations.

User Interface Sketch and Analysis of Example Site 1
User Interface Sketch and Analysis of Example Site 2
UI Sketch and Analysis of Example Site 3

Establishing the Information Architecture


Mind-mapping is often the first step of my design process. It helps to take all of the vague notions and ideas surrounding a project and get them down on paper so you can review and evaluate them.

Content Priority Exercise

A simple but very effective exercise using nothing more than post-its cut into strips. I wrote each piece of content that the site needed to provide on a strip of sticky paper, then re-organized those elements until they formed a cascade of prioritized content, from most to least essential. This formed the basis for how I organized the content on the site and was especially useful when deciding how content would display on mobile devices.

Mobile Considerations and Responsive Design

Early Versions of the Home Page Design

Layout Option Mockups for Client Review

Mockups created in PhotoShop.
Layout Option 1

Layout Option 2

Main Page Slider Options

Final Design for the Main Page User Interface


Post a Comment


Get in touch with me


Fort Collins, Colorado

Phone number