UX Process

I want to showcase my UX abilities with some of the projects that I’ve done. I also want to talk about the importance of research and problem solving.

Secondary Navigation

After the site was redesigned in 2015 by an outside design firm, lots of UX issues surfaced, especially with respect to mobile versions. It seems that mobile issues were not considered in the initial design.

One particularly big issue was with secondary navigation. ADI’s site has a header bar at the top with the main navigation tabs. In mobile, this was dealt with by using a “Hamburger Menu”. However, their site has lots of pages with a left side rail with secondary navigation. On mobile devices, this completely dissapeared. There was no way to access the secondary pages.

I started by doing a lot of research into how modern sites were addressing secondary navigation on mobile. I created prototypes with more complex hamburger menus and with drop-down secondary nav buttons, but after people had a chance to try them out, I decided a sliding drawer approach was the best.

Anticipating future needs we made a design that could handle up to three levels of navigation hierarchy. I had to create a working prototype for the Development Team that showed every detail about how the drawer should work. It was really fun programming the prototype and testing all the possible circumstances that could occur. I love that stuff! Note the sticky header in the prototype. I was particularly proud of figuring out how to program that in Axure.

Click the image to the right to see the working prototype and specs I created.

Tested Products

This is a very typical UX problem. The user has to click on the checkmark next to one of the products in order to get to the information they are looking for with this tool. This is very unintuitive. Also, when the cursor is placed over the item tested the checkmark link is covered. (See first image to the right.) A very bad user experience.

After some discussions with the stakeholders in charge of this project, I gave them a chance to play with some initial prototypes. It became clear that along with fixing the checkmark issue, there were other UX issues we needed to address. The stakeholders wanted to change the entire user flow to address future potential changes in the tool and to make it easier for the user to find the product they were looking for and access the test results. The user flow became more complicated. The prototype shows a better UX experience with the new more complicated process.

The first page of the prototype shows the proposed user flow compared to the current process.

Click the image to the right to see the working prototype and specs I created.

Customer Support

Users, particularly from overseas, were complaining that it was difficult to find Customer Support phone information, and many were giving up. When I looked into the current layout, I discovered there was a lot of confusion and cluttered information. The big top boxes were actually buttons but didn’t have affordance that they were clickable. When you clicked on one, search fields and navigation buttons appeared beneath the boxes pushing the bottom navigation down. (See the first image.) The page that had the regional information was also cluttered and confusing.

I did a study of how other sites handle complicated Customer Support information and was dissapointed. I didn’t find any that had a great solution.

I decided to pull all the information into the boxes themselves. This kept the navigation at the bottom consistently located, and also made the information more accessible with one less click. After doing some quick user studies with my new prototype, I also organized the Regional Contact Information page a little better and removed some of the redundant links and information.

Click the image to the right to see the working prototype and specs I created.

News Room

ADI didn’t have a News Room page. There was an About ADI section and an Investor Relations section, but they wanted a portal for news related items. They wanted to showcase important news items, Press Releases and have a place where media agencies could have access to some of our graphic and multi-media content. They also wanted a streaming portal into their social media streams.

This time I was told to think outside ADI’s currently available components and modules. If I came up with a great way to show the information we would create new components. Again, I looked at best practices and current modern designs to see how big companies are addressing their News Rooms. Companies in our field are surprisingly disapointing with the way they present their news. The best sites were for companies who’s image content is particularly important; companies like Coke or Nike.

I had to do most of the design from scratch making sure that, even though this was to have a particular marketing flair, it maintained ADI’s new branding standards. Because the News Room had several new components, I kept them all together in the prototype to make it easier for the Development Team to build.

Click the top image to the right to see the working prototype and specs I created.

Click the second image to see some of the other options I came up with for the design.

Personalization

The Head of Global Customer Experience & Content Strategy gave me a project: come up with how we might provide personalization on the site. One of many options I worked on was redesigning the home page, personalizing it for specific users. ADI has access to a lot of information about the user, especially when they are logged in.

This user’s profile is of an engineer coming from the Motor Control market and is in the evaluation stage of the Customer Cycle

This time I was tasked with trying designs using the current components, but also creating new components if needed. The first section of the prototype was designed using currently created components used in a different way than we had before. The second page of the prototype shows some different options for data that might be presented. I was thinking more outside the box for the third page of the prototype, allowing the user to create their own tiles on their home page.

Click the image to the right to see the working prototype and specs I created.

Web and Mobile Design

Here are some of the clients that I have worked with:

(If you are interested in more details about the UX and design process for each of these, click the ‘See...’ buttons.)

PTC

UX Consultant / Visual Designer

UX/UI and Production Work

Creating the design for a new Academic Portal for the ThingWorx platform

PTC created a new portal for Colleges and Universities that are teaching classes using their ThingWorx IoT platform. They hired me to design a portal that would allow Professors to easily create classes and grade assignments, and for students to easily log in to their classes, submit assignments and work with peers on projects.

