X I U   G U O

IBM Expertise Locator App Design

IBM Summer...

This summer I worked as a UI/UX design intern at IBM User Centered Design Service(UCDS) team.

Our team works with the Learning team, ICS design and development team to deliver a range of User Centered Design and Human Factors Engineering activities including developing user profiles, usability requirements, use cases & scenarios, designing and building user interface conceptual models/prototypes, performing early design evaluations, usability tests & surveys, etc. These activities are in support of driving Excellence in IBM internal solutions.

Expertise Locator

Mobile, Tablet, Web...

The project I'm working on is Expertise Locator, which is a people-skill knowledge collaboration project to help seekers quickly find the best fit IBM expertise, maintain a dynamic inventory of professional skills, as well as provide analytics for workforce planning.

I've been involved in pretty much most of the design aspects we have on EL for Mobile, Web and the future tablet version. I designed who connects us mobile version which is a visual display and function for the current user on how he/she is connected with the target user(he/she is looking for), grouping the favorite expertise function which allows the current user categorize and share her favorite expertise. I also worked on the Low fi and hi fi mock ups for EL's web community such as web notification bar alternative design which dynamically alert the system updates and the other user's updates to the current user. Towards the end of the internship, I conducted research and design work on the EL future tablet version and participated in User evaluation and usability testing for our product.

