UXtraordinary is a work in progress, a live prototype of sorts, where I’m playing with and testing typography, navigational design, and more. When testing and content strategy is resolved, I expect to convert the design into a more dynamic content management system (probably Drupal or WordPress).
Screen shots
Look, Ma, no site map! The idea that good navigational scent should remove the need for a user site map is one I’m aggressively pursuing on UXtraordinary. Note how position and color are used to cue the reader to their location in the screen shots below.
A partial capture of a post, showing a pull quote:
Block quotes:
Design notes
Some highlights:
- I’m having fun with CSS-driven typography. Note the inline pull quotes and titles.
- A favorite tool of mine for some time: Persistent (always on) navigation, also called sticky navigation. I first began doing this in JavaScript back in 2002, then switched to CSS a couple of years later, as soon as I realized the JavaScript links weren’t crawlable.
- Color palette aims at a clean, warm look and feel.
- Navigational cues are provided through the left-hand menu. Currently I’m testing a friend’s idea to float the navigation for the displayed content to the top, but I’m not certain I like the results thus far.
- Links to related categories are also offered at the bottom of the page.
A challenge for a site with close to sixty million active members is presenting meaningful lists from which users can find their old friends and classmates.
After carefully studying audience behavior, a cleaner, more helpful design was created. The result (see “After” screen capture below), is currently winning in test on several key performance indicators:
- Bounce rate reduced 55%
- Exit rate reduced 34%
- Paid membership conversion lifted 15%
- Targeted UGC lifted 22%
Scroll beyond the before/after images for a description of targeted needs and successful changes.
The old version of the school member list provided a great deal of information and interface control. On the surface this sounds like a good thing, but for a user seeking to find an old friend out of a list of hundreds or thousands it was overwhelming. Additionally, the browsing experience took users to completely new pages, making casual investigation of profiles laborious and time-consuming.
In the newer design, several changes were made:
- The generic “Actions” column became a “Contact” column. Instead of an option to either friend or send a private email, where both actions required a certain level of emotional investment from a perhaps years-separated friend, the focus was changed to reconnecting. One option is private email (should the sender feel confident enough), the other a casual public note.
- The old, not-very-intuitive “Profile” column, which linked to different profile tabs containing different types of UGC (user-generated content), and which displayed icons for several types of UGC, was simplified. It became “Activity,” which linked to the most recent user-generated activity left by the listed member.
- Featured users associated with specific types of information were highlighted at the top of the page.
- Some functionality was removed (display of all UGC indicators reduced to most recent; first name sort removed), to reduce confusion and indecision.
- Last but certainly not least, we optimized the profile preview pane. This tool, conceived by one of Classmates’ talented IAs, greatly reduced the clicks and tedious nature of member list browsing. It allowed users to see top level information about a list member, as well as interact with them. We developed and refined the business logic behind a rotating feed of connectivity/activity suggestions, increasing user-generated content from this location.
Please note: in true Scrum (Agile) fashion, this result was a collaboration between developers, information architecture, design, and editorial, with me as site experience product owner setting requirements such as Replace low-response “friend this user” icon and link with “bulletin boards” icon and link, and change category to Contact (copy to be determined by Editorial). Changes were made over several sprints (short development periods), with me pulling data and providing analysis and strategy for optimization.
A n example of visual information design and innovative taxonomy, designed to increase engagement and the presence of high-ROI user-generated content.
Targeted UX strategy increased 1→many user communication 181%, 1→1 communication 22%, and drove active user-generated content up 134%.
I combined applied social network analysis and a game element familiar to MMORPG players, the never-ending quest, to develop the bottomless activity, bottomless connectivity strategy. Initially part of a larger roadmap strategy, the idea was to provide a constant stream of targeted content-producing activity and connectivity to increase user engagement and enrich the site. I created this context- and ROI-driven guide to help Classmates creatives and product managers apply this. (Proprietary information removed.)
Promoting a user-centered perspective via taxonomy
When I first came to Classmates, there was a lot of emphasis on increasing user-generated content, but not enough business discussion from the user’s perspective. To remedy this, I introduced a new concept, user-generated experience (UGX), which I’d developed in earlier social media work (pre-Classmates). The taxonomy of user-generated experience included not only user-generated content (UGC), but user-generated activity (UGA). In order for stakeholders to understand UGA alongside UGC, they necessarily had to consider user behaviors and user perspectives. This inevitably led to a better understanding of user experience overall. (Eventually we began to actively convert UGA into visible UGC.)
Once this understanding was established, the next step was to apply social network analysis (SNA) and behavioral analysis, slicing UGC and UGA by the nature of the communication (e.g., 1 → 1, 1 → many, 1 → none; interpersonal vs. broadcast; degree of personal investment). This, combined with ROI (return on investment) research performed by one of our statisticians, drove much of our social media strategy. This guide is just one example of the resulting engagement tactics.
One of my more successful approaches is to apply game and simulation elements* to interface design. I first did this on a Nortel training site in 1998, where the increased engagement and usability was such that it’s become a ongoing element in my UX strategy.
Ten years later, I implemented the same strategy of deliberately incorporating game elements into design at Classmates.com. Here, a progress bar was added to the personal profile view (see green-boxed area in screen shot below). Progress bars elicit competitiveness and provide a goal or sense of accomplishment, depending on the user’s individual score. Please note: as UX Manager I developed the game-based strategy and participated in this project, but it was owned by a product owner and designed by creative staff. 
The results strongly validated the concept. UGC (user-generated content) initiated from this page increased across the board, ranging from 4% to 23%, depending on the content type. In a business where every piece of UGC has a specific ROI (return on investment), this was a win.
*Read my essay on the need for games in design on UXtraordinary, Fun is fundamental.
While we used many resources to understand our audience at Texas Instruments—industry consultants, survey/tracking applications like WebIQ, web analytics, testing—sometimes the best insights came from just sitting down and running a little competitive analysis. Here, a PageRank snapshot and tools such as Compete had revealed a surprising top rival. This is one page of my analysis on why Microchip was ahead of our other competitors:
A specialized audience
At Texas Instruments, it’s all (well, nearly all) about the engineers. CEO Rich Templeton is an engineer, many executives, product owners, and marketing staff are engineers, and a minimum of 85% of the web audience is engineers and engineering students. So user experience design is somewhat different than that for most audiences.
For one thing, engineers are highly purpose-driven. They have a goal in mind and want to achieve it, so navigation and content strategy must take engineering requirements into account. They are also more likely to be actively put off by flash and anything they regard as unnecessary, and would much rather read one long page than load several pages because of some classical design desire to have content above the fold. So while the above pages seem highly similar at first glance, read from an engineering perspective they are very different.
While most of the RFID audience at TI was atypically business-driven, we did have a significant minority of engineers. To assist them in purchasing the right product, a parametric search application was built. Parameters were to be driven using the PSBA (Parametric Search Business Tool, an in-house content management system dedicated to this purpose), into which product owners could enter the appropriate categories, measurements, and values (e.g, Operating Temperature Range, ºCelsius, -40-+85).
Below is the beginning interface for RFID readers parametric search:
Here, the user has refined the search by temperature range. So long as there are multiple products, users can narrow searches by any of the displayed parameters.
This taxonomy was to be developed by our RFID engineer product owners. Unfortunately, they were unable to integrate the 17 schemata for the various product types within the three month time frame, and we were one week away from our anticipated launch date. So I volunteered.
Within one day I had standardized measurements, established a controlled vocabulary (there were a few synonyms), and developed the necessary categories. The next day I learned the PSBA tool and began inputting parameters and values. All told, it took three very intense days to develop the taxonomies, learn a new tool, and input the necessary data, with one day left for QA. We launched on time, and I received a small cash reward in recognition.
Alex single-handedly saved the launch.
—J. Knowlton, IM Mgr., Texas Instruments
Read more from Jeff on LinkedIn
One of the products I managed online for Texas Instruments was RFID (radio frequency identification). Initially this was a very product-centric page, aimed at the standard TI engineer, but research revealed that RFID’s audience was less engineering-oriented: business executives, farmers, bankers. A technically demanding, product-driven navigation wasn’t working.
The goal: increase applications and visits overall without hurting product usage, while also updating look and feel to better match ti.com branding. A redesign of the RFID home portal, along with the microsite’s navigation, accomplished this. Scroll down for before/after screen shots and design notes. Results:
- 122% increase in click-through rate
- 175% overall applications page increase
- 29% overall products increase
- SEO work moved “RFID Systems” from #3 to #1 placement in organic search results
Old version
The version of the RFID portal I inherited, with a few of the problems spiked out. 
Redesign
Strategy and development, from goal to wire frames to actual implementation, was all mine; I project managed additional work, including graphics, global nav changes, and updates to other site areas. Received cash recognition for online development of RFID applications in Jan. 2008, particularly the Secure ID microsite.
Note the following key improvements:
- The most frequently-sought applications are the primary focus of the page, in three readily obvious content boxes with obvious links to more data.
- While product-based navigation remains, it’s been moved to a constant left-hand menu, readily accessible for those seeking it and more in keeping with standard TI.com design.
- Navigation hidden at the bottom has been moved up into the left- and right-hand columns to keep it more above the fold.
- From the breadcrumb links through the content and navigation terms, user search terms and keyword analysis improved SEO.
- The anchor links at the top have been recategorized and shortened.
E-newsletters
InStep,a boutique shoe chain whose owners care for feet as much as they care for fashion, was my favorite client. One of my accomplishments there was a mail client-friendly e-newsletter design, for which I also updated graphics as needed for campaigns.
InStep’s customers are fairly web-savvy, and responded well to a shortened, informative e-newsletter (we called them e-postcards) design. These degraded gracefully, and avoided common e-newsletter pitfalls such as poor graphic layout or CSS.
Foot health e-postcard
Illustrations and photography in this e-newsletter are mine, as well as the design, of course.
MBT event e-postcard
The photos in this e-newsletter are stock MBT photography, but the rest is mine.
Medical illustrations
InStep provides prescription, customized orthotics for various foot ailments. They wanted a line of illustrated medical brochures targeting local doctors, and I jumped at the chance to apply my drawing skills, perform research, and indulge my love of biology. Below is a sample brochure and a close-up of one of the medical illustrations, optimized for the web.
Plantar fasciitis brochure
Here, the interior of the plantar fasciitis brochure.
Exterior, trifold brochure for plantar fasciitis.
Hammer toe illustration
Anatomically correct hammer toe illustration.
MBT Training event
A ustin-based shoe boutique InStep sent out glossy postcards to existing customers to announce rewards, trunk shows, and sales. While InStep already had a logo and preferred colors, part of the fun of working was InStep was the freedom to establish branding in typography, layout, and treatment (transparency, blocking style, etc.).
This was built up from layered stock photos, but I did the transparency and design.
Spring campaign
Stock photo, my design
Summer campaign
My photos and design
