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.
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:
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.
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 was multi-dimensional game of Tetris, with usability balanced against the need to remove unnecessary whitespace.
Prototypes
Click here for 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.
Bailey Place Tai Chi T-Shirt
The Challenge
Design a t-shirt graphic in the style of a popular graphic using the preferred references.
The Client
The Bailey Place Cincinnati, Ohio Tai Chi class needed a new t-shirt for their fall classes and must submit a design to the fitness center incorporating specific design elements, including a proper logo, approximate dimensions, colors and pattern.
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
After extensive iteration, we submitted the t-shirt design to management.
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.
Prototype
Final Outcome
I was not selected for the shortlist, but it was an honor to participate.
Click here to browse the shortlist selections.