Page 1

Work Sample


Doris Ding UX Researcher | Web Designer

864-624-7638 xued@g.clemson.edu www.linkedin.com/in/doris-xue-ding 1146 Old Central Rd Apt 307 Central SC 29630

Professional Skills

Portfolio

UX Research & Usability Testing

www.behance.net/xued

Skill Assessment Manager (SAM) Online Help System Usability Testing Cengage Learning at Boston, MA | 2017 - 2018 •

Carried out heuristic analyses, user interviews, and think-aloud protocols to study the user-friendliness of SAM online manual.

Website User Experience Evaluation Registrar’s Office, Clemson University | 2017 •

Conducted heuristic analyses, user interviews, card-sorting sessions, and thinkaloud protocols to evaluate the visual design, navigation, ease of access, and content of the Clemson University Registrar Office’s website and provide recommendations.

Work 2017.8 - present Graduate Administrative Assistant (Web Design & Develepment) Clemson University

Career Guidebook Mobile App. Usability Testing U.S. Naval Air Systems Command | 2017 •

Administrated in-depth think-aloud protocol performance testing and user interviews to evaluate the user-friendliness of the NAVAIR mobile app.

Needs Assessment Study & UX Map on Website Redesign School of Architecture, Clemson University | 2017 •

Conducted a heuristic analysis of the entire website.

Presented a final recommendation report based on data from user interviews find ings, personas, and journey maps.

Web Design & Technical Communication

2016.8 - 2017.5 Technical Coomunicator Assistant Multimedia Authoring Teaching and Research Facility (MATRF), Clemson

2014.4 - 2015.10 Program Director, Instuctor, and Counselor Huaheng Flagship Education and Counseling Service Co. Ltd., China

Webpage Development & Curation Collge of Architecture, Arts, and Humanities, Clemson Univeristy | 2016 - 2018

2012.10 - 2014.3

Created webpages, content, and templates in Cascade Content Management System (CMS) for 9 departments and 21 centers across the college.

ESL Instuctor & Counselor

Designed graphic content for books and digital publications for the Center for Electronic and Digital Publish (CEDP)

Collaborated with web curators to assist department website maintenance and updates.

Provided workshop training to help new web curators/assistants work with responsive design frameworks.

Longre Training Center, China

Languages

Technical Documentation & Digital Design Multimedia Authoring Teaching and Research Facility (MATRF), Clemson | 2016 - 2017

Chinese - Native or bilingual proficiency

English - Full professional proficiency

Assisted graduate students in professional design and multimodal communication projects.

Created state-of-the-art multimedia digital products, using green-screen, three-light-system set-up, digital SLRs, HD video cameras, etc.

Japanese - Limited working proficiency


Professional Skills (continued)

References

Teaching & Public Speaking

Dr. Tharon Howard

Had over 4 years of teaching experience in ESL (English as a Second Language) education.

Acted as a program director for one year at Huaheng Flagship Education and Counseling Service Co. Ltd., China.

Presented on “Metrics of Documentation” at World Usability Day at Clemson University | 2017

Presented at 7th Annual Symposium on Communicating Complex Information (SCCI) at East Carolina University | 2018

Education 2016 - 2018

Professor of Communication Clemson University (864) 656-3488 tharon@clemson.edu

Eduardo Nieves

M.A. Professional Communication Clemson University | SC Cognate: Usability Testing & UX Research

System Administrator Clemson University (864) 650-8037 envs@clemson.edu

GPA: 4.0/4.0 Selected Coursework: - Usability Testing (fundamental & advanced) - Advance Techniques in UX - Content Stratevgy & Socvial Media - UX & Web Design - Visual Communication - Human-Centered Computing 2008 - 2012

-

Digital Design Rhetoric Research Methodology Workplace Communication Research & Design Composition Theory Rhetoric & Professional Communication

B.A. English Qingdao University | China GPA: 3.4/4.0 Minored in Japanese

More reference available upon request

Organizations U-Test Community | Contributor

Skills

Society for Technical Communication (STC) | Member

UX Research & Usability Testing

Graphic & Web Design

Heuristic Analysis

Wireframes

Task Analysis

Prototyping

Needs Assessment

Agile Product Development

Personas

InVision

A/B Testing

Sketch

Think-Aaloud Protocols

Adobe Photoshop

Card-sorting

Adobe InDesign

Journey Mapping

Adobe Premiere Pro

Usability Testing with Morae

Adobe Illustrator

