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 9: Third Interactive Prototype (Final Writeup)

  1. Problem statement
  2. Solution Overview
  3. Personas and Scenarios
  4. Describe the Final Interface Design
    • Describe the functionality
    • Provide a description of the main parts of the interaction flow.
    • What was left unimplemented?
    • Tools you used to develop the system
  5. Design Evolution
    • Describe how your UI changed from initial sketches, low-fi testing, HE, and final usability test.
    • Show what the major changes were and why they were made.
    • Describe which of the three evaluation technique (low-fi prototype run-through, heuristic evaluation, pilot
    • usability test) was most valuable to your prototypes usability and why.
  6. Link to class presentation [download the *.ppt]
  7. Work distribution table


1. Problem statement

2. Solution Overview

For purposes of demonstrating our project, we have created a web site that interacts with a database to extract and display industry, sector, and company data. We feature overviews and discussions of trends for industries and sectors, lists of key players, market breakdowns by sector and company, and company data (descriptive text, statistics such as location, URL, stock ticker symbol, market capitalization, and number of employees, and top competitors).
Our interactive data visualization tool lets users explore the following relationships:
• Competitive relationships (companies providing products and services with similar features targeting the same market);
• Joint venture relationships;
• Mergers, acquisitions, and divestitures;
• Strategic affiliations between companies; and
• Contractual relationships (companies licensing major products or services from other companies).
With our tool, users can get an overview of:
• The different sectors in an industry;
• The major player(s) in those sectors;
• How one sector compares to another in terms of market capitalization and number of companies;
• How sectors are related (i.e., do the companies in one sector have relationships with companies mainly in another sector?); and
• Those companies with more relationships than others.
Users can also view deal specifics (dollar amount, date of inception) and product names and descriptions.
Our visualization will help users see non-obvious information that cannot be found easily using text-based tools, such as the patterns of relationships companies or sectors have with other companies and sectors, and which sectors offer the best entry to the industry.

3. Final Personas and Scenarios

We targetted young entrepreneurs specifically because they

  • tend not to have very many contacts in the field (in China) or in-depth familiarity with the domain,
  • limited funds to afford the access fees to the expensive market research databases and industry reports
  • need to move very quickly in targetting niche markets, partners and potential solutions.

Our sample users reflect different needs for data and diagrams, language limitations, and degrees of knowledge of China. Our personas try to address each of these parameters. Below is the persona of our lead user, “James Kwong.”. Our primary and secondary users share several characteristics, including a lack of trust in online data that does not come with explicit credentials, the desire for quick, graphical data overviews, and the capability to drill down for more details.

Persona

James Kwong
30-year-old second-year male MBA student

James is an aspiring technology entrepreneur who is thoughtful and directed. After receiving his bachelor’s and master’s degrees in electrical engineering, James worked as a computer chip designer before moving over to product marketing and sales, where he found his true calling. His goal after graduating is to start his own business — he has many ideas for high-tech services, applications, and products that he would like to develop and market. He is interested in the high-tech market in China because that’s where the greatest opportunities are taking place.
Although he was born in Taiwan and speaks Taiwanese and some Mandarin, James’ family moved to the United States when he was very young, so he considers English to be his native language. He feels most comfortable and confident communicating in English for business purposes. For this reason, he wants to interact primarily with the American affiliates of Chinese companies, since GuanXi and speaking Chinese are essential to doing business with Chinese companies.
When he first got into marketing and sales, James attended many networking events and conferences. Now that he is more knowledgable about the field, he doesn’t go to as many events, but his contact network is still a primary source of industry information. When James hears about a trend or wants to learn more about a particular company, he will do some basic internet research and then call up people he knows to get more information. James wants to know more about the smaller high-tech companies in China as well as who they’re affiliated with in the U.S. so that he can evaluate them for partnerships or as competitors. He plans to live and work in the U.S. but travel to China regularly.
James’ goals:
• Understand the interrelationships among American and Chinese companies.
• Find out a particular company’s specialization.
• See where industry concentrations are located geographically in China.
• Find out who the key players are in each industry.
• Get contact information for companies, both American and Chinese.
• Find out information on professional organizations in China.
• Use a China MapQuest to help.

