Apptio - Dashboards
Our team was working on redesigning the main site and I delved into the dashboards, which were visually outdated (think Windows 95) and also used an incredibly outdated version of Highcharts for the various graphs. I redesigned the tiles and cards, proposed new data points to include based on customer feedback, and tried some different color palettes, taking into account contrast for color blind users. Below is a selection of different dashboards and palettes. Our executive users preferred the darker blue in the first screenshot, while our non-executive users preferred brighter colors. Our internal stakeholders loved the new, modern design and when I left Apptio it was on the backlog to complete. There were some engineering efforts required first in order to be able to update to the latest Highcharts version, which could make use of the new colors and styles shown below.
Atlas Media Console - A Role-based Learning Application
Microsoft acquired an online learning company with content they needed ported over to the Microsoft Advertising CMS and brand look. They were excited about the open slate before them and wanted an experience that would go above and beyond what they had used before. My agency team worked with the Atlas group to identify the type of experience they wanted their internal employees to have and how to make it fun and engaging. We proposed a Silverlight application that would deliver an interesting, exploratory experience that they embraced fully. Users choose their role on the team and are presented with a suggested path through the course content, though they were allowed to deviate. Another team member provided the flows and wireframes and I completed the UI and visual design, making sure to incorporate and reinforce the existing brand style. Additionally, the movie "Tron" had recently come out and our clients were big fans. They asked if we could incorporate some of the animation into the design. The arrows in the paths between cards in the second screenshot are lightly animated to suggest motion, which attempts to capture some of that Tron spirit. The clients loved their new learning tool and continued to provide our agency work in the following years.
Microsoft Language Translation Website
Microsoft was implementing an interactive feature into its existing rudimentary internal translation gallery website. As a place for tech writers looking for translations for technical terms or slang not typically found in standard language dictionaries, it needed to be interactive and allow for people to suggest and vote on translations. Working in conjunction with my team's IA, we developed a framework and layout that would fit in with their current site. The IA completed the wireframes and I developed the UI and visual design to complement their existing branding. I produced detailed specs for our dev team, who built out pixel-perfect web pages and interactions.
Microsoft Advertising - Website Redesign
Microsoft Advertising's old site was dark - black, in fact. They requested a lighter look, and while we were at it, a new homepage that would allow them to prominently feature new products and promotions. Working under our Art Director, I designed a homepage that was light and inviting, strongly branded, and included a rotating marketing block where they could easily swap in new promotions as needed. The client was delighted with the new design, and the international divisions soon adopted the new look and features. Some additional work was required to tweak designs for different languages, but overall the template proved flexible and easy to update. Because the customer was so happy with this project, they continued to hire our agency's services for additional design work.
AT&T Mobility - Marketing Emails and Site Ads
The AT&T Mobility group is responsible for promoting phones and tablets, rate plans, and other special offers to AT&T's small business customers. I was one of several designers that regularly created branded email and site ad campaigns enticing customers to purchase or upgrade to the latest phone models and plans. AT&T makes use of a set of core shapes and accents for branding, so certain elements are often repeated, such as the arrow with swoosh at the tail. The selection shown represents several of the most successful campaigns I designed. The first two are HTML emails, and the third is a suite of various banner ads for a fall campaign.