Wall Street Journal recently covered the Expertise Locator mobile app I worked on.(http://lnkd.in/b3gNgHz) Congrats to the whole EL user experience team!


Joined the CIO UCDS CoC Team working on the Expertise Locator(EL) Project
Delivering a range of design activities:
- Designing and building user interface/prototypes, performing early design evaluations, usability tests & surveys, etc
- In support of driving Excellence in IBM internal solutions.

EL project:

- Helps seekers quickly find the best fit IBM expertise

- Maintains a dynamic inventory of professional skills

- Aggregates all the IBM employee portfolios

- Encourages collaboration and communication with the clients and colleagues


-Co-designed the new version(2nd release) of Mobile EL

-EL Web notification bar alternative design

-Who Connects Us mobile visual display

-Grouping and sharing the favorite expertise

-Conducted research and designed the EL tablet version

(suggested new functions: Location map visual display, file share and browse, skills highlights:why this specific expertise)

-NYC Design Lab User Evaluations and Usability testing

The internship experience has given me a practical perspective on UI design techniques that I've learnt in class. This gives me a chance to hit the road running when I start a full time job as I've gained many of the needed skills at this summer internship. For example, working closely on the current project gave me a chance to close examine how we get work done in a industry leading company, how we efficiently brainstorming in a Agile design scrum, how we communicate in a teleconference with people all over the country, and the ethic and attitude IBMers have: helpful, positive, professional. I learned more about my field and industry. And I have a clearer goal on what I’m going to do for my full-time job. (Design artifacts can't be shared due to NDA agreements.)


  • Interaction Design
  • User-Centered Design
  • Graphic Design
  • Wireframing
  • Lo-Fi Prototyping
  • Hi-Fi Prototyping
  • Interview
  • Teleconference
  • Survey
  • Personas & Scenarios
  • Remote testing
  • Usability Test

Wall Street Journal recently covered "Expertise Locator App"(http://lnkd.in/b3gNgHz)

Team Brainstorming

Watson Research Center

Welcome CIO Interns

Vectorworks Designer 2013


The Vectorworks line of software provides professional design software for the AEC, entertainment, landscape design and machine design industries. More than 450,000 designers in more than 85 countries rely on Vectorworks technology. The company is focusing on improving the overall functionality of the 2012 Chinese version and 2013 English version.

Design challenge

The main focus is improving the speed and flexibility of the fundamental design process and after-design presentation process for the Vectorworks 2D/3D designer version.

Focusing on Interactions

By closely working with users and the Quality Assurance testers and core software engineers, I conducted more than 100 usability tests and created user scenarios based on the user interviews and usability test information. By attending training sessions and conferences the company held for both potential users and long-term clients, I was able to interview the users who attend these conferences and training sections. I explored a variety of usability problems and applied creative design ideas by conducting survey, interview and usability test. I also performed a pre-test with the QA team during the process of wireframe and prototype creation. The salient features of improved usability included the following for the designer version 2013 focus on improving the speed and flexibility of the fundamental design process and after-design presentation process:

Panning and zooming improvements are applied in 2D and 3D, so the user can get significantly faster graphics re-draw.
The clip cube provides additional visibility control over large, complex models, allowing users to work on isolated parts within the interactive boundaries of the clip cube.
Users can work in a full-screen perspective view while modeling, with the option to turn on the cropping window when setting up views for presentations.
Rotate tool provides enhanced graphical feedback while rotating objects. A protractor preview clearly shows the rotation center, the axis of rotation, and the rotation lever. This way, the rotation angle can be interactively applied to the user’s selection.


  • Compatative Analysis
  • Interview
  • Survey
  • Personas & Scenarios
  • Interaction Design
  • Prototyping
  • Usability Test

(Functionality testing)

(Finding Presentation)

(Work-in view)

(Work-in view)

(Clip cube view)

(Rotate View)

Facebook Checkin Animation

Please check the Live Site Here! Please try with the people who use place tag often.

The goal is to use information from Facebook and potentially other sources to generate an interesting browser-based visualization of your friends' activities. The overall application supports three critical features: typeahead, path-rendering, and miles calculation.


When the user types into the user search box in the upper left, the dropdown display shows all of the Facebook friends for which the typed strings are prefixes. So, for example, if "ott" is typed the user should see "Otto Sipe" in the dropdown.

Rendered Path

Once the user has selected a Facebook entry, the app will render their checkin history on screen. This entails grabbing the user's checkin history, getting the relevant lat/long pairs for each checkin, and animating them onscreen. The animation follows the "drop icon, move, draw line" sequence.

Miles Calculator

At the bottom right of the browser, a counter displays the miles the Facebook friend has "travelled" so far. It updates as the path is being drawn onscreen.


  • Prototyping
  • JavaScript Programming
  • Usability Test

PCLive Mobile Platform


“PCLive” refers to the digital content management system currently in development for use by Peace Corps Volunteers and staff. PCLive is currently in development and early testing. As users of the platform, Volunteers and staff will be able to communicate, collaborate, and share content from many different devices on a global scale. We as volunteers are asked to design a mobile application for the PCLive Knowledge sharing platform.

Design challenge

The design of access and share information is a big challenge because it needs to not only meet different users' need but also cover different country/environment’s usability issue (e.g. lack of internet access).

Function Scope:

Search(Question): The app assists in searching for specific information and data. Volunteers and Staff can deeply dig into resource areas to find content and holes where content is needed.
Learning(Answer): The app enables continued learning of established technical training and global core competencies. Producing qualified, informed, and educated Volunteers.
Share:The app allows users to easily share relevant information, updates, insights, and announcements. Engaging users in creating a community of practice and collaboration.

Design Principles

Balance VS Emphasis: we need to make sure the app meet the basic needs. Also due to the inconvenient environment in some undeveloped areas, we rank the importance & emergency among the app functions as:
Search > Ask questions > Explore questions & share

Information Flow:

Work Process

Interviewed 6 returned volunteers
Analyzed documents
Brainstorming and design sketching
Paper Prototyping
Made mid-fi prototype for the whole app(1 high-fi screen)

Design Decisions

we decided to enable Offline library service for the users who don’t have Internet access. Also the main functions are:
• Search Resources
• Ask Questions
• Explore Questions
• Manage Profile

We need to emphasis the notification tab because most of the volunteer has very limited internet access time due to the high cost, so we want to make sure that once they get the access, they can check the answers to the asked questions immediately.

Long-term Recommendation

• PCLive should be more than just a website, it should be a system that preserves and refines institutional knowledge.
• Incorporate individual knowledge into the digital library and knowledge repository.
• Take advantage of the accessibly of mobile platform.


  • Wireframing
  • Interaction Design
  • Paper Prototyping
  • Lo-fi + Hi-fi Prototyping
  • Interview
  • Personas & Scenarios
  • Storyboard

(Early Sketch)

(Function structure)





Nomad: Cloud Service Mobile App

What is Nomad

Nomad is a cloud service mobile app which allows user to share files created using Vectorworks 3D software and to make design decisions from any location. Changes to Vectorworks files will automatically be synchronized to the private cloud storage, allowing user to browse and share the latest designs from any web-enabled device. For long-term goals, Nomad Vectorworks Cloud Services will also save user’s time by providing a cloud-based workflow for creating presentations and shifting calculations needed to generate sections, elevations, renderings, and BIM data from the desktop to the cloud. The product is designed for the iPhone and iPad. I was part of the UX team that designed and tested the mark-up, email, share, print functions. I also tested the main functions including the mark-up’s usability and the file mark-up saving process.

Defining the Design Rationale

• Access Anywhere: The Vectorworks Nomad app gives the user the ability to not only to share files, but also to make design decisions from any location.
• Compute in the Cloud: Vectorworks Cloud Services uses cloud technology to automate and decouple inefficient workflows, shifting calculations needed to generate sections, elevations, renderings, and Building Information Modeling (BIM) data from the desktop to the cloud.
• Store: Store the files in the cloud and access them anytime and anywhere with up to 5GB of free storage for Vectorworks Service Select subscribers. Changes made to Vectorworks files at the desktop are automatically synchronized to the private cloud library, allowing users to browse and share their latest designs from any web-enabled device.

Designing the improvement

After conducting comparative analysis, I collected current competitors cloud service functions and compared with what we have for nomad. I found that one of the most used function is easy to access and share, assuring real-time update. So I need to focus on the improvement of interaction design on this aspect. The user’s review on different functions is also a big source for defining the re-design and re-testing process. I worked closely with the software engineers to perform tests and recommend usability improvements for the app and website. Some of them included the following:

Interactions with a native iOS application that supports common touch gestures.
Email the exported files to interested parties from the iOS device since use require easy to share function with third parties
Create markups with Text, Freehand, Oval, Rectangle, and Line tools.
Take measurements easily using the Tape Measure tool, this is a new feature added for civil engineering and constructors to quickly add markup measurement to the file.
View all exported Vectorworks files through any web browser: the team spent a lot of time conducting usability testing for the cloud website on different browsers on a variety of functions performance.
Email the exported files to interested parties from within the Vectorworks Cloud Services portal by selecting the email icon next to each file listing, which will increase the flexibility and time efficiency.


  • Wireframing
  • Interaction Design
  • Heuristic Evaluation
  • Prototyping
  • Graphic Design
  • Interview
  • Personas & Scenarios
  • Comparative Analysis
  • Usability Test

NodeXL: Service and Product Evaluation


NodeXL is an open source Excel add-on that makes gathering, analyzing and visualizing network data possible for a wide variety of users across many disciplines. The primary function of NodeXL is to create graphic representations, or network graphs, from network datasets. NodeXL’s network graphs help individuals perform network analysis by providing visualizations that are straightforward and easy to decipher. From these visualizations, one can quickly gather a variety of insights about a network, ranging anywhere from in-depth content analysis to simply determining who the most central figure is.

The goal

Based on our initial client interview, our goal was to evaluate how NodeXL can be improved to make it easier to use for new users. With the ultimate goal to make NodeXL, in the words of Marc Smith, “the just do it button,” that would automate the creation of a graph and facilitate the use of NodeXL for novice users.

Target demographic: People who are familiar with network analysis, and new users who have never conducted or are new to network analysis.


Interaction Map

We experienced generating a static representation of the system or service. This representation made salient all the possible actions, and all the respective error and non-error “states”. Through this process, we got a general understanding of a product through use and exploration; a thorough understanding of its scope and variation needs a more systematic approach.


Interviewed 5 students, who have some previous social network analysis experience, in order to learn about user needs regarding network analysis tools. Please check the Interviews & Personas & Scenarios Report Here.


From a random sampling of NodeXL twitter followers, disseminated by the client, we surveyed 29 individuals, which provided details on current users’ needs, motivations, and attitudes regarding NodeXL. Please check the Survey Analysis Report Here.

Comparative Analysis

NodeXL was compared against Gephi (direct), IBM Many Eyes (partial), Google Spreadsheets (parallel), and Wordpress (analogous). The comparators provided insight as to how NodeXL stacked up against the competition, as well as areas of improvement that NodeXL could adopt from its competitors. Please check the Comparative Analysis Report Here.

Heuristic Evaluation

Via 5 individual passes and 1 group assessment, NodeXL was scrutinized utilizing Nielsen’s ten heuristics, to uncover the areas that require the most improvement. Please check the Heuristic Report Here.
● Feedback: Visibility of system status
● Metaphor: Match between system and the real world
● Navigation: User control and freedom
● Consistency and standards
● Prevention: Error prevention
● Memory: Recognition rather than recall
● Efficiency: Flexibility and efficiency of use
● Design: Aesthetic and minimalist design
● Recovery: Help users recognize, diagnose, and recover from errors
● Help and documentation

Usability Testing

Conduct 5 usability tests with users who had previous network analysis experiences but did not have NodeXL experience. From observing the users during the testing, we were able to confirm our previous findings. Please check the Usability Report Here.

Findings and Recommendation

(criteria for inclusion: severity, repetition, feasibility)
Finding I

(Popped up during interview, survey, comparative analysis, and heuristic evaluation)

NodeXL does not work and/or provide all the features and functionality users expect from network analysis tools. Evidence included, among others, a lack of visualization diversity and interactivity (NodeXL only provides linear connections options), no automatic graph refresh, a lack of undo options, complicated data import and the like. For example, something as simple as importing a worksheet, requires that worksheet to be open.

Recommendations for Finding I

The comparative analysis was very useful in providing clues as to how NodeXL can be improved. Open source software like Gephi’s back end code, can be consulted to illustrate the variety of ways in which the previously mentioned problems can be addressed. If Excel’s built in undo/redo features cannot be altered consider implementing a separate set of undo/redo buttons on the graph pane. Some software, like Adobe CS, provides the user with a running history log. This undo history allows users the ability to return to any previous state they want. This feature would provide ultimate flexibility, although it may not be completely necessary. Cosmetic changes which can be immediately applied, could include condensing the import laundry list to be grouped by social media platform.

Finding II

(Popped up during Popped up during comparative, heuristic and usability testing)

Although an Excel plugin, NodeXL does not fully behave like a plugin, nor does it fully behave like a standalone product. This presents a significant barrier for new users who must struggle with interpreting NodeXL features from Excel features. Users must access NodeXL via a template rather than directly from Excel. Terminology is also a deterrent for new users as it is unclear whether certain functions are NodeXL terms or Excel terms. Another example is the ribbon, which can due to issues with semantics, repetition and icons. For instance, the use of Excel icon thumbnails that does not always replicate its Excel counterparts and at times are difficult to decipher.

Recommendations for Finding II

The most pressing change would be to more fully incorporate NodeXL into Excel and revise the ribbon taxonomy and icon use to fully clarify its use. Icon use should be standardized and not duplicated. Short term cosmetic changes could also include clarifying tool tips to provide better information.

Additional Findings
Please check the reports. Interviews & Personas & Scenarios Report Here.
Please check the Survey Analysis Report Here.
Please check the Comparative Analysis Report Here.
Please check the Heuristic Report Here.
Please check the Usability Report Here.


In part our findings were chosen based on the practicality of their implementation. Therefore, findings revolving around the robustness and efficiency of the software were not discussed (such as platform diversity), as well as outreach and community efforts (like discussion boards). While some of these recommendations may not be immediately implementable, they will go a long way towards easing the use of NodeXL for new users.


  • Interaction Map
  • Interviews
  • Personas & Scenarios
  • Surveys
  • Comparative Analysis
  • Heuristic Evaluation
  • Usability Testing


  (Interaction Map)

  (Personas & Scenarios)


  (Comparative Matrix)

  (Heuristic Evaluation Aggregated Matrix)

  (Usability testing: Cluster by group)


TripBird Mobile Interaction Design

Defining the problem

When people have a chance to travel, they need to use the limited time and money to make the trip as interesting as possible. The easiest way to learn the useful information is from other’s experiences. A community function like what Instagram provides should be available to people to share their travel information in a simple and convenient way.

Project Focus

1. The design focuses on how to provide an easy to use function that allows users to collect information and plan the trip in advance.
2. It will also focus on how to create an open sharing environment for all travel lovers to record and share their trip.

Focusing on Interactions

Design process:
• Bug List + Design Approaches
• Sketching Alternatives + Brainstorming
• Concept Map
• Scenarios and Storyboards
• Wireframe
• Paper Prototype + Write-Up
• Digital Prototype v1
• Design Critiques and Digital Prototype v2
• Digital Prototype v3

Focusing Interactions

Please check the Axure prototyping here.

Search function--information collection before trip:

After the user inputs the destination name, two ways of information exploration are provided: One is reading through the other people’s mini diary. A mini diary is a trip photo diary created by the user who has been to the destination. Basically it is a photo gallery with minimal description of the photos. Tags (hotel, restaurant, attraction, shopping) of the photo and a map view is attached to the photo when the user takes the photo and puts it into the diary. Another user can check the map view and add the place to his/her list.

The other one is searching via photo category. A ranked list of one photo category will be provided based on the pictures’ frequency so that the user can learn the popularity by a quick glance of this list. A map view of the destination is also provided. If a destination like a restaurant, a hotel, a attraction is interesting to the user, he/she can simply add the destination to his/her collection list for further reference.

Both way can go to a detailed map view a user can simply add the address to the checklist and sync the list with GPS.

(Diary list --> single Diary)                                                  (explore by tags --> ranking list)

Share function--information sharing during trip

Creating Mini trip Diary: Share the trip

The design for the sharing function is unified in the trip diary which is a mini diary composed of pictures a user takes during the trip. In this way, the mini diary can show up in other user’s search results and just by looking at the short picture gallery, a user can gain general knowledge of what other people do at that destination. A Trip diary has a title, its duration and each day's schedule along with photos of the destinations.


  • Bug List + Design Approaches
  • Sketching Alternatives + Brainstorming
  • Concept Map
  • Scenarios and Storyboards
  • Paper Prototype
  • Digital Prototype
  • Usability Test

(Sketching Alternatives)

(Paper Prototype)

(Map view)

(Mini Trip Diary)

(Add Photo + Add Tag)

(Add Tag)

(Creat Trip)

Library in Hand: Rhea

In order to better serve the students in collecting, organizing, preserving, communicating, and sharing the various resources available to patrons of the library system, we propose Rhea, a mobile application that aims to help library users to better manage their UM library activity. This application is designed for regular library users, especially students who forget due dates and incur penalties. It mainly functions as a reminder to remind the users of their return date, overduefines, waitlists, reservations, ordering and renewing. In addition, it also performs basic functions of a library information system, such as displaying general information of the borrowed materials and related loan policies.


Based on our research, we discovered several key findings that exist in the process of borrowing, reserving and ordering items from UM library. Students sometimes are heavily fined for a certain type of overdue material (such as DVDs and textbooks). But the UM library notice system sometimes fails to inform students of the status of the items they borrowed, reserved or ordered, which may cause students to get confused.


Based on these findings, we focused our design scope on the problem that MLibrary fails to effectively inform students of their borrowed items due dates. We decided to solve this problem by creating a small mobile application. We think that a library reminder app could make MLibrary resources or services more mobile and serve users better. At present, the library only displays loan status information on the webpage under the user’s account, and simply sends notices to the user’s email address. Compared to email notice, a mobile application with multiple reminding functions is more effective. Our target user group is composed of active student users of Mlibrary, who have busy schedules (which makes it easier to forget about borrowed items). The user can personalize the settings to pick the most comfortable mode. The users don’t have to worry about missing the email notices when they have a lot of emails to handle and manage daily because they have this mobile application with desirable features: easy to check, and instant reminders.


  • Interaction Map
  • Interviews
  • Personas & Scenarios
  • Comparative Analysis
  • Lo-fi + Hi-fi prototype
  • Usability Testing


  (Interaction Map)

  (Personas & Scenarios)

(Hi-fi reminder)

(Hi-fi reminder)

Contextual Inquiry for CEC


Clean Energy Coalition is structured around three divisions – Mobility, Structures, and Communities – consisting of a Division Manager and Project Managers, as well as an Operations team that supports the entire organization.

However, due to the organization’s recent increase in size, the existing division structure has become obsolete and actually prevents communication and collaboration between divisions. Innovation and creativity through collaboration are part of the organization’s central values, so something had to be done to increase collaboration between the divisions. Our task in this project was to use the methods of Contextual Inquiry to gather data in the context of CEC's work practices, use the data to build models describing key aspects of their organization, identify breakdowns that impede them from open communication between the three divisions, and ultimately recommendations based on our findings.


  • Contextual Inquiry
  • Interview
  • Interview Interpretation
  • Affinity Notes
  • Affinity Diagram
  • Models
  • Model Consolidation
  • Design + Recommendation

(Artifact Model)

Interviews and Models

We conducted 8 contextual inquiry interviews. We encountered some difficulty in our contextual inquiry process as most of the work employees of the CEC do is off-site, and we could not observe that work. We overcame this obstacle by creating a set of highly detailed and open-ended interview questions to get at the information we needed. There were some times when we were able to observe work being done while we were at the CEC, and this provided us invaluable insight for our project. These interviews were followed up with interpretation sessions in which we pulled and interpreted data from our interview notes in order to create affinity notes.

We then made 6 different kinds of work models from these affinity notes for all the interviewees:
cultural assessment model
• artifact model
• physical model
• flow model
• sequence model
• cultural models

(Cultural Consolidation Model)

(Flow Model)

(Affinity Workthrough with CEO)

(Physical Model)

Model Consolidation

We created individual work models for each employee we interviewed and then created one consolidated model for each type of model. These helped us see processes and, more importantly, breakdowns within the CEC.

Affinity Diagram

Our group then made an affinity diagram with the affinity notes from our interpretation sessions. In this affinity diagram, we organized the data to uncover important findings. When we arranged the data hierarchically and let it “speak” to us, we were able to find out what the CEC values and what larger issues needed to be addressed.

Design Ideas and Recommendations

After these tasks were completed, we brainstormed recommendations to address those issues by creating a fishbone diagram and an achievability-impact graph. We chose to focus only on those recommendations that we thought would have the highest impact and achievability.

• Company-wide project management system
• Company-wide client management system

Our recommendations for cross-division project management should 1) track projects, 2) be visible to all employees, 3) include employee skill set profiles, and 4) assist with efficiently assigning tasks. The company-wide client management system should be able to store client contact information and the history of projects and contacts as well. After analyzing the cost and the benefits it can bring to the company, we choose Google Insightly as our recommended application. It is an efficient assistant tool, which can be integrated with the other Google Applications that the CEC are using right now. It also can work with the database system the CEC uses to store documents. We recommend that the CEC implement the applications in one division for a short term and, depending on how the employees like it, consider expanding the application company-wide for the long term. We also recommend hiring a professional application maintainer and developer to customize the application based on the CEC’s needs.