User Inverview & Survey

Adobe Audition

Technical Communication Content Strategy Camtasia (Word, PowerPoint, Excel, Outlook,OneNote etc.)

Adobe Acrobat DC Responsive Web Design HTML, CSS, & JavaScript MySQL Foundation 6 Framework Cascade Content Management System (CMS) Google Analytics

User Experience Professional Association (UXPA) | Member


Project 1.

Clemson Registrar’s Office Website Evaluation: a Usability Study

Our client, Clemson University Registrar’s Office, was preparing to redesign their current website to improve its performance and usability in a new content management system (Cascade CMS). To make the most of these improvements, their web designers and product managers wanted to better understand the goals and task performance needs of their users.

In this project, we conducted a series of usability tests (including heuristic analysis, think-aloud protocols, user interviews, and card sorts) with 23 participants consisting of Clemson students and advisors who use the web page as a source for locating relevant information. Using all the data collected, we presented our findings with a list of actionable recommendations to be used in the redesign of the website.


Overview. Client

Clemson Registrar’s Office Kelly McDavid, Web Developer Reagan Blondeau, Student Services Manager

Objective

To create a list of actionable recommendations to be used in the redesign of the Registrar’s website

My role

Researcher (in a usability team led by Dr. Tharon Howard)

Tools

Task Analysis Usability Testing with Morae User Interview Card-sorting Microsoft Excel Adobe PhotoShop Adobe Premiere Pro

Duration

5 months

Deliverables

Test plans, Heuristic analysis, Mock-ups for redesigning the homepage navigation based on card-sorting results, Oral presentation, Final recommendation report with highlighting video clips.


Exigency. The Registrar’s Office at Clemson University offers the official collections of resources for transcripts, academic policies, course catalogs, forms, etc. Upon the academic year 2017-2018, the Registrar’s website is switching to a new CMS in accordance with the university brand guide, which necessitates revision of both navigation and layout. Our client demanded an in-depth usability research upon the current website, whose information has been reported by users as difficult to find. Their objective involved a in-depth understanding about the usability needs of actual users and a list of actionable recommendations for the redesign of their website. They also demanded an effort to streamline web pages and reduce the overall number of links on the homepage, of which were more than 50 at the time.

Four Types of Data. Based on the best interest of our client, budgets, and logistics, we planned to collected four types of data: • Heuristic analysis: conducted by our team of 4 researchers • Card sort: Seventeen students both familiar and unfamiliar with the website were asked to organize the website’s links into categories that seemed most intuitive to them • Think-aloud protocols: Six experienced academic advisors were asked to perform a series of tasks and elaborate on the difficulty of those tasks • User interviews: participants from both card sorts and think-aloud protocols were interviewed about their individual opinions about the website, comments on their experience, and recommendations for the website redesign.

The purpose is to know: • How real users behave while using the website to complete real tasks. • What is the most user-friendly way of organizing and structuring information on the homepage.


homepage.

reources/links.

basic subpage.

A Comparison of Current Site and Web Templates


Process.


