Tag Archives: UX

Mobile Pizza

I did some agency work for a large national pizza chain, streamlining and optimizing their online ordering workflow, and wireframing the web app for same. It was a good opportunity to produce some formal mobile work, alongside the experimentation I’ve been doing.

Workflows and wireframes for an mobile pizza ordering web app.

Workflows and wireframes for an mobile pizza ordering web app.

For an e-commerce workflow, it was quite mature and complex, with the need to integrate location-based menus and coupons, customer loyalty systems, and sophisticated product configuration, while minimizing user input and cognitive friction.

One of the workflows for the mobile pizza web app.

One of the workflows for the mobile pizza web app.

The workflows and wireframes were completed in about two weeks.

Holiday Usability Tips

Holiday Usability Tips:
1. Use a “one-click” switch for all your holiday lights.
2. Gifts should be no more than two layers deep from the  wrapping paper.
3. • Make your greeting cards shorter, • highlight key words in bold, and • use bulleted lists.
4. If writing a long letter, don’t use a roll of parchment (Don’t make Santa scroll.)
5.  Label stockings clearly, and sort them by size. Provide a naughty/nice filter.
6. Remember to include a call to action in holiday cards, such as “Have a great holiday!”
7. Keep the menorah down to 5-7 candles, to fit the user’s short-term memory capacity.
8. Offer an automated mass-email of goodwill to all mankind.
9. Color-code fun things in red, happy things in green.
10. When in doubt, just copy Apple.

1. Use a “one-click” switch for all your holiday lights.

2. Gifts should be no more than two layers deep from the wrapping paper.

3. • Make your greeting cards shorter, • highlight key words in bold, and • use bulleted lists.

4. If writing a long letter, don’t use a roll of parchment (Don’t make Santa scroll.)

5.  Label stockings clearly, and sort them by size. Provide a naughty/nice filter.

6. Remember to include a call to action in holiday cards, such as “Have a great holiday!”

7. Keep the menorah down to 5-7 candles, to fit the user’s short-term memory capacity.

8. Offer an automated mass-email of goodwill to all mankind.

9. Color-code fun things in red, happy things in green.

10. When in doubt, just copy Apple.

Novus Biologicals is Live!

The Novus Biologicals website homepageRocket surgery has nothing on immunobiology and proteomics. With over 100,000 products, in a dozen categories, and the most complex set of product attributes and filters I’ve ever had the honor of untangling, the Novus Biological website was a textbook case of Information Architecture challenges. Working for SpireMedia, I took on the task of understanding the incredibly intricate world of antibodies.

It was a long and hard slog, yet we got through the information architecture and wireframes mostly on budget and on time. Beyond organizing and laying out the site, I also helped resolve some thorny data issues, such as how to apply cumulative filters on a dozen variables to a list of 50,000 items. I also helped evaluate, spec and implement the Novus Explorer, a Flash-based relationship browser, which for the first time gives researchers a visual, interactive way to explore the connections between antibodies, proteins, diseases and genes, clicking through to extensive scientific litterature. I dare say that, for a site with a tenth the budget of its main competitor, the new novusbio.com raises the bar.

On a personal note, I also had the pleasure of working again with Scott Osgood, an old friend, colleague and client from my Immedient/INS days, who took on the job of CTO for Novus on the same day that I took on the Information Architecture tasks for Spiremedia. A very happy coincidence indeed!

I’m more than a little proud of the work that went into this site, though of course the real credit goes to the amazing design and Drupal development teams at Spiremedia, who burned even more midnight oil than I did.

Stratification Tool

Thumbnail of the stratification toolBuilt a flash-based complex data visualization and stratification tool for a higher education consultancy. The company helps higher ed institutions to recruit and retain students. This tool is aimed at targeting outreach and marketing efforts to the right populations of high-school students, to maximize recruitment success.

In technical terms, it’s a statistical analysis tool. Likelihood to enroll is calculated for a body of applicants, and the tool gives a visual and interactive interface to the process of dividing that body into sub-groups.

This was a dense app, with lots of complex actionscript. I started with the data, building a visual representation that can be rendered as a histogram or smoothed line chart, with arithmetic or logarithmic scale. The user can then add or remove stratification bands, and set the bounds by sliding a knob along the y-axis. Each band reports its totals and percentages in real-time as the bounds are slid around, allowing the user to quickly create a 50-student band, or a band of 50 likely-to-enroll students.

My main goal was to take a complex decision-making process and make as much of it as possible as intuitive and tactile as possible. I did leverage some of the built-in actionscript animation libraries, using them sparsely and quickly to indicate pliancy of the UI, and give an overall feeling of responsiveness.

This was the most technically dense and complex Flash project I’ve done to date, involving XML/SOAP, handmade graphing routines, GUI design and lots and lots of math. I enjoyed it immensely.

MOSS envisioning engagement

The final site map

I’ve been sent to Los Angeles to help a CTO make a case, in one week, for a MOSS implementation. I approached the process with personas & goals, ethnographic interviews, and a usability-oriented review of their current systems. I also established a good rapport with the CTO, by listening to her business goals and inferring her personal goals. She wanted to shake things up, to streamline the bureaucratic machine while empowering the splinter groups, the internal startups that had developed in a vacuum of control. I can respect the wisdom of that approach, especially when dealing with the potential bureaucratic armageddon that can be unleashed with tools like SharePoint.

I applied my goal-directed approach to navigation, yielding a site map that provided a “Cathedral” area for corporate unity, and local, flexible “Bazaars” for the mavericks. We accommodated the security requirements of the compliance division, putting a key ally in our camp. In one week, we put together a solid plan, and the client invited me to help her present it to her boss.