• Suggestions for physical space

In the short term, we would like to see the Mobility team incorporated into the downstairs workspace. A more long term solution – in the sense that it will take more time to implement – is to turn the upstairs annex space into an “Innovation Lounge” and create more collaboration spaces for three to four people.

• Weekly staff meetings
• Monthly mandatory in-office day

In the short run, we agree with the CEC’s push to restructure the staff meeting so they can be used solely to discuss company-wide issues. This idea is reinforced by an employee’s comment regarding meetings as serving to connect divisions through education and learning. Furthermore, we want to retain the importance of keeping employees up-to-date regarding current projects and events across divisions. To accomplish this, we propose that, in the long run, the CEC can implement a mandatory monthly company-wide meeting.

Graphic Design



Prezi Animation for Marc Chagall. Click here to see it online.

D.I.Y. Clock: Android App Design & Development

What is D.I.Y. Clock

Smartphones are probably the most personal of all the computing devices out there. With D.I.Y clock, I've added another dimension to personalizing a mobile phone. A user can see the time in his/her own handwriting, and in his/her own language. This clock widget is font-independent and language-independent. (Watch the Demo here.)

Design Process

The app has to gather a set of numbers to display the time. Instead of collecting numbers for all possible values a valid time can take, I simply decided to collect the numbers 0 - 9. The app basically asks a user to draw these numbers on the UI. Then these numbers are composed to form the current time. Therefore, this design involved a reduction of the problem space. Data collection had to be made as fast as possible to maintain an enjoyable user experience. No one likes to spend too much time configuring an application. Once a logical idea for the app was established, I set out wireframing possible app screens. In keeping with the UI guidelines for smartphones, I utilized the grid design pattern. This is the first screen a user sees when running the app for the first time. It is initially filled with the numbers 0 - 9 in a standard font. The design also incorporates the feature that when a grid item is clicked, it opens a new window showing detail and the ability to modify the digit with a users own handwriting and language. This pattern is the same as the standard Photo Viewer app. This no extra effort is required to learn how to use D.I.Y clock.

