The new version of My Yahoo! is now in beta! Go to http://cm.my.yahoo.com/upgrade to upgrade. We have totally redesigned the product packing in lots of new features. We’ve also made the product much more efficient to use. Things that used to require multiple pages to perform can now be done in-line - without ever having to leave your page.
You can choose from over 2 million modules to display on your customized page. To add a module, click “Personalize This Page”. The “Extravaganza” opens (that’s what we call it internally) at the top of your page. You can browse, search and preview modules from the extravaganza. When you find one you like, simply click “Add”.
New Modules
We have added tons of new and redesigned modules to My Yahoo! The new portfolio module let’s you track your stocks, and the new movies module keeps you informed about new movies opening in your area. Many of the modules were designed by the My Yahoo! design team. Others were developed by other groups both inside and outside of Yahoo!
Open Modules
Use My Yahoo! as your aggregator of information across the internet. You can monitor your Facebook friends, check your Netflix queue, and keep track of your Yahoo! and Gmail inboxes.
Customize The Look of your My Yahoo! Page
Choose from over 40 different My Yahoo! themes. We are adding more all the time. Just go to Personalize this page and click “Change Color”.
June 22nd, 2007
Yahoo! Hotjobs
HotJobs was a New York based company acquired by Yahoo! in 2002. In 2004 I was one of the first HotJobs hires in Sunnyvale where the Yahoo! headquarters are located. HotJobs has two major products - the recruiter product, and the job seeker product. The recruiter product had not been updated since it was first built in the late 1990s. It was inefficient to use for recruiters, administrators and sales people. Recruiters have to deal with hundreds of resumes a day, administrators need to be able to add and delete users and change permissions, and sales people need to be able to put together quotes for their customers and efficiently handle billing. HotJobs decided to invest in a new recruiter platform in order to be competitive and grow the business.
March 22nd, 2007
As the name implies, User Centered Design (UCD) is an approach to software design that focuses on the needs of the end user. A user profile is developed that describes the target audience for the application. Next, typical usage scenarios are identified that represent the kinds of tasks users will perform. Design begins with low-fidelity mockups and storyboards, and progresses to interactive prototypes. User feedback is gathered at every stage of the process, and the design is iterated on until it meets the requirements of the end user.
User feedback is gathered via design walkthroughs, customer visits, and usability testing. Because design changes are applied to a prototype, iteration occurs very rapidly. The result is a prototype that serves as a interactive specification for the product.
User Centered Design enables the translation of market requirements into a tangible representation of the user interface early in the development process, before coding of the product begins. This website contains many examples of the application of UCD.
The Design Process
User Interface Design is a process of discovery. Not all ideas pan out. Sometimes a direction will appear promising early on, only to fall apart later when other factors are introduced. This is why it is best to start with “low-fidelity” tools such as site maps, flow diagrams and wireframes. Because low-fidelity designs are quick and inexpensive to generate, there is not a huge investment in them. It is easy to explore different ideas and iterate on them until you feel confident moving to the next level.
Our first example below shows an early attempt to map the organization of the user interface for a web authoring tool. Product Management had created a 150-page requirements document that included the features they felt would be necessary for the product to be successful.
It is not easy to digest a 150-page requirements document. In fact, the document was written by multiple people and contained numerous duplicate and sometimes contradictory requirements. The diagram below shows the distillation of the requirements into a high-level visualization of the organization of the user interface. It was iterated on many times and became a catalyst for clarifying product requirements, as well as the high-level user interface design.
Many questions can be answered using low-fidelity designs like this. For example; What features of the product need to be available in the primary workspace? How many different views are needed? What information should go into property sheets, wizards, palettes, etc?
Low-fidelity designs enable end-user feedback even at this early stage. Most software applications are targeted at tasks that users already perform by other means. For example, a new web-based application might be designed to replace a process that is currently being done using Telephone, Fax, or EDI. In such a case, there is already a process end users are accustomed to. To be successful, the new solution must work better than the existing process. Using domain-expert interviews, and diagrams like this, the existing process can be understood and documented. This information is fed into the design process. The high-level design for the new application can be shown to the same domain experts, and feedback gathered.
Next is an example from a different project that shows one of the alternatives considered for the basic organization and end-user flow of the product. Because the essence of the design was summarized on one page, it was very easy to understand and compare the alternatives.
Next, is an example of a flowchart that mapped out the detailed workflow for a web-based transaction application. This design was iterated on several times before all the major paths in the workflow were captured. Having the end-user workflow visible like this was a tremendous help getting everyone on the team focused. It helped to solidify requirements for, not only the user interface, but also the underlying data model.
November 2nd, 2006
From 2000-2004, I worked at Ariba Corp - one of the early pioneers of B2B software. I worked on a variety of projects, but for most of the time there I was lead designer of Ariba Enterprise Sourcing (Versions 3, 4, and 5) - A product for conducting Sourcing Events (e.g. RFIs, RFQs, Negotiations, etc.) over the Internet.
Below is a screen capture from the prototype for Ariba Enterprise Sourcing. It shows the dashboard for an online Request For Quote (RFQ). An RFQ is essentially a reverse auction where the buyer tries to get the best price and terms from potential suppliers.
From the dashboard, the initiator of the auction can monitor the event, and see the progression of savings over time. All major areas of the product were prototyped. JavaScript was used to simulate the interactive behavior of the product. The prototype was iterated on many times before arriving at a final design. Once the design was agreed on, the prototype code was used as a base for implementation of the real product.
The prototype for Ariba Sourcing served many purposes. It was used in early customer walkthroughs, and in usability testing. Development used it as a specification for the user interface. Quality Engineering used it to understand the correct behavior of the product and to create test cases. The prototype was used to create marketing material and was shown in sales engagements. It was also used by Publications, Training, and Customer Support to create support material for the product.
The next example shows the supplier user interface. This is where suppliers answer questions and “bid” the price they will charge for the goods or services asked for in the RFQ. An RFQ may be very short or very long (dozens of questions and perhaps hundreds of line items). The user interface had to accommodate both extremes and everything in between. The supplier also had to be able to monitor the progress of the auction and revise their bid when necessary.
The next example from Ariba Sourcing is a cost model. Here the buyer can compare different alternatives and determine which one is he most advantageous.
Every medium has its own strengths and weaknesses. An artist working in oils can do things that one sketching in pencil cannot, and visa versa. If an artist tried to use pencil-sketching techniques while working in oil, chances are the results wouldn’t turn out very well. Just like an artist, the designer must understand the medium - i.e. the client technology that will be used in the product. The capabilities of Visual Basic are very different from those of HTML, which, in turn, are very different than those of Flash. When a designer understands the client technology, they can exploit it. This is why it is important that prototypes be constructed using the same client technology as the product.
Below is a simple example of using recent advancements in web technology to simplify the user experience. There are times during a sourcing event when the supplier needs to send a message to the buyer. In a traditional Web 1.0 product the user would click “Msg Buyer” and be taken to a different page where they would compose the message. Here a DHTML window is opened that overlays the window, making the whole experience much less disruptive to the user.
Ariba Enterprise Sourcing 3.0 is what is popularly referred to as a Web 2.0 product. The user selects actions using DHTML popup menus. New information is presented by dynamically updating regions of the page whenever possible (as opposed to navigating the user to a new page). Information presented in tables is dynamically loaded as the user scrolls using AJAX techniques (there is no pagination).
February 15th, 2004
Next Posts
Previous Posts