Usability Heuristic Analysis. To conduct this analysis, we used Nielson’s 10 Usability Heuristics for User Interface Design (https://www. nngroup.com/articles/ten-usability-heuristics/) as the primary criteria, which is a list of factors developed from 249 usability problems. The goal was to evaluate the website and uncover user experience deficits.

Our heuristics included:

The problem severity scale is:

• • • • • • • • •

1: Cosmetic Problem the user is able to continue, as the prob lem is only minimal.

Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors • Help and documentation

2: Minor Usability Problem the user is able to find alternative solution to the problem without assistance. 3: Major Usability Problem the user will most likely reach out for support or consult available documentation to continue 4: Usability Catastrophe the user will be unable to continue due to lost functionality.


In the memo report, we provided: • the definitions for each heuristic category, • a score stating the severity of user experience problems associated with that category, • an explanation of each score.

Here is a sample extracted from the memo. A full version is attached in the appendix.


Test Plan. The test plan was essentially a proposal describing the study we intended to conduct and types of data to be collected. It comprised • the purpose statement, • research questions, • the user profile, • the methodology, • the tasks, • the task scenarios, • texts we would use, • types of data we would collect, • resources we would require, • a tentative schedule.


User Profile.

1. Six faculty and advisors at Clemson University Advisors were employees whose specific job is to advise or faculty who also give students career and education advice.

2. Seventeen university undergraduates The Registrar’s Office helped recruit students either currently working at their offices or being promised with “early registration tickets.”


Usability Testing.


Card Sorts

After answering a few pre-test questions to gather demographic data, participants organized 56 topics available on the Registrar homepage into five main categories that made the most sense to them as a means of organizing topics into sub-categories. After that, they were asked to label each category based on their own understanding of the content.

After the card sort completion, the participant was interviewed shortly in regard to their previous experience with the Registrar’s website, their comments on the test, and recommendations from a student’s perspective. The participants’ organization input were used to help evaluate the current organization and structure of the Registrar website’s navigation menu.

On average, they spent between 20 and 45 minutes completing the task. Many participants sorted cards into the same categories, then used similar names for the five main categories; this recurring categorization scheme represents users’ shared mental model of how the organizational menu should be arranged.

Card Sort Process


Think-Aloud Protocols

At the beginning of the think-aloud protocols, participants were asked to review and sign a consent agreement in accordance with federal regulations regarding human test subjects. Participants were then asked to complete a pre-test questionnaire to gather demographic data. After this, participants received a short, scripted briefing which they were instructed to follow along as it was read aloud to them. This introduction explained the objective of examining the user-friendliness of Registrar’s website and assured participants they were not being scored on their technical skills or knowledge. During the test, they performed 11 tasks while verbalizing their actions, thoughts, and impressions.

The Clemson Usability Testing Facility (UTF)

The 11 tasks include (from an advisor’s perspective): 1. I need to help my student locate information about submitting information to his or her parents’ insurance company to prove he or she is a full-time student. How/What do I do? 2. My student wants to take a course somewhere else this summer. What do I need to do? How can I make sure it counts towards his or her degree? 3. Where does my student take his or her final exam? 4. A student wants to audit a class. What do I do to help him or her register? 5. A student wants to return to Clemson to finish his or her degree. When and how can he or she apply? 6. A student would like to use his or her GI Bill to go to school. Where can I find how much the GI Bill will cover for the student? How does the student have the GI Bill pay his or her tuition? 7. A student is unable to register for CE 2010 and it telling him or her to contact the Registration Coordinator. Where can the student find the Registration Coordinator for Civil Engineering? 8. A student’s course he or she wants to take is full and the instructor told him or her to submit a request for a closed course. 9. A student is considering taking a minimester course and wants to know the last date to register. Find it on the academic calendar. 10. A student wants to know if his or her Tri-County Tech Math course will transfer to Clemson. Find out using TCEL. 11. wHow far in the past can Academic Forgiveness be granted?


After the performance test, each participant was asked to answer a series of post-test questions (a survey with follow-up contextual inquiry) regarding his/her subjective observations and opinions of the application. Participants were asked to elaborate on their answers and explain why they chose each rating. They were also asked to score the likelihood of using the manual in the future under specific circumstances and to provide insight as to how the application could be improved. A full version of our Test Material (pre- and post-questions, scripts, tasks, etc.) is attached here.


Data Analysis. Card Sorts The card-sort data were analyzed by following five steps.

Step 1: to identify the most commonly suggested categories among all of the responses. The most commonly suggested categories among all of the responses include: Some other categories that participants suggested include: • • • • • • • •

Catalogs/ FAQs, Records, Prospective Student, Contact, Undergraduates, Special Cases, Academic Policies, etc.


Step 2: Create a spreadsheet. In the spreadsheet, list the cards in the rows and the categories in the columns, and add the raw counts to your spreadsheet.​​​​​​​


Step 3: Replace the raw counts with percentages. Each percentage is the number of participants who sorted certain cards into a particular group divided by the total number of participants.


Step 4: reorder the cards. Reorder the cards according to which cards have the highest percentages among all of the groups. For example, for Cards Class Schedule, Credit Hours, and Degreeworks, the highest percentages fall under Group 1: Registration/iRoar;


Step 5: consider why participants made their judg- It is interesting to reflect on why our participants encountered troubles in understanding these terms, ments. and it then indicated that the Registrar’s Office website is not speaking the students’ language. It should be noted that our post-test questionnaires Most of the terms and terminologies used in the show that our participants found some cards parwebsite were designed toward advisors’ knowlticularly difficult to sort into a specific category, edge base; however, the advisor population might because they either didn’t know what the terms not be the primary/most essential audience since meant, didn’t know what kind of information the most of them are familiar with the website and items consisted of, or thought the items could fit thereby can easily navigate to what they want to into more than one category. find. The listed cards include: • • • • •

Veterans Audit Name changes Clearinghouse Information TCEL

In redesigning the navigation and homepage layout, it is then of vital importance to consider the student audience who may not understand certain terminologies and then need more “common language” as desirable replacement. Therefore, after revising the existing results, we provided the finalized organization as:


Mock-Up Homepage.

Based on the findings of card-sort, below is a mock-up home page for redesigning the Registrar’s Office website. As informed in our initial meeting with the Registrar personnel, we used the The 1889 template offered by Clemson University (https://www.clemson.edu/_template-assets/1889-base/style-guide/) to guide the redesign. In the mock-up home page, the top navigation bar contains the five categories while the secondary topics are listed in the left column. There is also a Related Links block at the bottom of the left column to facilitate the ease of access for visitors.


Think-Aloud Protocols

The participants’ performance and comments were coded, analyzed, and evaluated to create easily-interpreted videos that highlight the participants’ interactions with the website. We visualized our findings by generating screenshots, producing standard usability metrics like frequency, effectiveness, efficiency, and satisfaction, and editing short video clips.


Recommendation Report with Highlighted Videos. An oral report was delivered to the Registrar’s Office on December 7, 2017. A final recommendation report with highlighted videos for the improvement of website redesign was presented and submitted to Kelly and Reagon in December 15, 2017.

Our report consisted of: • An overview of the project and methodology • Executive summary of actionable recommendations • Discussion on the target demographic and the participants information • Findings (including time of task completion, success rate, comment summary, etc.) • Recommendations

Video Clip Samples from Think-Aloud Protocols

We recommended the following major areas for improvement. • • • • •

Ease of access Navigation Language Content Layout

We included roughly 20 video clips to support our recommendations.


Appendix I. Heuristic Analysis Memo Memo To:

Kelly McDavid, Web Developer Reagan Blondeau, Student Services Manager

From: MAPC Graduate Students Ciara Marshall, Doris Ding, Abby Maxim, and Valerie Smith Date:

August 28th, 2017

Re:

Heuristic Evaluation of Clemson University’s Registrar Office webpage

Cc:

Dr. Tharon Howard, Usability Professor

Introduction The following memo contains a heuristic evaluation of Clemson University Registrar Office web page. The goal of this evaluation is to draw attention to sources of confusion users may encounter when using the application so that they can be remedied. To guide you through our navigation, we will use the end of the URL to assist you in locating the specific page of concern. For example, if the URL is http://www.registrar.clemson.edu/html/indexFaculty.htm, we will refer to the page as /indexFaculty/. To conduct this analysis, we used Nielson’s 10 Usability Heuristics for User Interface Design (https:// www.nngroup.com/articles/ten-usability-heuristics/) as the primary criteria, which is a list of factors developed from 249 usability problems. Below you will find definitions for each heuristic category, and a score stating the severity of user experience problems encountered for that category, and an explanation of each score. The user-experience problem severity scale is as follows: 1: Cosmetic Problem - the user is able to continue, as the problem is only minimal. 2: Minor Usability Problem - the user is able to find alternative solution to the problem without assis tance. 3: Major Usability Problem - the user will most likely reach out for support or consult available documentation to continue 4: Usability Catastrophe - the user will be unable to continue due to lost functionality.


Visibility of system status: 3 - Major Usability Problem The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. The Clemson University Registrar home page does not indicate what the Registrar Office actually does within the university. It simply points to other links outside of the Registrar web page. We would suggest integrating a small paragraph at the top of the home page expanding upon the functions and duties of the Registrar’s Office. This would allow students and parents unfamiliar with the website be more aware of the services the registrar can provide. It also ensures your audience will not be overwhelmed with all of the links on the home page. Users may get the impression that they are on the wrong page.

However, the Registrar home page does a great job of indicating what iRoar is at the bottom of the page. This is helpful for new parents and students because the home page directs its audience to iRoar multiple times.


Match between System and Reality: 1 - Cosmetic Problem The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. The registrar’s home page does a great job of using clear, specific, and simple language. The phrases and concepts will be familiar to new and regular users with system-oriented terms that are also straight-forward, so the general public can understand as well. In some places, such as the top nav bar on the home page, the chronology of topics seem to follow a natural and logical order.

However, the left-hand sidebar does not seem to do this because it goes from Faculty/Staff, Students, Parents & Visitors, and Contact Us. We would suggest placing the Faculty/Staff last in this group and placing the Students first, sequentially followed by Parents. The Faculty/Staff are going to be more familiar and experienced with it after looking through the Registrar’s web page over multiple years in comparison to a new student or inquisitive parent.

User Control and Freedom: 2 - Minor Usability Problem Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. With the sheer number of web pages hosted by the registrar website, navigation between pages can become a daunting task. To assist users in finding their way around the website, it is helpful to have some sort of “Home” button available to them at all times so that they can easily get back to the where they started - the /html page.


Another difficulty users may encounter is keeping track of where they are in the website. A common website usability issue is that users are not aware of or forget which web page they’re currently on, and may click the same link twice, leading to frustration. It would be helpful for web pages to include some sort of indicator as to where the user is within the menu. As seen above, there is no option for the user if they wish to navigate to the Registrar’s home web page, or even the previous webpage.

Consistency and standards: 2 - Minor Usability Problem Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. The overall design, layout, color, font, and language used on the website are consistent and characteristic for a Clemson website. However, the first option under the iRoar tab, “Address,” might cause confusion for students who would probably wonder what it means by clicking on. In effect, both the “iRoar” and “Address” lead the user directly to the launching page of iRoar system. We would suggest to change the wording of “Address” for a clarification of meaning.

Also, there are times when several links are actually leading the user to the same destination. For example, under the Registration tab in the navbar, both “Class Schedule” and “Course Catalog” lead to a “select term” page in iRoar. This may cause confusion if the user is a first-time visitor who would wonder the purpose of “select a term.”


Error prevention: 2 - Minor Usability Problem Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. Overall, the information and links on the Registrar website are well designed to prevent errors. The only concern is that by clicking on a link, sometimes it will lead the user to an external website without a notice, which means the user may find it abrupt and can only go back to the Registrar webpage via the “Back” button on the browser. Also, there is a broken link found by clicking on the “Waitlist” option under the “Registration” tab.

Recognition rather than recall: 1 - Cosmetic Problem Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Overall, the user is well-prepared with sufficient guiding information throughout the website. Most links are explained properly regarding what the link means and where the user will be directed to. However, in .../parentInfo.htm, as the user browses the Q & A sections, sometimes a question will be underscored without being a clickable link (see image below). This might confuse the user in their recognition of links.


Flexibility and efficiency of use: 2 - Minor Usability Problem Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. There are no accelerators currently in use on the website, or at least none that are readily apparent. As stated previously, the registrar website houses a vast number of web pages. While each web page contains important information, some undoubtedly are visited more frequently by users than others. Rather than forcing users to click through menus to get to a web page they visit frequently, it may be helpful to create a “Quick Links” subheading containing registrar web pages that receive the most traffic. Google Analytics reports can help determine which pages to include in such a section. Aesthetic and minimalist design: 1 - Cosmetic Problem Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Overall, it appears as though most of the registrar’s webpages incorporate minimalist design when possible. Text is kept to a minimum and information is organized into neat, easy-to-read tables for users. Bulleted lists are used frequently to summarize information in a way that make it easily accessible to the user at a glance. However, there being two menus present on each web page unnecessarily complicates navigation and can overwhelm users with choices.


Help users recognize, diagnose, and recover from errors: 2 - Minor Usability Problem Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Under the “Registration” tab, the “Waitlist” link brings users to an error page. This page is standard for the University and does not offer specific help other than a search function. However, the language is understandable and easily allows users to navigate away from the page.

Help and documentation: 3 - Major Usability Problem Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. The Registrar’s website provides plenty of useful information to both students and faculty. The website itself does not necessarily need to provide users with any sort of documentation or help, as all the information is quite clear. However, there is quite a bit of information contained within the website. Many of the links are also duplicated throughout the website, such as many of the links in the tabs under “iRoar” and “Registration.” We would suggest pages be cut down and consolidated into fewer links, making it easier for students and faculty to navigate the website and find what they need. As it is, there is a search function in an easily-accessible area. In order to make the website more usable, though, it would be ideal for the search bar to be used as little as necessary.


Summary: While not comprehensive, the above heuristic-based analysis should provide insight as to how the Clemson University Registrar’s Office can improve the usability of its webpage. Investing resources to solve the described issues will improve the user experience of web page visitors, which will likely result in a better understanding of the university’s policies. We thank you for the opportunity to become involved in this project.

UX Research Work sample _ Doris_Xue_Ding  
UX Research Work sample _ Doris_Xue_Ding  
Advertisement