Hello SVA Graduate Admissions!
Welcome to the portfolio of Michelle Boisson.

Ivelaw.com homepage mock up

Mock up of Samaritan Services homepage

I came up with a simple information architecture that clearly highlighted the types of visitors Samaritan was catering to: potential new clients, potential new nursing staff, and current nursing staff. The design is a step in a new direction for them as their previous website was dark and cluttered. I used much more white space and a wider frame which gives the site a more updated feel. The added white space also resonates with a clean and sanitary medical practice.

Samaritan Services is well know within the industry, having been present in the community for over 30 years. With such a rich history and vibrant reputation, I insisted that we include quotes from clients that rotate on the homepage. All quotes were then listed in the Media section.

I helped them determine the main call-to-action: a request to hire a nurse. So we put a short contact form on the homepage and in the "About Us," "Services," and "Media" sections. Their previous contact from was long, tedious and complicated.

The Upcoming Events on the homepage helps the site look current, and not neglected. It also reassures potential customers that their nurses are constantly being trained and kept up to date on their practice.

While Samaritan Services was really happy with the design, layout, strategy and overall online experience I created for them, because of internal conflicts they were having at the time, the project was prematurely put on hold and was never resumed.

Mock up of the homepage for thehandonline.com

When Intebrand rebranded in 2008, it was time to redesign the external site. We also needed to update to a table-less CSS design and wanted to incorporate more advanced Flash pieces. The equally creative and strategic branding agency needed something flasher to display its talents.

Large photos of brands in the real world is the focus on the homepage and on the case study pages; a clear, content-heavy structure for most other pages.

Working on a technical web team of three (manager/designer, programmer, and myself), I created all the front-end design and development for the new interbrand.com, launched in September 2008. Aside from the main drop down menu, all the HTML and CSS was hand-written from scratch. The menu was customized from code I found on dynamicdrive.com.

I also edited all the Flash ActionScript 3 once it was handed to us from our freelancer.

Details of rollover for Interbrand home thumbnails

Recently, I added a description that appears on-rollover for the homepage thumbnails. Before this, there was no way for the user to know the difference between the "menu" options. The thumbnails are too small to really know what they represent. So I edited the Flash piece to pull information from the corresponding feature and display the title on-rollover right above. Adding this descriptor gives the user more information about what that button will do or show them. The less that people have to guess what their actions do on a website, the less there is room for mistakes or even frustration.

When we put the site live, it was from our own internal staff that we heard the biggest UI problem with the homepage. They complained that the red box wasn't clickable. It seemed really obvious to them that it would be the button to take you to the full feature. At the time, The full image was clickable but not the red box laid over it. Some, not noticing that the rest of the image was clickable, even complained that there was no way to get to more information on the feature! It was a really good point that we originally didn't consider, but remedied as soon as it was pointed out.

One of the advantages of building a custom CMS is we had a clean slate in figuring out the functionality of the site. It was my first assignment where I had to think about how the site was going to work from an administrative standpoint and on a functional level. What would be the experience of our editors in trying to add a new story or a new case study or editing office information? I crafted the entire back-end CMS by having all things related to one item be inputted on the same page. For example, a case study includes a project name, a client name, description, keywords, images among other things. Everything associated with a case study would be entered on the same "edit" page even though some of those items won't end up on the case study page. Thumbnails, for example, will show up in case study Flash flip through which lives on a separate page. Though I haven't had any formal training in this, organizing the site's functionality in terms of "items" instead of "pages" made more sense to me and our editors and it's been working so far. This was my favorite part of working on Interbrand.com.

Example of a case study page

It's come to our attention recently that the site contained many security flaws in the .NET code. We are now in the planning stages of moving our custom code to a Sitefinity platform and CMS. And one of the challenges will be figuring out how to translate our custom site functionality to this new system. The case studies are proving to be the most difficult as Sifinity would treat each one as a separate webpage whereas we scoped them as sharing one page, pulling different information from ID numbers. The new system will be more SEO friendly, however transferring our database to a Sitefinity database forces me to rethink how the site functions.

The new site (same design) is scheduled to go live in April.

I, along with one of Interbrand's Design Directors, came up with this portal design to incorporate all the new, dynamic content. Working within the Interbrand template, we decided on a 3-column layout to maximize the usage of space and to show-off the abundance of content to explore. The marketing team wanted the main focus to be the interviews with clients, something that is not part of the printed Best Global Brands report. The next item of focus is the report itself and it's supporting content, and the brand rankings table to the left, which acts a quick view to the top stats - the main information people want to know when visiting.

With this page structure, we found a good balance between what Interbrand was trying to push to the visitor and what the visitor would be looking for when they came to the page. The news coverage highlights and the supporting white papers show off Interbrand's leading position in the industry.

In addition to planning the strategy and design, I also hand-coded the front-end design (HTML and CSS).

The new format needed a system that was flexible, easily updated, and allowed for much more content on the homepage. We installed BlogEngine.NET, the open source blogging platform in ASP.NET, to integrate it with the rest of the site which was built in ASP and nested tables in 2001.

On a technical team of two (our programmer and myself), I did all the front-end development, including BlogEngine.NET template manipulation, HTML, CSS, and JavaScript. I also worked with our consultant and C-suite executives to make sure the design was what they envisioned and what our readers will be able to easily navigate and get the most out of.

Our biggest task was merging the new .NET blog with the older ASP, table-design pages of brandchannel, into one seamless and exciting experience for our readers. We affectionately called the combo, Frankenchannel. With our short deadline fast approaching, we ended up using iframes on the ASP pages to display content from the BlogEngine, so that the two technically separate sites would look consistent to the viewer.

Phase 1 was launched in September 2009. The site is still a work in progress with many more phases in the works. We plan to move the whole site to one platform, Sitefinity, and I look forward to better interconnections of the content as a result, and giving our readers more ways to interact with it and one another.

Program Management homepage

I built a subsite that lives within Interbrand's intranet, ourfishbowl.com. Working closely with the Program Management Director, I came up with a information architecture that clearly separated the secions that were part of their work process from the supporting documents, and a templates page that acted a as a quick reference tool and download center.

PM subsite menu structure

Example of a Phase page - Planning

In crafting this subsite from strategy, to architecture, all the way through to design and development, my intention was always for it to have a content management system attached to it. The Program Managers would be able to add and update documents as needed. This added a whole other layer of functionality to keep in mind while designing.

PM subsite document structure for CMS

Templates page - a quick reference for all their documents

The CMS portion has yet to be built.

I designed the html email so that small bits of information could be easily consumed and scanned. Keywords were linked to full stories so that the important phrases were highlighted. And section headers and subheaders organized content logically and visually.

Moving to this format has not only increased the number visits to our sites, but it also reduced turn around time of the newsletter by so much that we are now able to send out these shorter newsletters once a month instead of lengthier quarterly ones.

The newsletter has gone through a recent redesign. Before the design above, I had created a 3-column layout to maximize the amount of content to look at in one space. It was easy to scan through the information, but it was a bit hard to read. In my daily Web crawling I came across Andy Rutledge's blog post, Killing Some Bad Layout Conventions. It helped me understand the exact layout problems I was experiencing with the old newsletter. From that I tried different approach. I simplified it to a 2-column layout making it much easier to read.

First version of the newsletter