Anura.io: An ad fraud SaaS solution for performance marketing pros.

Dana has been a client since 2011, when we rebranded and created a new website that changed the trajectory of his business: Dana Sound Research Inc. Dana Sutcliffe is a Master Luthier, who provides the highest level of guitar/instrument repair and restoration to musicians and museums globally.

In 2011, when I first met Dana, he was one of the top luthiers in the country, but lacked professional branding and an accessible website. He provided services to local musicians out of a guitar shop, and had an amateurish logo and a flash website inaccessible to mobile phones. However, Dana had laid the groundwork for a successful web presence with a blog and an original logo, almost two decades prior — but had been steered away from it. Dana’s name was well known in the guitar community due to his success in 1992 with the Alvarez Dana Scoop electric guitar. His original logo was used on the guitar headstock and pickups and was instantly recognizable and iconic. You would not have even known that this was the same Dana — in fact, I didn’t — until after he became a client. And, as a guitarist, I was very familiar with the iconic “Dana” logomark. So, the first order of business was to reconnect him to his previous identity.

Our goal was to give Dana a professional appearance, and make him visible to the rest of the world on the internet. I proposed that we rebrand his identity using a modified version of the old, recognizable logo. After identifying the font that was used for his original logotype, I refined the typography, the overall shape, and shadow. We also restored many of his old blog posts, within a new HTML based WordPress website. The website design was intended to bring the tactile physical nature of these instruments into the digital realm by featuring tiled woodgrains. I created these graphics from actual photos I took of chunks of Rosewood and Birdseye Maple, that Dana had laying around. These graphics were incorporated into his brand identity, and have been used on the website, marketing materials, and ads.

The strategy for his site was to relate to a wide ranging audience: from acoustic musicians, metal electric guitar guys, the classic vintage group, to bluegrass banjo and mandolin players. We appealed to these different groups by targeting the very instruments they use, with several photoshoots of beautiful instruments that Dana had in his queue and that were featured at the top of the home page, along with a testimonial quote. This tactic uses the visual nature of these instruments to appeal to audiences that are separated by the nature of the different instrument. For example, a bluegrass picker sees a banjo and a testimonial and thinks: this guy is for me, I need work done on my banjo.

The website home page would serve as an all-in-one landing page, allowing a user to instantly find the contact information, understand detailed bullet points about the services, and also make an appointment through a contact form.

The first iteration of this website was launched in 2011, and has been a massive success. We have since launched several additional iterations. Since working together, Dana’s business has grown significantly. While I am awaiting final statistics, I can confidently write several statements about Dana’s growth.

• Expanded operations to an entire floor of a multiple suite studio — from originally working out of a small music shop.
• Employs a team of master and apprentice luthiers — from originally being a single-man operation.
• Clientele has grown significantly, from all over US, to many countries worldwide — from originally working only locally.
• Type of clientele has expanded, as he now works regularly with museums, and production companies.

Working with Dana has been the most rewarding relationship I have had in this business. Having a client in an industry of which I am passionate was wonderful, but witnessing how an incredible service provider can flourish when given the proper circumstances is truly meaningful. This case study is an excellent example of how a great client + great work = great success. This case was also unique in that he already had a successful identity to fall back on, and just needed the proper guidance to bring it back. To me, it was a no-brainer, but unusual to not have to design a new logo. Dana continues to be a client to this day, and we are in the process of updating his site again, to support his expanded needs for 2022.

Baiada was rebranded to communicate to clients having higher end weddings and events, who care about having beautiful documentation photography. The modern icon juxtaposed with the traditional logotype and filigree provides a contemporary identity with all the classicism of a wedding. The website is a custom Flash site, utilizing SlideShowPro Director, allowing them to easily make updates. The front-end is an ActionScript 3.0 built interface, which interacts with Director. The mobile version uses HTML5 slideshows from Director, and a WordPress HTML custom theme. The Baiada Photography website was the winner of SlideShowPro’s website of the month in March 2010.

The HS Design website was the first project I worked on at Möbius New Media. It was developed in HTML, CSS, jQuery and integrated into WordPress. Back-end work was involved, including hosting consultation, setup and maintenance. Google Analytics, tracking tools and an SEO campaign were created. The sites feature SVG graphics and animations. The interface was slick and modern, with significant interactivity, transitions, and animations.

My role and contributions

I was responsible for all development work — building a custom front-end for this site, starting with the home page. I worked alongside the Graphic Designer at Möbius, who provided me with a Photoshop mock-up of this approved design. It was highly detailed, and a challenge to develop. I met that challenge accurately and efficiently, as this was a test of my skill level, as a fresh hire at the agency. The images shown here are of the final developed home page. The other pages of the site were designed and developed in tandem, directly in WordPress.

I developed a Möbius theme, for all future WP websites to use as a starting point. It connected all necessary external files for writing custom CSS, and JS. In addition to easy access to all separate PHP files, with the ability to easily jump into a file and write custom HTML.