Scenario

James is a 30-year old enterprising first generation Chinese-American. He moved with his family t from Guangzhou, China to Michigan when he was 13. James completed his MBA a year ago, after working for 4 years as a software engineer at an Internet software company. During his MBA, he flushed out the business plan for a software game idea on the mobile phone platform, and befriended a couple of Chinese-American engineers with whom he’s been working on creating a startup to launch this game. They would like to launch the idea in China, as its both a strong mobile gaming market, and because of his team’s advantage knowing the language and culture.

As the strategy guy for his team, he wants to find out what companies are active, and especially those leading the market, in China. He wants to both understand the competitive environment and form the obligatory social and business networks before fully bringing his idea to market. To map out his market entry options, he also wants to know which American firms are actively involved in China’s wireless telecommunications industry, and how they are working with Chinese companies to deploy their solutions.

He heard about Mapping China through one of his acquaintances in the Silicon Valley Chinese Wireless Association and has been sporadically using it since starting his MBA, to track the wireless market. Today, he enters the Mapping China URL in his Internet Explorer browser and selects Wireless Telecommunications from the Industries selections. He quickly skims the overviews for each of the sub-sectors to refresh his memory, but is especially interested in the pie-charts depicting the market share by leading company. Things change so fast in China that these dynamic charts have been useful to quickly summarize the ever-changing competitive landscape.

He peruses potential value chain partners to further explore in greater depth later. Interested in the latest news with China’s leading wireless operator, he selects China Mobile for that company’s summary. However, he doesn’t have too much time today to read it all, so he selects the visualization option. This pops up a new browser window depicting China Mobile’s large network of relationship with other companies.

He peruses the Chinese and foreign companies with whom China Mobile has its key relationships, knowing that everyone wants to partner with China Mobile if they want to enter the wireless space in China. (Viewing all of China Mobile’s relationships – primary and secondary -- would be very messy!). He also does this with leading vendors in the handsets and wireless (middleware) software sectors. To peruse the potential competition, he also looks at profiles for leading companies in wireless content and applications.

 

4. Describe the Final Interface Design

Because we were limited by the SIMS final project schedule, not all of the design specifications we envisioned were completely implemented in the working prototype. We had to eliminate the geographic visualizations in favor of more fully developing our user interface design and relationship visualization, which we decided was our application’s most important feature.

Our final user interface design consists of the following elements:
• home page with company quick-search function, industry drop-down selector box, links to lists of companies (alphabetical and by industry), and short-cut to relationship visualization (general industry visualization);
• company search results page with industry/sector affiliations;
• industry overview/trends page with links to industry sectors;
• sector overview/trends pages with market share breakdown and list of companies in that sector;
• company profile pages with business and financial summaries, key statistics, top competitors, contact information, and link to relationship visualization (company-focused visualization);
• relationship visualization showing

  • industry/sector associations;
  • market size of sectors;
  • competitive relationships between companies;
  • joint venture relationships among companies;
  • company mergers, acquisitions, and divestitures;
  • strategic affiliations among companies;
  • contractual relationships;
  • product information; and
  • key company statistics.

5. Design Evolution

Our design has gone through several iterative rounds of design and testing increasingly refining a feasible scope given our time and resource limitations. Our original Low-fi design helped define an initial scope for our project as offering competitive information. Our second (interactive) prototype defined our differentiating factor -- the data visualizations -- but with perhaps to broad and ambitious an offering. It has become the grand vision for our project, should we move ahead further with it. Instead, we focused on the implementation of one of the visualizations, that of the company and industry sector relationships.

Low-Fi Prototype Design and Testing

Picking up on a common goal of our users, we chose to focus our first design prototype on providing a quick competitive overview of the wireless telecommunications industry in China. Such analysis would not only supply summary information about an industry or sector but also identify supplier, customer, partner, and competitive relationships (a “five forces” analysis). There currently appears to be no simple, online way to accomplish this. Current alternatives include loosely structured Internet searches (typically using Google) and phoning industry analyst friends (as described by Stella, one of our sample users). We also presented mapping features, news feeds, and general city information. We devised two major design concepts, one resembling a portal (Prototype A) and one centered on a search function (Prototype B). (See Appendix H for descriptions and screen shots of these prototypes.)

