See experience design work.
While it goes without saying that education is a life-long process,
my experience in providing structured instructions to others began in 2014, when I worked as a Human Resources Specialist in the Army. Training new soldiers assigned to my office, I found that writing a thorough manual was the way to go, especially for hand-off. Tasked with handling most of the personnel-related administration for the whole unit, I had to be extra organized with files, forms, and procedures, which proved to be a valuable lesson and a habit.
In 2016, I worked as a Project Manager at Paul Academy in Seoul, Korea, where I consulted on the customization of a question bank software for use with SAT Tests. The SaaS firm, WizEdu, had designed their software for the K-12 of Korean education system, which was not suitable for SATs.
I began by first comparing the two systems, and identifying the modifications that would be needed for the software to accommodate SATs. The project was extensive to say the least, requiring detailed specifications for all modifications.
Upon return to Penn, I began working as the OhSnap Photography Manager. The brand had been spun off a larger agency, but the previous manager had abandoned it many months ago. It was in dire need of revitalization. In the first few months, I rebranded the organization, wrote and designed the entirety of ohsnapupenn.com from scratch.
I created a variety of instructional material, including a manager manual; photographer guidelines, outlining photographic and business conduct; and training material.
One of my first projects at International Students and Scholar Services at the University of Pennsylvania, the STEM OPT Form I-983 tutorial was a hit with the office and the students. In fact, I decided to take this format further with the next tutorial (Form I-765 Tutorial below), and my senior project.
When I was first asked to do this project, I had never created a video tutorial before. I did some digging, and found that existing tutorials on YouTube disappointed me in the following ways:
Written instructions—either none or too much.
No clear indication of where things are on the form, and where the current item is.
When referencing outside resources, no instructions given for those.
Low-fidelity motion and graphic design.
Text is too small because the video does not zoom into individual items.
A vast majority of tutorials, as they have been even at ISSS, were simply people talking over an image of the form. What is the point of creating a video when really, you are only using the audio?
I wanted to bring this format into 2017 by applying practices that I had observed in places like mobile app onboarding flows—I set some criteria for myself based on my past experience and the purpose of the project.
Instructions should be unambiguous and in accessible plain English.
Instructions should be granular and concise.
The video should include both written and spoken instructions.
Visual indicators and motion should direct viewer attention.
And the video above was my solution. Using Keynote, I created a slide for each item, placing a red indicator around the current field and a speech bubble for instructions. The object transitions took care of the animation—I just made it slow enough that there is time between each item for students to pause the video and work on the form. In addition, I reserved some design features / animations for recurring elements, such as the slide in and out on the right side for the table of contents, red for current item, blue for referencing outside resources, slide up and back down at the end for completed pages of the form. This practice in user interface design is something I have been seeing more and more as companies cram in ever-increasing number of features into a tight space. The physical and spatial intuition of where things are and how they behave is crucial in helping users keep track and feel a sense of consistency.
This was a prolific year for me, with four major educational projects, involving new platforms, LMS, and slides for an entire course! Many of my presentations are educational in nature, but below are the most noteworthy.
The first project of 2018 was an e-learning tutorial for business administrators using ISSS systems, created using Articulate Storyline 1. This was my first try, and I was able to make many improvements in the second one.
This tutorial was created because the internal system at ISSS had been updated. The previous tutorial, which I was initially told to revise, was narrated by a coworker who had left a few months before. This meant that the whole tutorial had to be redone, even the parts that stayed the same.
Because these updates are not drastic, and will happen again in the future, we chose to use computer voices going forward, because it will allow future employees to selectively edit the tutorial, regardless of staff changes.
Based on the positive feedback I had received in the video tutorial, I made sure to give clear visual indications for every instruction and illustrate every structural or sequential concept using graphics.
One challenge that I did not anticipate was that unlike humans, text-to-speech software has a very limited contextual awareness. Therefore, I edited the entire script for accurate speech. I outlined the fixes needed in a document outlining how to make changes to the tutorial:
Add a space between every letter in an acronym. i.e. USCIS → U S C I S
Add a space between numbers according to how they are pronounced. i.e. I-797 → I-7 9 7, and DS-2019 → DS-20 19
Change iPenn to “I Penn” or “Eye Penn,” whichever sounds better to you.
Change email addresses and URL’s by spelling out every part as they are meant to be pronounced. i.e. [email protected] → I S S S at P O Box dot UPenn dot E D U.
Make sure to spell out how common words replaced by punctuation are pronounced. i.e. 2 – 3 business days → between 2 to 3 business days.
Prefer verbal or colloquial forms over grammatically correct sentences to make it sound natural.
# is usually pronounced as “number” and things surrounded by brackets add the same pause as would being surrounded by dashes. i.e. form (1) is awkward, but form #1 or form 1 is natural.
Computer speech is very sensitive to punctuation. Punctuations will also change the intonation before and after, so you cannot use it to add artificial pauses. Change or even re-phrase what sounds wrong and use it to your advantage to make things clear.
The presentation above is one in a series of 7 PowerPoint slideshows for lectures on intercultural communication. I opted for a card-like system for presenting a list of items, because there was a wide range of information density on these slides, and bullet points couldn’t possibly be used in a consistent manner without sacrificing visual impact.
In order to keep the design consistent between modules, I defined a thorough PowerPoint template based on my previous presentations. Designing this template allowed me to review my previous projects and decide on an aesthetic for future projects at ISSS. Did you know that you can bake transitions and builds into the template? Neither did I. See other modules here.
My second Storyline project, International Student Orientation Tutorial, was a little more complex than the first one. This time, I explored every part of the software to customize the player in order to add flow control, variables, and player customization.
Flow control was needed here, because unlike the first Storyline project where everyone needed to see the same thing, students can have different types of visas with different immigration requirements.
My most recent video tutorial, the Form I-765 Tutorial builds on the format of the first tutorial. I have been getting positive feedback from the International Student Advisors, who tell me that the tutorial has reduced the amount of inquiries from students.
The biggest challenge, both on the form and for the video, was Section 6. While most other items were OK after simply rephrasing for spoken computer text, the completion of this section depended on 2 variables that generates 4 possible cases on 2 groups of fields. A mouthful, right?
The script initially explained this in a linear fashion, explaining the two groups on 2 cases, and then introducing the third case after. But that had some immediate issues:
Students will need to pay extra attention to the explanation.
They have to listen to the whole thing before working on the form.
So I reworked the explanation so that a linear progression was possible through the 4 cases without sacrificing clarity. I drew the 2 by 2 table for my own sake, but realized that this type of table was fairly common, even in the humanities and social sciences. I capitalized on this by creating an indicator out of this table because:
Students will know, from the start, which part to listen for.
Even when paused, the indicator will show which case the instructions applies to.
Students don’t need to do the combinatorics of these variables.
While not perfect, this was a timely solution that reduced the mental load of viewers. In fact, I have received feedback that some students come in for advising because the instructions are too clear cut for how open-ended the section is. (Overthinking is a common trait for anxious students)
This year, I have been working as a Book and Publication Design Teaching Assistant, teaching alongside the professor with a focus on the technical side of Adobe InDesign.
Booklet printing—one of the most important features of a publishing software—on InDesign is geared towards professionals. There are two separate levels of menu and more than three dialogs that needs to be configured every time, which, I have to admit, took a lot of trial and error for me when I first started using it. While this process has much room for usability improvement, for now, we have no choice but to learn how to use it.
So I wrote a detailed set of instructions. I think it worked, because some of the students had it printed out, and I have not gotten a single question since. See PDF
Because Book and Publication Design is a Fine Arts course, and GREP is more of a Computer Science topic, I decided to create a little cheat sheet for students to refer to. The examples at the bottom are the building blocks they need to auto-superscript citations.
That’s all the educational and instructional projects I have worked on so far. I have a few more coming up—they will be added as soon as they are published.
Thank you for visiting!