This project was one of the most challenging front-ends I have coded, as I had to match a design that I did not create — which was highly refined and detailed with exact specifications. It can be tough to develop using designs provided by designers who are not developers and don’t understand how something will be developed, how easy or hard it will be, or if it should be done that way at all. Nonetheless, this site was a success, and I went on to work at Möbius developing numerous additional websites.

Ultrachem Inc. became a client in 2012, when they hired me to build their next website. They are an international manufacturer and distributor of synthetic oil products. The website project required it be built with a full back-end that would be used by their in-house design team.

Requirements:
– Build a database of all products with separate fields for: ISO Grade, Viscosity, Index, Flash Point, Pour Point, and Specific Gravity.
– Organize and connect PDF sell-sheets to each product.
– Dynamically display all information and PDFs on their respective pages, organized by category.
– Each product has cross-referenced products from major oil manufacturers for which they could be substituted.
– Cross reference page needs to search and dynamically cross-reference substitutes, and display in tabular data.
– Include call-to-actions to directly connect users to their contact information, newsletter signups, and request forms.

I used WordPress as a CMS, as it met all of the requirements. Using Custom Post Types, Taxonomies and Categories, I was able to propagate all of the correct content to the respective areas, while maintaining one easy-to-use database.

This site was the largest back-end development undertaking I’ve done, and it was challenging to organize all of their products because of the numerous data points required by every product. Although WordPress was fully capable of meeting my needs, it was difficult to categorize every product, and propagate it’s information to the right place. Furthermore, the task of entering this data was massive. The cross reference form used AJAX technology, to search and load all of the content without reloading the page.

The Cross Reference Page was a major challenge, and was the most important as it was the most used page. As Ultrachem makes and sells oil substitutes, users need to be able to put in the product for which they require a substitute. This can be searched by brand name, base fluid, and ISO grade. Upon finding the equivalent Ultrachem oil, a user is given a link directly to that product where they can learn about it, and access PDF sell-sheets.

I learned that this was the most popular page, and was primarily accessed by users in-the-field on mobile devices and tablets. This information was key to understanding how this page was used, and allowed me to design the right interface. The problem was the tabular data that was difficult to use on a small screen. On a large screen, it was no problem, because the long table was fully visible. But on a mobile phone, the table was scrunched together, and scrolling across was confusing and difficult to see data across the whole table. I solved the problem with a unique design and development solution, using different CSS rules to display the tables differently on different devices. On a computer, it would display normally, but on a tablet or phone, the table rows would be blocked together and display vertically. All of the necessary information is displayed together. Although it looked a little different than the normal table, it was easily understood after I applied solid background colors to each table row.

It was very rewarding to build a much more complex site, within the framework with which I was comfortable. Successfully solving the most important project problem —displaying the tables on a phone — with a simple and elegant design and front-end development solution was the best part of this project because it met the clients’ need and was fulfilled quickly and easily. I just had to think about the problem and understand that the solution was within the problem itself. Small screens displayed the tables differently, which was the issue. So, I had to make small screens display the tables differently — but control how they displayed, and reorganize the visual information a little differently.

The 20/20 initiative was launched in 2015, during my time as a Designer at Barclaycard. It was created to establish and outline the organizations’ goals and objectives through a five-year plan, ending in 2020. This website was a means to remain accountable to these goals, and track their progress on a monthly basis. A newsletter was distributed each month, with a link to an update on this micro-site.

It detailed dozens of initiatives, corresponding representatives, priority levels, financial data-tracking graphs, a timeline, plus additional information. Leadership would provide my team with PowerPoint slides with data-rich content to be distilled into a clear communicative hierarchy, corresponding iconography, representative data-visuals, with-in an overall slick, modern interface.

Due to confidentiality issues, I have swapped out the text content with Lorem Ipsum.

My role and contributions

I was working a hybrid role as a Graphic Designer / Production Artist for the Creative Marketing team at Barclaycard, when this project came to fruition. Because of my interest in UX Design, and my Front-end Development skills, my Creative Director made me lead on this project. I worked with several teams to successfully complete the project — Creative, UX, and Leadership. We met with Leadership to discuss high level goals, content, and progress. My CD managed the project, and helped to decipher the bloated PowerPoint slides we were given. Upon simplifying this information, we broke it down into a clear hierarchy and I created a clean, sophisticated design.

With the help of the Technology UX Design team, I was given a development environment to create the micro-site. The most challenging part of this project was the browser we were targeting: IE7. Ugh…
The audience for this site was every employee in the organization, and the most common denominator in terms of browser was, unfortunately, this one.

Using Bootstrap, XHTML, CSS, and jQuery I developed a simple micro-site that was functional in even the worst of browsers. This micro-site was hard-coded, not setup to any CMS, and I manually changed the content from month-to-month.

Design breakdown

The first section features a hero banner that displays an image of the executive of the month, who was providing that message. There would be a long letter from this executive, which displayed a snippet in a box, and could be clicked through to open the entire message. A ticker slides in on the right, in a bright yellow box, displaying the total amount of consumer accounts.