Because we were still refining the scope, our primary goal for the “low-fi” design and testing phase was to put our ideas into an interface context — make them “real” — and then get feedback on content and placement. While we didn’t apply any formal metrics to the test and responses, we looked to users to shed light on a number of issues:

• what users thought of the “five forces” business analysis concept;
• how users wanted to enter the site, either through a portal or a search interface;
• how intrigued people were by a mapping feature;
• what things users would like to see mapped;
• how helpful news is and how is it best categorized and displayed;
• whether city information is useful; and
• how users would use a search function.

Our tests also provided us with crucial basic information, such as the need to use the same web page format for industry, sector, and company overview pages, group relevant information currently in a sidebar with the main page, and provide a more hierarchical and apparent way to “drill down” for information.

The most important result of our usability testing was seeing which features users viewed as most central to our application. We offered mapping, job information, news, and general city information as well as industry analysis, and the consensus seemed to be that if “five forces” or competitive analysis was the key component of our tool, we should dispense with some or all of the other features. Our users’ reactions and feedback shifted our perspective back to focusing on this core element.

Based on this and other observations, we ranked the various features in terms of importance:
1. competitive industry analysis / efficient, flexible search function
2. news
3. maps

This ranking drove further refinement of our design. We merged the home pages of the two prototypes and more prominently featured the industry analysis element, better-classified the industry categories, and honed our intended searching function to allow users to search within selected keyword categories. We also began to develop a more interesting and sophisticated way to visualize and implement the competitive analysis. We eliminated the “City” section of our site and reevaluated how we’d present news. We began to think about better, more apparent ways to hierarchically structure industry and company information and refine the list of data we wanted to include for each. At the most basic level, we standardized the design of the pages and considered how to present them, whether as pop-ups or other panes or by using frames.

First Interactive Prototype

We found, when faced with putting together an interactive prototype, that we had some logical holes in our project concept. We had shifted our focus to providing users with competitive analyses of high-tech industries. However, from the beginning, our users have complained about the text-heavy nature of web sites on China and Chinese companies. We soon 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. as well as graphical visualizations showing company alliances, about which users can bring up more detailed information. We came up with the idea for showing this information after looking at the Faulkner’s Advisory for IT Studies database, which has extensive data on company partnerships, contracts, and products/competitors. This met one of the user needs we identified in the needs assessment phase, which was to see which companies were working together. We also considered adding quantitative visualizations such as pie charts and other graphs to better help users understand the market make-up of industry sectors.

We found, fortunately, that this change in scope did not substantially change the foundational functionality of our application. We kept many of the pages designed for our low-fi prototype, eliminating the features we decided not to use (such as the competitive analysis and news stories) and arranging the other data around the maps and visualizations. We still had 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.

Please see our Master's Final Project report for details on the design of other components of the project.

Second Interactive Prototype

For our second interactive prototype, we looked to build different ways of displaying the text- and number-heavy data offered by financial services web sites such as IDC, Yahoo!Finance, and Faulkner’s. We had solidified the functionality of our site to offer three types of visualization for this data: geographic, with maps showing industry concentrations, locations of high-tech parks, etc.; relational, with network diagrams showing company relationships with strategic partners, parent companies, and competitors; and quantitative, with charts showing market share, subscribers, total revenue, etc. The main differences between this and our first interactive prototype were:

• A third type of visualization — our earlier prototypes showed only geographic and/or relational visualizations. We revisited our user feedback notes and discovered that some users would like to see quantitative data represented visually, such as which companies held how much market share in a particular industry/sector.
• No city maps — we eliminated this function, as it fell outside the scope for this phase. At some point in the future, offering this kind of mapping function (a kind of MapQuest for China) might be helpful, but that will need to be more fully evaluated.
• Table listing details of the relationships shown on the relational visualization — users might like to click around the visualization to explore the company links, but might also like to see all information (by relationship category, such as strategic alliances or competitive relationships) laid out succinctly, and together.
• Single page showing industry lists, company name search box, and search results list — this would be a more efficient use of page space, eliminating superfluous page loading for users.
• Sidebar showing the logos of our data partners — we had decided to try to market our visualizations to companies like IDC, Ovum, and Hoover’s; hence, it was important to indicate that our data would be drawn from these companies.