It was a very quiet, subdued moment, after the chaos of trying to piece together a company in a few days. Just the company’s president, my client, and myself. He appreciated the potential for a healthy balance of corporate types and entrepreneurs, as well as the value of our plan. His questions afterwards were related to the logistics of making it happen. The dialog was productive, good decisions were made.

I head back to Denver, with another feather in my cap. The local sales guy is amazed at how calm our client seems to be. It’s not calm, dude. It’s focus!

Extranet with secure webmail

Extranet with SafeMailSometimes all a complex problem needs is a better metaphor.

This higher-ed consultancy, client of ours, has been struggling for years with transfers of large data files to and from their clients. Statistical analysis works best on large data sets, and in this case, the files reach in the dozens of megs, and they usually are burnt on CDs and sent in the mail.

Some more courageous institutions had been uploading files through a web interface, but that was fraught with problems, mostly with dropped connections and uploads. Also, there was a lot of back-and-forth on the phone with clients, trying to determine which uploaded file was which, which was outdated, which had changed.

We had finally come up with a semi-reliable way to allow web upload, and decided to revisit the whole user experience before we implemented it. The developers had a clear vision of an online file manager, but I insisted we look at the actors, context, and goals.

It turns out that these files are always exchanged in the context of customer service, always accompanied with conversation and clarifications. And there is a better metaphor for this kind of file exchange: Email attachments.

I proposed a prototype of “Safe Mail”, a new set of pages on the extranet where clients can check their mailbox for messages and announcements, send messages with secure multi-meg attachments, and keep track of the entire process. I made sure to include thumbnail photos of the client’s consultants with their email, and to demo an announcement from the big boss, to highlight the customer service, marketing and sales value of this relational tool. 

The client loved it. The entire office has been abuzz about it since the demo, and the developers are working hard to make it real. It’s going to simplify a whole lot of things around here, and everybody’s very busy trying to find the right photo to use on their profile.

I love it when looking at context and personal goals allows for a complete mind-shift into a better metaphor. We’ve done more than solve an issue here; we’ve changed the nature and tenor of customer service, making it both more rational and more personal.

Hello operator!

Finished another one of my “deus ex machina” one-week fix-it-all stints, this time at the offices of a large cable operator. As usual, this was a SharePoint project, attempting to find some value to deliver to the operations. More specifically, a way to connect the distribution hubs of Video-on-Demand services, with coordinated schedules.

After a half-day being walked through the technical requirements, and attending meetings that were more about politics than tech, I finally asked my team: “Where are the users?”

We descended out of cubicle land and into the depths of Ops, which looked like the interior of the death star. Hallways made of server racks. Finally to a dark room where a few operators sat at a large console, consulting giant screens plastered on the walls, beaming Video-On-Demand by satellite to the four corners of the country. And I spotted the current solution: an excel spreadsheet, prominently displayed on one of the bigger screens, that one of the operators was busy hand-editing.

It turns out, of course, that the users weren’t directly using the current system. They were copy-pasting from it into a master Excel spreadsheet, basically a glorified list. Then, a few times every day, one of them would copy-paste out each hub’s portion of the master sheet, and send each hub their own version of the spreadsheet. It was constant manual labor, yet still outdated every few hours. But it worked better then trying to tease out the relevant info from the cumbersome legacy system.

Once more, a little ethnographic research saved the day. I pointed out the low-tech, instantly usable solution: Import their master spreadsheet into SharePoint. Allow them to mark different rows for different hubs, and have SharePoint automatically replicate this into each hub’s team site. Total time to code and test: 2 days. And the users loved it. We walked back down into the death star, showed it to them, and they had it on the big screen in ten minutes.

The solution was so elegant and simple that I even had time left, the last day of the week, to put together and deliver a little training session at one of the hubs, for the other users of the system. They were shocked and delighted that someone came to see them, with a solution instead of questions, and even more shocked when they realized that I’d just come in out of nowhere and cut their workload down by 20%.

Anytime there’s a SharePoint implementation that has not leveraged any Usability/ User Experience skills, coming in is like shooting fish in a barrel with a bazooka. Too darn easy.

It was a fast-paced week, but the client’s happy, the users are happy, and my boss is happy. I’m going to enjoy the weekend.

Clinical Trials and Tribulations

A humanized flow diagramWorked on a whopper of a project, for Microsoft. My company was picked to help develop a “Solution Accelerator” for the Pharmaceuticals industry, providing a SharePoint implementation template for clinical trials, as well as some InfoPath data-gathering tools.

Clinical trials are enormously complex, regulated, and expensive. We focused on the protocol creation and approval process, which contains aspects of collaborative document authoring and workflow, regulatory submission and approval, etc. I had always thought enterprise software projects were big things, but taking a look at clinical trial protocols helped put that in perspective.

The challenge was to learn a lot very fast, in order to be able to add value. In about five weeks, we nailed down the realities of the process of protocol creation and submission, and I insisted we also focus on the context and goals of the different actors and stakeholders. I designed a nifty cast of characters, which we used in process diagrams to make the workflow come to life. They proved unexpectedly useful.

What happened is that the little sketch you see here helped everybody on the team stay on the same page in terms of user functionality. Developers working on a module could see the gal in the white lab coat and glasses using their module, and they made the interface precise and data-rich. UIs were markedly different, more verbose and action-oriented, for the suit-and-tie users.

I created countless flow diagrams, worked closely with developers to ensure all requirements were covered, and designed the SharePoint UI to host and unify it all. On a project of such scale and urgency, the difficulty was to not let user considerations get buried under the colossal weight of enormous and dense requirements. Tensions ran high, but we delivered, and the client was satisfied with the result.