The second section lists the top level buckets, of which all the goals were distilled. Upon clicking one of these, a menu is shown, with a further breakdown of the initiative. For each menu item, a slider is used to rotate through information pertaining to that objective. A breadcrumb navigational element is shown to provide the user with a tool-tip for what to expect next. Tags and icons were created to display what category the initiative belongs to. The representatives for each objective are displayed with avatar headshots, and a clickable email link. Finally, priority levels were assigned to each initiative, with corresponding icons and graphics.

The third section features eye-catching graphics of a countdown timer, and graph showing number of consumer accounts per month, displayed against the target trajectory of the next five years.

The fourth and final section features an accordion, that displays further information about these initiatives, nested into a clear hierarchy. Much of this information — when first provided to our design team — was impossible to understand, as it was all visible at once. But, when applying a hierarchy and different graphic treatments to typography, it became much easier to digest and understand. While I get it is difficult to see the exact nature of the communication — due to the Lorem Ipsum — I think the overall concept can be understood.

Commonwealth Trust is an independent privately-held boutique trust company in Wilmington, Delaware. It was completed during my employment at Möbius New Media. I designed, developed, managed and presented this project to the client. The goal was to create a small WordPress website with a custom interface that matched their brand standards. The resulting interface is a custom WordPress theme, designed and developed simultaneously in HTML, CSS and JS. SVG graphics were custom designed, and jQuery was written to create transitions, animations, and interactivity. I was required to use their color palette and logo, but all other elements were open. Their previous website was used as a starting template, and we re-designed the experience by separating all of the textual information into a hierarchy, and organizing into easily understandable tabs, paragraphs, sections, boxes, and quotes.

In addition to my contribution, Matt Urban of Möbius did a photoshoot of iconic Wilmington art and architecture, of which we used across the site. Back-end work was also involved, including hosting consultation, setup and maintenance. Google Analytics, tracking tools and an SEO campaign were created.

Perhaps my favorite project I have ever worked on was this one: for Rob McIver, a very creative photographer that specialized in music and band photography. Rob is a full-time photographer, and also a professional vocalist for The US Army choir. In addition, he became the band photographer for the US Army band. He also photographed lots of children, and personal photographs for couples; anniversaries, etc. His unique blend of talents and perspective, attribute to his style as an artist.

We designed his logo and identity at the same time of this website, and the most important goal was to be minimal, and let the photographs speak for themselves. I tried to speak his unique, often fun and silly, vernacular with a typographic play on his name: “ROB” across the front of a camera — the “R” and flipped “B” mimic the shape of human fingers gripped the camera from behind, and the “O” forms the shape of the camera lens. This play on type and human characteristics made it instantly communicable that: 1. he was a photographer, 2. he was fun, 3. his name was Rob.

The logo was designed a gray color, or white against a dark background — but the “O,” which represents the camera lens, where the magic happens, is the center of the logomark, and also the center of his literal name. Because there were many levels of metaphor here, and we really wanted to push the boundary of uniqueness, I programmed the logo in Adobe Flash to display a focal point (and color) of whatever photograph the logo was accompanied by. If the photo had a pink detail, then that pink detail was shown in the center of the logo. If the photo was orange, the logo was orange. This was a very fun way to visually represent: the magic from the photograph, displayed through the camera lens, displayed through the logo, displayed through Rob’s name. Our initial goal of letting the photographs speak for themselves was also maintained with this convention because there was never more than one competing photograph. The photo seen through the logo was a highlight of that photo, and therefore it highlighted it, and did not compete.

Of course, this was only able to be represented in certain circumstances, where Adobe Flash could be used. And, as of this writing in 2021, Flash is no longer available. So, the rules for the logo color still apply, and are mainly used in print media. When displayed in static web form, a standard color was chosen: pink or orange.

In addition to the brand identity, we built a custom Flash website using SlideShowPro — a back-end slideshow software that was a management system for slideshows. The main site was Flash based, and for his blog I designed and developed an accompanying HTML WordPress website that matched the style of the main site. This job also included various business cards with several photographs on the back, and matching logo on the front.

This website is the largest and most comprehensive workplace study in higher education. The site was redesigned using the existing brand identity, while being organized and rethought to provide brand cohesiveness and consistency. The site is intuitive, easy to navigate and presents content in an intelligible way, making it easier for visitors to find what they are looking for.

This website is the largest & most comprehensive workplace study in higher education. The site was redesigned using the existing brand identity, while being organized & rethought to provide brand cohesiveness & consistency. The site is intuitive, easy to navigate & presents content in an intelligible way, making it easier for visitors to find what they are looking for.

Lightwork Photography hired me to brand this new business, and create their first website. This client was specifically targeting female clientele — brides and moms. This female owner had experience connecting with this audience, and discovered they were most often the group researching, and making the final decision when hiring a wedding photographer. Because of this, our goal was to create a soft, feminine identity. The identity features an iconic logomark, vintage style logotype with a texture that provides a cohesive backdrop that highlights the design in a sparkly, flashy way.

The website was designed and developed using WordPress. It featured multiple slideshows, and blog articles.