Once the wireframes were ready, I set out designing them in XML. Finally, I wrote the logic to split up the current time into digits and then picking up the appropriate user drawings and recomposing them to form the current time.


Energy is a major issue on smartphones. The app should not consume too much power. To tackle this, I make use of standard Android power saving features like disabling app updates when the phone is sleeping. When the phone wakes up, the app is immediately updated with the current time.

Some users may draw images of different sizes. This results in the final composition not being coherent and visually appealing. To handle this, guidelines have to be provided in the drawing window that visually guide the user on the size of the digit.

Ongoing Work

• I'm working to provide different stroke styles and colors. Length-Width varying strokes will have a better visual impact.

• Provide different decorative elements.(e.g. Provide backgroup image and personal pictures as the decorate element to   enhance with the D.I.Y. theme.)

• Expand the D.I.Y idea to more field such as D.I.Y. Calender, handwriting Notes on Apps.

• Deployment to the Android App Store


  • Wireframing
  • Interaction Design
  • Prototyping
  • Java Programming
  • Mobile UI design

(D.I.Y clock run on Android Phone)

  Idea Expanding:

(Idea 1: Handwriting reminder)

(Idea 2: Handwriting signature)

(Idea 3: Handwriting notes)

(D.I.Y clock run on Android Phone)

