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:
- What Illada does + what value they provide
- Socioeconomic statuses and certifications
Based on my research and interviews, I established a few Design Problems that the site redesign needed to address.
- The existing site design was not an accurate reflection of their brand.
- The most important information was buried within the site's information architecture.
- It was initially unclear what services they offered and what industry they served.
- The site did not highlight the considerable qualifications of the business owners.
- 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 ExerciseA 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|