Search
Contact
michael.fortress
@gmail.com
312—810—6371
Connect

Entries in Web (3)

Sunday
May092010

Wikipedia

Problem
Wikipedia lacks a solid brand foundation and faces readability issues and easy access to information. The brand’s current logo — the unfinished puzzle globe — is seen by its audience as laughable.

Insight
A lack of mark-up style isn’t making Wikipedia neutral, it creates an aesthetic that inhibits readability and easy access to information.

Solution
I focused on a smart typographic solution, appropriate for reference materials. There is stock in the stark black text on a white background, with a serifed face set in small caps and featuring a crossed-V style capital W. This capital W is iconic and separates the brand from other online entities that use a capital W — such as Wordpress — but without the crossed-V format.

 

Web
The most important element of this redesign is the aspect of the brand which people most frequently interact with. This solution involves creating an interface that is open, breathable, and accessible. Content was divided in a logical manner. The header contains the Website’s more important feature: the search. The left column contains the navigation within Wikipedia. The main body that houses the article is treated as a narrative; this content is written by users while referencing external materials. The narrative can be read, edited, discussed, and bookmarked. In addition, users can view past versions and edits.

Within the narrative, issues such as line length and text wrapping were addressed by dividing the content into two columns. Stylesheets for media and content such as video, audio, and pull quotes were defined in order to encourage more robustly developed posts.

The right column is reserved for factual information and article tools. Some tools I added were a topic web, so the user could easily see topics that link to and from this article; a contributor geography map; and highlighter tools so that users can mark copy to reference in the future, divide content by update, and by reference material.

 

Mobile
The crossed-V style capital W serves as a simple identifier for the application. The stark black on white brand asset is striking and sophisticated.
The approach for the mobile interface was designed to solve an immediate need for quick and easy access to media and written content. 


Multiple entry points into forms of media should be accessible to the user above the fold.

 

Print Collateral
The approach for stationary was simplicity, readability, and easy access. This was done by designing with stark minimal layouts and clean typography. The system uses the brand’s hero color, link blue, to as a callout and as a general indicator of information that links people.

Business Cards
Card 01
This business card style is the more conventional option. It employs a simple and sophisticated use of the logo on the front side. On the backside, the format for displaying background information — as seen on the Website — is used, including a tongue-in-cheek treatment of the employee’s name and place of origin.

 

 

Card 02
Of a more conceptual nature, this card simply displays the logo, Website url, and the employee’s name appearing in quotes and offset by the universally-recognized icon for “search.” This implores the receiver to search for the employee on wikipedia.org. This method controls how the receiver retrieves this information and has the receiver interacting with the brand’s Website. Employees will have profile pages that function like articles, allowing for content, media, and discussion.

Sunday
May092010

Verizon

Problem
If Verizon’s current branding were a TV personality it would be Jim Cramer. Verizon’s current brand voice is cheap and desperate.

Insight
A large share of the brand’s consumers are young professionals. Verizon features Blackberry phones, and phones with popular operating systems such as the Android operating system by Google. Because of this, Verizon should be something to be desired.

Solution
I developed a more unified and confident brand voice by shifting focus onto a strong and sure use of typography and allowing imagery of the phones to be the heroes. Since the brand will experience such a radical shift, I held onto the color red —the color of desire — which the company has a lot of stock in.

For the mark I wanted to create something with energy that spoke to the way that freeing ourselves of wires has allowed us to be more connected than ever. I used the familiar symbol for infinity and gave it life by weighting the mark in the manner it may appear in a long-exposure light drawing — an effect achieved by camera.


Business Card
Elements on either side of the business card were given ample margins in anticipation of their role. On the front, the card is received and the customer views the mark while holding the card in his or her right hand. While using the contact information on the back, the customer will be holding the card with his or her left hand while dialing or typing with his or her right.

 

Phone Tag
Typography is aimed at easy access to information and for quick side-by-side comparisons between two or more mobile phones.

 

 

 

 

 

 

 


Retail Bag
A branded retail bag with a bold use of the logo. The handles are an extension of the higher end of the logo. The logo takes on a tangible form here — this is a touchpoint for the user to interact physically with the brand’s logo.

 

 

 

 

Publication
The Small Business Guide is a publication printed biseasonally that outlines selected phones and plans, and features tips for small businesses. These are distributed at Verizon’s retail stores.


