Following are samples of my design and workflow:
Project: Evercore IT Portal
The Problem
The IT department at Evercore serves numerous technicians, advisors and support staff through high-end computing technology, requiring application support, scheduling and document sharing in a visual style consistent with the company’s internal communications through a completely new portal built on Microsoft Sharepoint.
The Client
Evercore is a financial advisory group with offices around the world, and its IT department faces the challenge of supporting its analysts’ data-driven and intensive reports on the companies, mergers and acquisitions with which they partner. Multiple tools, calendars and external links form the backbone of the portal.
The Tools
Initial design was a series of wireframes created in Balsamiq. This is a decent tool for creating wireframes that lean into prototyping, but ultimately was deemed too simple for creating mockups the developer could use.
Photoshop was also used, but this quickly showed its limitations due to the number of layers required to alter some custom icons. Ultimately, balancing the work with Illustrator and xD resulted in a mockup that was colorful, useful and easy to test.
The final project is coded in Sharepoint, so some light coding has been necessary to insert additional icons and adjust colors to better balance visual load.
Color swatches were generated in Coolors.co and Encycolorpedia.com.
Discovery and Process
This is one of my most highly iterative projects to date.
There was a huge amount of back-and-forth involving everything from icon design to rollover behavior to color selection.
One of the challenges in color design was creating a calendar that used contrasting colors without looking like, in the words of the client, “a Christmas tree.” With an enormous number of entries, the result was frequently visually dizzying.
Sketches
One phase of the project involved a menu appearing from the top that included icons from the home page. It was known that the icons should be movable but not whether or not they should be deleted. If the latter, how would users reset their view, assuming they had deleted an icon at one point that later proved more useful.
It was eventually determined that the drop down menu should be a full menu. From a usability standpoint, this was a lesser choice, and meant that the only benefit the menu had to offer was its ability to access icons without the “blink” of transferring to a new page. Otherwise, users had to work through the same visual clutter to find their preferred icon, saving almost nothing. However, it is hoped that further iterations will avoid this issue.
Icon rollover colors and behavior was another consideration. What would it look like on a mouseover event? How long could the menu go before it ran off the page? (Answer: very, very long. Some sub-menus ran to as many as eight items before they were trimmed back.)
After settling the issue of icon placement and rollover behavior, calendars were designed. The issue here was limited screen real estate and a surplus of buttons. How could we get the user to best interact with the page without having to endlessly scroll? Did we need to hide some user preferences behind panels and more menus in order to make the page interaction more seamless?
Design for this phase more closely resembled a game of Tetris than proper design. Did this piece fit here? No? How about here. Oh, no, that threw everything out of whack and the row will never clear. Back to the drawing board until the site was legible.
Prototypes
This is a prototype of the site before it was sent to Sharepoint developers.
Final Outcome
I am pleased to see that the project is moving from staging to production, to be rolled out to the rest of the IT department shortly. Interacting with the various parties–including a videoconference call with developers in England–meant exposure to numerous voices and also concerns, resulting in a stronger product.
Project: Evercore Newsletter Internet Portal Conversion
The Problem
Convert a monthly print-only newsletter also distributed in PDF to a standalone website.
The Client
Evercore is a financial advisory group with offices around the world, and its IT department faces the challenge of supporting its analysts’ data-driven and intensive reports on the companies, mergers and acquisitions with which they partner. The monthly newsletter is an opportunity to share new ideas outside of the employees specific roles, in order to expand knowledge and reduce threats in the forms of phishing and other cyber attacks that would have the potential to significantly weaken the company’s position.
The Tools
Newsletters are created for print in PowerPoint, and converting that into a prototype site involved importing and converting elements using Adobe Illustrator and xD.
The Process
- Break all content up into two sections. Main content would be generated from longer articles with topics that would change on a monthly basis and would be directly linked from the main page. Auxiliary content would be marked with icons with content generated from repeating topics such as “Security Corner,” “Howard’s Tech Tips,” “Did You Know?”, “Tech Buzz,” and “An App for That.”
- Import all assets from PowerPoint to Adobe xD. As a corollary, expect many of them to experience some corruption and/or change and have to reconfigure them in Adobe Illustrator.
- Create website mockups in Adobe xD and share them online using the “Share for Review” tool, allowing users limited interactivity and the ability to see hotspots. In addition, generate JPEG assets for review on mobile devices.
- Iteration and more iteration.
Prototypes
Multiple prototypes were created in Adobe xD:
At first, the focus was on placement of items. Left, right, top, bottom and on separate pages.
My favorite prototype combined a drop down menu with text in a mixed paradigm that I thought of as an “information bar.” It was a new way of seeing things, as much a change as the Microsoft’s move from drop down menus to the infamous Ribbon. People would know by context and light formatting whether a given piece of text was linkable, and it would not force excessive scrolling or whitespace.
We moved on. The information bar did not survive further versions, which tended to focus more on linking to recurring segments:
Final Outcome
This project did not come to fruition, and was scaled back repeatedly in the course of production. It was a good lesson in maintaining flexibility in the face of difficulty, and one to which I would happily return given the opportunity.
Project: OpenIDEO Cybersecurity Visuals Challenge
The Problem
How do we reimagine cybersecurity as more than a dark hooded figure posed menacingly with a lot of numbers around?
The Client
As of August, 2019, OpenIDEO held its Cybersecurity Visuals Challenge. The goal was to create a graphic to better represent cybersecurity and the challenges of computing on an open web. Of the multiple personas, I targeted that of a high profile journalist looking for art to accompany an article.
The Tools
Sketching was done in Procreate on an iPad Pro with Apple Pencil and imported to Adobe Illustrator on a Macintosh to change to vector format. This ability to replay and rewind has resulted in tablet sketching largely replacing paper, even in an equal environment where cameraphones or videoconferencing can as easily share works in progress.
Sketches
This piece existed pretty clearly in my mind, so the original sketch transitioned quickly to the final, as shown in the movie below.
Prototypes
The sketch served as a template for tracing in Adobe Illustrator. It was clear from early on that the best method of tracing would be to establish clear lines of perspective and then remove blocks as needed. It was also clear that, while this method saved some time, it was not nearly as efficient as I would have hoped, and the project went well over the time budget required for it. Since this was for a contest and not a client, no billable hours were sacrificed and the only victims were the extra cups of coffee consumed in the overnight sprint.
The contest also called for participation notes. Here is what I wrote:
Inspiration in the negative–anything other than a menacing hooded figure–led to the question of what things intersect between dread, global reach and the standard tools we use for the Internet. Arachnids are sometimes poisonous and always unsettling; feeding primarily by injecting chemicals that cause the insides of their prey to turn to liquid that can then be sucked out. I was also inspired by the facehugger from the Alien series, a design that turns two hands into a clasping mobile ovipositor. The spatial mapping of keyboard to a globe turns a this tool from outreach to a focus for intrusion, weakness as strength.
Final Outcome
I was not selected for the shortlist, but it was an honor to participate.
Project 1: Bailey Place Tai Chi T-Shirt
The Problem
Design a class t-shirt in the style of a more popular graphic without copyright infringement and using the preferred reference positions.
The Client
Bayley Place Tai Chi class wants a new t-shirt for their fall classes! However, they must submit a design to the fitness center incorporating specific design elements, including a proper logo, as well as approximate dimensions, colors and pattern for the t-shirt.
The Tools
Procreate on an iPad Pro with Apple Pencil, imported into Photoshop for final layering and recoloring. One of the best and worst parts of using Adobe Creative Suite is its power and flexibility. This is best because almost every project passes through a Photoshop or Illustrator final phase to give it an extra sheen of professionalism. This can also drag a project down because not every design change requires the bulk of the programs; if I need to find a color of a particular swatch, it is simpler to open my lightweight Digital Color Utility than to open Photoshop and wait for it to load before I use my eyedropper tool.
Discovery Phase
The style:
And the reference images:
Sketches
One of the challenges in creating this project was not a difficult client, per se, but actually the inverse: one who was loathe to criticize. So, each iteration was satisfactory, but fell short of a final product, and needed to be pulled back to the design phase to be thought over again. It’s also one in which the artist (me) might notice more than the client and pull in a specific direction than intended.
For instance, I noted that the reference t-shirt graphic rendered the clothing of the model less realistically in order to present the “flow” of Tai Chi. The client reacted negatively to some of these changes, requesting that the hands be changed to more realistic human hands as well as more clearly define the clothing of a model Tai Chi student.
The following movie shows in 30 seconds the iterative process:
Final Outcome
Feeling rather proud of ourselves after extensive iteration, we submitted the t-shirt design to management to await their final word.