The project began with wireframes and lo-res mockups and finally to two working hi-res Axure prototypes; one that was a light version, streamlined for quick release, and the other was for the more robust v2.0.

Analog Devices, Inc.

Senior Visual Designer

UX/UI and Production Work

Fixing UX issues with a newly designed web site - Interactive prototypes, red-lines, wireframes, mobile designs. All the various stages from concept to development.

ADI hired me just after they had their website redesigned. There were significant UX and mobile experience issues that hadn’t been addressed well in the initial deployment. Working directly with the Development Team for most of a year, I had a hand in most aspects of their web design and visual production. I spent a year fixing many of these as well as updating and creating new components for their modular system. I was in charge of designing new pavilion areas as well as their new News Room (they didn’t have any sort of organized news portal). I became the Axure Guru for the company and created most of the prototypes. We also worked with the Tools Development team to create a style for their online tools.

NuoDB, Inc.

Lead UX designer, Above the Fold

Website and mobile version re-design

Wireframes and mock-ups

NuoDB came to us with the results of a usability test that showed lots of problems with their site. After some discussions, We presented them with some wireframe ideas, tested them in house, and suggested a new orange color to add to their corporate palette in order to better bring attention to the CTAs. Our mock-ups included a separate mobile version because it was decided that the expectations would be different enough if one were to access the site on a mobile device.

TechTarget

Consulting designer, xslDesigns

Updating micro-site responsive designs for template mockups

Design presentation and mock-ups

TechTarget was updating their microsite templates, but the person who had designed the originals mostly left behind flattened PDF versions and a few layered Photoshop files that were a mess of disorganized, incomprehensible layers. I recreated layered versions for all 20 of the new designs and developed a scheme for organizing the layered documents. This was important because prospective clients often need customized mockups and poorly set up layers make this very time consuming.

I did several customized microsite mocks with responsive designs at different break-points including tablet and mobile layouts.

I also worked on Icons, banners and Infographics.

X

Layers - Before & After

Media Friends, Inc.

Lead UX designer, Above the Fold

Splash marketing page for app

Design presentation, wireframe and mockups

Bandwagon is an existing app. I took on the project of creating a mock proposal for a splash marketing page. I created original graphics that illustrated their tagline, wireframes and mockups as well as a working responsive HTML site.

Sapphire Systems, Inc.

Lead UX designer, xslDesigns

Web-site redesign

Design presentation, wireframes, mockups and site development

Sapphire Systems were ready to begin attracting investors again. They had reached a new place in their developement and needed a new look to their website. We discussed at length the things that made them unique and created a design that showed they were an established company on the cusp of creating something no-one else was creating. I created technical illustrations and worked to show that they are serious scientists.

Above the Fold

Lead UX designer, Above the Fold

Proposed website redesign for blog

Design presentation, wireframes and mockups

Above the Fold had a new website and needed to design their blog pages to match. I presented new graphic treatments and typography to complement the new site design and the layout needs of their blog.

See how I handled Above the Fold's intriguing UX interview test

Nationwide Foam Recycling, Inc.

Marketing Director, Nationwide Foam

New website design

Design presentation and mockups

NFR had grown to the point that they needed a web presence that could meet the needs of their growing client base. I created mockups and worked closely with the dev team to get the site up and running. This was my very first attempt at designing a web site!

Branding and Print Work

I want to showcase my freelance work as well as some of my work done as the Director of Marketing at Conigliaro Industries and Nationwide Foam.

LOGOS

Whale Tales Bookstore

This is a logo I created for a mock company. I was looking at pictures of whale tails and noticed that the curve resembled that of an open book. I was inspired to create the logo.

Belmont Dolphins
Swim Team

This was created for the Belmont High School Swim Team. I noticed a rather boring bumper sticker on a car in town and thought they needed an actual logo.

Negative Space Galleries

This is another logo I created for a mock company. I was doing some research into using negative space and I was inspired to create the logo. I love that the dot on the “i” looks like a negative sign.

Conigliaro Industries 20th Anniversary

Conigliaro Industries turned 20 on Earthday 2010 and I was commissioned to create a special logo to use throughout the year.

This is their original logo:

Nationwide Foam Recycling

NFR changed its name from NFI (Nationwide Foam, Inc.) to make better mention of the fact that they were a recycling company. We decided to unify the branding under the umbrella of 'Nationwide Recycling'. I was commissioned with creating their new logo and branding.

They recycle rigid foam insulation boards.

Nationwide Mattress Recycling

NMR is a sister company of NFR. I was commissioned with creating a logo that complemented the NFR logo.

NFR & NMR Business Cards

Since the company was so small, I did all my print media on our Konica Minolta color laser printer with full bleeds, cut them with a hand paper cutter, and did all my own folding with my handy bone folder. My father-in-law taught me that!

I cut out the jagged corners to give the cards a little pizzazz and to add to the illusion that the card was made of stack of foam boards like the ones we recycle. I also rounded the mattress cards with a corner radius punch. It was nice to be in charge of marketing for a small company!