Cover
The cover utilizes a flood of the brand’s signature red and an authoritative use of typography. Layout and type are used in a way that allows for easy navigation by the reader.

 

 

 

 

 

 

Chapter Introduction
This spread uses some of the brand’s heavier tones to offset it from content spreads. The mobile phones are still the heroes, but in this instance a hand is shown holding the phone in order to add a human element and prevent the brand from becoming too cold and mechanical.


Infographic Spread
This content had previously been formatted by the brand in a boxy table with a color-system that wildly deviated from the brand.

I focused the information and organized it in a more intuitive manner and created a more elegant use of space and content.

 

Website
Verizon’s current Website is compartmentalized and unfocused. Here, the brand’s online presence strengthens its values of focus, sophistication, and the concept of the mobile device as the hero.


Verizon's Website redesign takes a more intuitive and presentational approach.

This is in order to sell the concept of the brand and to allow users to make easier choices about navigation within the site. The interface has been cleaned up by neatly collecting and tucking away supplementary information that had been crowding the content.
This screencapture displays a landing page for the “wireless phones” subcategory.

Sunday
May092010

Hewlett-Packard Ink

Problem
Hewlett-Packard (HP) is one of the largest manufacturers of printers and makers of printer cartridges in the world. However, purchasing ink online and in retail stores can be a confusing and frustrating experience. Packaging for printer ink is not intuitive. In retail stores many consumers simply walk away after a few moments from a product they are surely in need of.

Insight
A clear packaging system can help consumers find the correct product. There are also technologies available that could aid in easing frustration at the point of purchase and would improve the overall brand experience.

Solution
I developed a packaging system in order to aid consumers at the point of purchase. Integrated into this packaging is an exciting piece of technology. In addition to this, an ink- and printer- managing application was designed to help consumers find their products and to help them understand the value that the products provide them.

Ink Packaging
Clearly stated product attributes are printed on the packaging. The packaging for each ink cartridge is also accented with the color of ink. The white packaging indicates a single-color ink while the dark grey packaging indicates multiple colors.

Microsoft Tag
The Microsoft Tag is a piece of emerging technology that is adopted because of the value it offers over its predecessors. The concept of the technology is nothing new, QR Codes have been around since 1994. What the Microsoft Tag holds over the QR Code is the amount of information that can be encoded in the mark, the flexibility of the code’s appearance, and the minimum size needed for readability by devices. Also, the Microsoft Tag hits a server-side database meaning that content can be updated and that Microsoft can provide analytics to publishers.
QR Codes are more ubiquitous — however, almost exclusively to Japan — but given the benefits of the Microsoft Tag, and the long history of working together that Microsoft and HP share I was supported in using the Tag.

I [Recycle] HP
Hewlett-Packard advocates recycling discarded ink cartridges. The campaign — I Recycle HP — is a call to action to do just that. The name is a nod at the wildly popular I [Heart] NY campaign and urges consumers to take pride in and responsibility for properly disposing of their waste. The mark appears on packaging and online. These products, through the program, when recycled, feed into an incentive program that offers consumers a value redeemable toward future purchases.

 

HP Ink Manager — Main
This management tool is made available to consumers through the brand’s Website, digital kiosks in major retail stores, and mobile devices. Users start by making an account and then linking all printers which he or she frequents whether it be at home, at work, or elsewhere. Determining a printer model and compatible inks can be quite confusing. For users that don’t have the printer model readily available, this application will intuitively aid him or her in selecting the printer model.


Printers update the online printer cloud on measured ink levels. The HP Ink Manager displays this information conveniently in one central interface.

 Compatible ink cartridges for the selected printer model are also shown along with links to purchase these cartridges or view similar printer models. These features are gateways to sales.

Key information — the printer model, installed ink cartridges, ink level estimates — can be sent by the application, via SMS (a text message), to a mobile phone so that the user or an associate of the user can have this information accessible even when the application may not be.

HP Ink Manager — Performance
This feature of the HP Ink Manager allows the user to see performance of ink color and cartridge type. This information can be formatted in a few different ways, and can be viewed by time period, by cartridge, or by printer. By knowing what performance to expect from a printer or cartridge the consumer can plan for purchases more wisely.

 

 

HP Ink Manager — Mobile
The Ink Manager Mobile application allows the user easy mobile access to the same accounts and information as the Website and kiosk. If the user so chooses, he or she can be alerted when ink levels are low and the smartphone’s GPS detects that he or she is in the nearby proximity of a retail store with that item stocked.