Visualization Development

The goal of the interactive geographic, relational, and quantitative visualizations was to help users gain an understanding of the wireless industry in China by seeing the geographic location of companies and industry/sector concentrations, the various relationships companies had with one another, and the market breakdown of sectors by company. We narrowed down the data we would show as follows:

Geographic Visualization
The geographic visualization would be demonstrated through maps of China. This type of visualization would map industry, sector, or company data, in the following ways:
• Distribution and concentration of all or selected industries
• Distribution and concentration of all or selected sectors in one industry
• Distribution (scatterplot) of all companies in a sector
• Location of a company, its branch offices, and its suppliers/distributors

Graphically, industry/sector concentrations would be marked on the map by a circle, and the size of the circle would be determined by the market size of the industry or sector in that area. An algorithm would be formulated to display the circles. When the user zooms on a sector, the sector circle will expand and display all the companies in that sector.

Relational Visualization
The relational visualization would be demonstrated by a social networking graph written in Flash that would map company data, in particular company relationships comprising:
• Strategic alliances:
- Mergers/acquisitions/divestitures
- Major alliances and joint ventures
- Contracts
- Competitive relationships

We looked at social network analysis tools and implementations to get ideas for how to design this visualization. Most showed only one relationship, such as connections in a Friendster network or nodes in a computer network. However, our visualization needed to show different kinds of relationships in order to make the application useful. At this point, we weren’t sure we could apply a traditional social network analysis to our company relationship tool, but we liked the simplicity and clarity of such visualizations and decided to give it a try.

Quantitative Visualization

The quantitative visualization would be demonstrated by a pie chart showing the percentage of each company’s representation in a particular sector. The visualization would depict sector and company data. Percentage representations would be by:
• Market share
• Total revenues
• Capital expenditures

Pilot Usability Test

The purpose and rationale of our pilot usability study was twofold: to see how the design, content, and navigational flow of our second interactive prototype performed with three proposed user task scenarios, and to formally test for the first time our relationship visualization. We were particularly interested in seeing how users liked the tool overall, how intuitive they found the control buttons and symbol legends, and what problems or bugs they might uncover.

The test measures we used were time and number of errors. We timed each participant for how long it took to complete each task scenario as well as each visualization task. “Errors” were considered to be a glitch of some sort in the navigation or functionality of the site, not user errors. These “error” events will be used to make design improvements to the interface.

We learned a number of things from the pilot usability study:
1. There are differences among users and their computer abilities and aptitudes. More advanced users tended to figure things out on their own; lower-level users became frustrated more quickly with some of the tasks.
2. We needed to make the site more clear, both in terms of navigational flow and content description. The visualization might be simplified, with different views clearly described and features parceled out among the different types of views, rather than having a lot of data shown at one time.
3. We discovered that timing the task scenarios didn’t give us any usable metrics because the users all progressed through the site at their own pace. Timing reflected the user’s personality more than the functionality of our site. The visualization test timing was a little more successful, as users had already worked through the task scenarios and so were more familiar with the site’s functionality; but task times still reflected the willingness of the user to complete the tasks. One user abandoned tasks more quickly than the others.
4. All of our users felt that the site’s content, other than the visualization, was too generic to be truly useful. They wanted more in-depth analysis. But all could see the value of the relationship visualization feature.
5. Many errors were caused by bugs in the coding. For future testing, the prototype should be as highly functional as possible.

Final Prototype

We modified the graphic design of our final prototype to be more consistent with that of our visualization. Features of our final prototype include:

  • Data visualization
  • Industry overviews and relationships
  • Major players by industry
  • Company data and relationships (parents/subsidiaries, partners, competitors)
  • Resource links (URLs, government info, associations, conferences)

Here are some selected screenshots from our final prototype:

MappingChina homepage

search results

view companies by industry sector

industry profile

sector profile

company profile

view company list

company visualization (opens in new window)