Mapping China

School of Information Management & Systems
B e r k e l e y


SIMS 213

User Interface Design and Development


Project Overview

Assign 1
project proposal

Assign 2
personas, goals, and task analysis

Assign 3
Scenarios, Comparative Analysis, and Initial Design

Assign 4
Low-fi Prototying & Usability Testing

Project Presentation (powerpoint file)


Assign 5

First Interactive Prototype

Assign 6
Project Heuristic Evaluation

Assign 7
Second Interactive Prototype

Assign 8
Pilot Usability Study

Assign 9
Third Interactive Prototype






Assignment 5: First Interactive Prototype

  1. Revised Interface design

  2. Prototype overview
    • Overview of the UI actually implemented
    • What was left out and why
    • "Wizard of Oz" techniques required to make it work
    • Tools used

  3. Screen shots

  4. Description of how to run the interface and scenarios
  5. Contributions of each team member


Revised Interface Design

The goal of this assignment was to force us to make some hard choices about what to include in the prototype. Goal accomplished! We found, when faced with putting together an interactive prototype, that we had some logical holes in our project concept. Our first idea, back at the beginning of the semester, was to design a portal that would show a myriad of information - maps, news stories, company data, weblogs, etc. Our first revised concept shifted the focus from offering an accumulation of disparate elements to providing users with competitive analyses of high-tech industries. However, from the beginning, our users have complained about the text-heavy nature of websites on China and Chinese companies. We realized that our competitive advantage would be in offering something other resources don't - namely, graphic visualizations of industry and company data.

We therefore redesigned our application to feature geographical maps showing industry concentrations, company clusters, company locations, etc. and graphical visualizations showing company alliances, about which users can bring up more detailed information. We got the idea for showing this information after viewing the Faulkner's Advisory for IT Studies database, which has extensive data on company partnerships, contracts, and products/competitors. We plan to market MappingChina's visualizations to Faulkner's and other entities with text-only data.

We found, fortunately, that this change in scope did not change the foundational functionality of our application too much. We kept many of the pages designed for our low-fi prototype, eliminating the features we are not using (such as the competitive analysis and news stories) and arranging the other data around the maps and visualizations. We still have the same types of pages - Home/Orientation, Search Results, Industry Lists, Industry/Sector Information, Company Information, and (potentially) City Information. We expanded the Company Information pages to show the partnerships and product/competitor visualizations. The one decision that survived intact from our low-fi prototype phase was to make the initial point of contact with the interface a map or other description, rather than a search function.

 



Prototype Overview

Prototype Implemented. The prototype we implemented for this assignment has the following features:

  • Home Page. The Home Page (whose design is still not yet finalized) will describe the site and its functionality. It currently has a general map of China with provinces and major cities outlined. This will orient the user as to the visual nature of the site, a drop-down box with industry categories, and a quick-search function for company names and industry keywords.

  • Industry Listing Page. This page shows expanded industry and sector categories that users can select to then see information on a single industry.

  • Single-Industry Page. This page shows basic textual industry information and a map that will let users view industry activity - industry concentration, company clusters, employee density, revenue concentration, and network coverages.

  • Company Overview Page. The Company Overview Page shows basic company information and a map for viewing branch offices and service areas.

  • Company Relationships Page. The Company Relationships page will be the piece de resistance of our site. It will show a visualization of company partnerships, alliances, and contract relationships.

  • Company Competition Page. This page (which will most likely be merged with the Company Relationships page) shows company products and major competitors.

What Was Left Out. Again, we left out the competitive analysis function and the news stories, since these were superfluous to our goal of primarily providing geographic and graphic visualizations.

Tools Used. Because this assignment resulted in substantial rescoping of our application, we were not able to create a prototype with as much interactivity as we would have hoped. We therefore used PowerPoint and (minimally) Dreamweaver to build our prototype. PowerPoint provides a surprising amount of graphic functionality, letting us simulate the look of our eventual application. Dreamweaver was used to create the interactivity.

The problem with using PowerPoint is that it has no real "power" or interactivity, at least for prototype purposes. It did, however, allow us to mock-up and further refine our interface, which we will implement more fully in Dreamweaver for the next assignment.

 



Description of How to Run the Interface and the Scenarios

At this point, the interactivity of our prototype is painfully minimal due to massive rescoping of the project. We recommend that people doing a heuristic evaluation of our prototype view our screen shots and scenario storyboards for the best idea of how our pages look and function. We have a basic working model of the home page at the following link:

http://www.sims.berkeley.edu/academics/courses/is213/s04/projects/MappingChina/proto2/

A more full description of our application and prototype can be found in this PowerPoint presentation.