Rest Assured

Originally, NMR was called Rest Assured, before we decided to unify the branding under the umbrella of 'Nationwide Recycling'. I was commissioned to create their logo.

Honeyland Childcare Center

Honeyland had previously created a logo, but the only version they had was on a large printed sign on the building. I was commissioned to recreate it (including redrawing the bumblebee) so they could use it in other marketing materials. I was given a little license with fonts. The original font choices didn’t say “Children”. One of the rare times Hobo is great!

SGML Works!

This was my first attempt at logo design. This is my father's company. I'm so proud!

Bibliofiles

TechTarget started a new posting and commissioned me to design a logo. Here are some of the ones I proposed.

Meridian Kids Preschool

This was a preschool with little branding. The curly and fancy fonts on some of these were the fonts they used on their sign outside the building. These are some business cards I proposed to the director. She later became my wife!

Conigliaro Industries and NFR Print Marketing

NFR recycles flat roof insulation materials. I created these brochures to connect our sales team with Corporate Sustainability Officers at large companies like Walmart, Coca Cola and Target. We were setting our sites at their distribution centers which have million square foot roofs.

The inside of the brochure showed the amount of landfill space 6 million cans, 16 million coffee cups and 4 million diapers took up, equating that with one large roof. I loved this idea. The marketing campaign was a huge success and helped make NFR a truly nationwide company.

The brochures have an interesting quad-fold set up. (See the detail pictures)

For the little tradeshow piece, I found this really creative folding technique called Swing Cards. When you pull on the sides, the center piece (in this case, a removable business card) swings around. I love that! I used it with customized wraps for the VP’s business cards when he went to conventions and trade shows. Anything you can do to make your business cards stand out helps.

Conigliaro Industries is a recycling company that specializes in hard to recycle materials. The lead salesman came to me and requested a set of brochures that he could take to trade shows or leave at local businesses and Transfer Stations.

The brochures all had a unified theme, but the graphics and layout on the inside were geared to the specific topic each represented. The open one in the foreground was for Biochemical Companies.

By this time I had convinced my boss to get me the Adobe® Creative Suite so I had usable software finally. They were printed with full bleeds on glossy 11x17 card stock. I cropped them with my trusty paper cutter (just like the ones you see in every elementary school teacher’s lounge) and folded them all by hand. The company was quite small, but having the resources to produce marketing material like this brought up their legitimacy.

These images show the insides of the mattress recycling brochure. The first folds of each brochure opens to an image of the mess you get when you don’t recycle that item. This one shows mattresses in a landfill. Yuck!

The second fold opens to the inside describing the recycling process unique to that type of item. Notice that it has a very different layout from the inside of the Biochemical brochure.

One of many single page sell sheets created for NFR. This is a sheet that the sales team needed. We decided to develop business partnerships with suppliers.

I was working as a Dispatching Manager when a flyer for the company christmas party came across my desk. It had that awful candycane border and cheap template look. I decided to create a new version just for fun.

Unfortunately, the only software I had at my disposal was Word® 2003 and I didn’t have access to any special fonts, so I had to get really creative and push WordArt to its limits... voilà. We had a wonderful Konica Minolta color laser printer that could print on 11x17 paper.

I showed it to the Vice President and a few others and they were so impressed that they created a new position, Marketing Director, for me. In a way, this is the poster that began my career!

Photoshop Work

I want to showcase my photo retouching abilities, but I also wanted to show some of the fun projects I've been working on. I'm still in awe about the stuff you can do with Photoshop.

A Sampling of My Production Work

Some of these were done as process technique studies in order to get better at specific Photoshop techniques.

The hair masking technique is one of the best I’ve seen. It makes use of the fancy edge detection, smart radius, and the magic decontaminate colors in the somewhat obscure “Refine Mask” area of Photoshop.

These are projects I did just to learn more about the amazing things Photoshop can do and because I just love this stuff! Some of them are from tutorials I found online. I’m still in awe over what Photoshop can do!

A photo I took after a particularly wonderful New England snow storm. My son was walking up the driveway to get the mail.

A poem I wrote for my wife. I had her Italian relatives help me translate it. I gave a print of it to her for her Birthday.

A collage of images for my son’s computer desktop. He loves the band System of a Down.

I’m definitely not a professional photographer, but I take some pretty great photos on occasion. I worked on these just because they were so beautiful. The rose was used as a Mother’s Day card for my wife.

These are from one of the most striking Photoshop Tutorial I have ever seen. I’d never seen a tutorial on creating such realistic watercolors. The process is pretty involved and takes some artistic skill, but the results are amazing. It doesn’t even use the watercolor filter.

I did these as framed presents for a good friend of mine who loves lighthouses.

This was a really interesting PSHero tutorial project The entire license plate is created within Photoshop. It was a great study in making something look old and worn.

Imagine looking at the second one in the rear view mirror.