About Me

Design is a plan for arranging elements in such a way as best to accomplish a particular purpose. --Charles Eames

Xiu Guo is my name, I am a graduate student in School of Information, University of Michigan. My specialization is Human-Computer-Interaction(HCI), and I will graduate in Dec 2013. I also have a B.S. degree in Computer science, which helps me develop a through understanding about technologies. I am passionate about designing products that are intuitive and efficient to use, and I believe good designs can make people's life easy and happy.

Graduating in Dec 2013, I am currently pursuing a full-time position in Interaction Design / Experience Design. Please do not hesitate to download my resume or to get in touch with any inquiries!

Design & Illustration

  • Adobe Photoshop
  • Adobe Illustrator
  • Axure RP
  • 2D/3D Vectorworks
  • DreamWeaver
  • Flash
  • OmniGraffle
  • Web Design
  • Graphic Design
  • Interaction Design


  • CSS/CSS3
  • Java
  • JavaScript/jQuery
  • PHP
  • MySQL
  • Python
  • Google App Engine
  • Drupal
  • Wordpress

UX Methods

  • Wireframing
  • Prototyping
  • Usability Testing
  • Contextual Inquiry
  • Heuristic Evaluation
  • Comparative Analysis
  • Affinity Diagram
  • Interviews/Surveys
  • Personas & Scenarios
  • Interaction Maps

Related Coursework

  • Interface and Interaction Design(SI582)
  • System and Service Evaluation(SI622)
  • Contextual Inquiry(SI501)
  • Complex Web Design(SI539)
  • Graphic Design(SI520)
  • Fundamntls of Human Behavior(SI588)
  • Database App Design(SI664)
  • Info Visualization(SI649)
  • Adv Proj & Soc Cmp Des(SI694)

Contact Me

Email Me at xiu [at] umich [dot] edu

Check My Resume