Hook & Loop Product Designer Internship

Background

I have been been a product designer intern since fall 2018. As a Hook&Loop designer I apply skills in product design, visual design, information architecture, brand design, etc. to play the role of a design generalist "UX team of one" on small, self-sufficient teams. I advocate for the user and contribute to innovative product solutions.

Projects

Continue on to learn about a few of my favorite projects i've done. More coming soon!
Infor Expense Android ComponentsInfor Expense Onboarding ScreensInfor Expense AB Testing

Infor Expense Android Components

Overview

As we work toward the android release of Infor expense (and also diving into a UI uplift), our android developer brought it to the attention of the design lead and myself, that he was missing some components that did not translate over from IOS. This lead me on a greater journey of discover how we can optimize the experience for Android users, especially since a majority of our users will mainly be using android devices.

Key Research Points / Questions that Arose

• Navigational differences between android and ios
• Differences in human interface guidelines vs. material design
• What differences exist in different android vs. ios applications? Do any differences exist?
• What are the benefits for an android optimized experience?
• Should apple lead android? Vice-versa?
• How can we create the best experience for each different user with our small, fast paced teams?

Deliverables

After this research, I dove into human interface and material guidelines further with the notes and references I gathered in mind. I created the android components below using Infor Expense styles and material standards.

Greater Discovery

Through my research in android navigation, we discovered that keeping the navigation the same for IOS and android might not be the best solution. How much should our products be "matching"? To what extent does this matter?

Review

Our Android developer said that android users would probably prefer the floating action bottom and the bottom navigation. We're hoping to run a test soon. I've also started to mockup a type scale that would work better with androids smaller screen size, smaller headers, and tendency for smaller type.

Infor Expense Onboarding Screens

Overview

As we move forward redesigning Infor Expense, it's necessary to recreate the onboarding screens. As we've redone the navigation and added features, the old format would not suffice.

Deliverables

I've created onboarding screens that have also become a style that is expressed in the onboarding screens of Infor HCM

Back to Top

Infor Expense AB Testing

Overview

The idea to test was introduced while presenting flows I created to add the option to attach receipts to reports in Infor Expense. We (designers, product manager, and developers) discussed if users would get confused if an action sheet appeared automatically. After speaking to a UX researcher at Hook&Loop, he recommended doing an AB test.
I developed the flows, questions, and ran 8 user tests within and outside of Hook&Loop using 2 invision prototypes.

Key Objectives

•Test the navigation and ease of starting a report
•Discover if the paperclip is an intuitive symbol for directing users to attaching receipts
•Compare ease of use for the auto action sheet vs. empty state/action sheet
•Observe ease of use and overall functionality of the attach receipts page.

Flow A
With no receipts attached to the report, an action sheet with options to add receipt will automatically appear upon tapping attach paperclip.
Flow B
With no receipts attached to the report, upon tapping attach paperclip users will be brought to the attach receipts page with empty state instructions. They will then need to navigate to the "+" to attach receipts
Test Script/Instructions
All Results
Recommendations
Introduction/Overview

Thank you for participating in this study. Today we will be testing navigation and actions within Infor Expense. I will be providing you with brief background on what you are trying to achieve within the application, as well as questions about your experience along the way.
You will be using a prototype, so not all functionality will work. I will help you out if you run into any dead ends. Feel free to ask questions and think out loud throughout the process, although I may not be able to comment or answer your questions.

Walk Through

1. Moderator: Before I tell you what i’m going to have you do first, what do you think you can do from this screen? Okay, now you’re ready to start your expense report, how would you go about doing so?
User should use the action button and Start a Report
2. Moderator: Again, describe what you think you can do from this screen? The last time you submitted an expense report, you were in a rush and forgot to attach a few receipts, because of this you were reprimanded by your manager. This time you want to attach those receipt photos you took before filling out the rest of the report so you don’t forget. How would you go about doing so?
User should take the following actions: Attach Icon → Action Sheet → Camera Roll OR  Attach Icon → Attached Receipts → Action Sheet → Camera Roll →Select and attach
‍Moderator should pay close attention to how long the user takes to navigate these screens (ex: how long are they reading the action sheet for? Are they getting stuck in the “b ” path where they should be navigating to the “+”? )
3. Moderator: What did you think about the process of attaching receipts? Now that you’ve attached your receipts, you’re having second thoughts that you’ve selected the correct ones. You don’t want a repeat of the last report you submitted. How do you go about checking what you’ve attached?
User should navigate to the Attached receipts page
4. Moderator: How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Moderator: Overall, how easy or difficult was it for you to attach receipts to a report?
Very Easy       Easy     Neutral     Difficult     Very Difficult
5. Moderator: Now that you’ve seen this version, i’m going to walk you through an alternate version of this process. Please feel free to comment or ask questions along the way.Moderator will walk the user through the alternate A/B process
6. Moderator: Which version do you prefer and why? Do you have any additional comments or questions?

A Users
A1
A2
A3
A4

What do you think you can do from the home menu screen?
see expenses, create an expense, see reports
How would you start an expense report?
User went to expense first
Describe what you think you can do from the create report screen
‍Give name, purpose, add notes, attach a receipt
How would you go about attaching the receipt photos from your camera roll?
paper clip, did all steps
What did you think about the process of attaching receipts?
‍easy, didn’t realize you could attach more than one, liked how fast this was
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Successful with all of these steps
Overall, how easy or difficult was it for you to attach receipts to a report?
very easy, thought it was “intuitive”
Which version do you prefer and why?
no preference, maybe no action sheet because if you already have an receipt attached you would be able to see them (there is no action sheet when you already have receipts though)
‍

What do you think you can do from the home menu screen?
Opened already on expense list, red labeled expenses look like you should click to check on them
How would you start an expense report?
User clicked report instead of plus at first
Describe what you think you can do from the create report screen
fill in fields, purpose, notes, attach from paperclip
How would you go about attaching the receipt photos from your camera roll?
paper clip, did all steps
What did you think about the process of attaching receipts?
easy, didn’t realize you could attach more than one, liked how fast this was
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Successful with all of these steps
Overall, how easy or difficult was it for you to attach receipts to a report?
very easy, thought it was “smooth”
Which version do you prefer and why?
needed a second glance to notice the differences, preferred the auto action sheet but said that it could be because he is a first time user

‍

What do you think you can do from the home menu screen?
look at receipts that have already been uploaded, look at expenses, add a new expense, upload  a receipt, “+” to create a new, tabs for expenses and reports, profile head to access personal info
How would you start an expense report?
the plus
Describe what you think you can do from the create report screen
fill in fields, purpose, notes, attach from paperclip
How would you go about attaching the receipt photos from your camera roll?
paper clip, did all steps
What did you think about the process of attaching receipts?
straightforward, made sense
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Successful with all of these steps
Overall, how easy or difficult was it for you to attach receipts to a report?
Very easy
Which version do you prefer and why?
both made sense, preferred the auto action sheet because it’s one less step, but “gets the idea of the other one” says he is “60/40”

What do you think you can do from the home menu screen?
“+” to ass a new expense, start an expense from the unattached receipts
How would you start an expense report?
went to "+" but hit “create expense first”
Describe what you think you can do from the create report screen
name report, add a purpose, add a note, noticed paperclip last after being asked if there was anything else by the moderator
How would you go about attaching the receipt photos from your camera roll?
‍steps done correctly
What did you think about the process of attaching receipts?
straight forward
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
steps done correctly
Overall, how easy or difficult was it for you to attach receipts to a report?
very easy
Which version do you prefer and why?
auto action sheet. thought that in the action sheet create report should be on top because typically for him he would want to start a report and then have the expenses go to that report, although he admitted that he usually actually starts the expense report weeks after the trip. Is there a way that we can auto route expenses to go to a report?

B Users
B1
B2
B3
B4

What do you think you can do from the home menu screen?
profile, not sure about unattached receipts (assumed maybe they are free floating and not attached to a report), whats charged to card and the date, “+” to add new
How would you start an expense report?
went to the “+”user was confused by “expense report” name on menu
Describe what you think you can do from the create report screen
name a report, add purpose, write notes, add attachments (didn’t see this at first)
How would you go about attaching the receipt photos from your camera roll?
paper clip, did all steps
What did you think about the process of attaching receipts?
‍made sense, assumed that it would be in a more obvious spot though
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Successful with all of these steps
Overall, how easy or difficult was it for you to attach receipts to a report?
very easy, as soon as she noticed the attachment option it was very easy
Which version do you prefer and why?
she didn’t notice a difference until it was pointed out by tester, but she preferred the auto action sheet, though she thought the added images would appear in a section below notes and that the top would remain solely for attaching

What do you think you can do from the home menu screen?
main page for expenses accrued and documented actions for specific expenses, unattached receipts
How would you start an expense report?
clicked on reports first after redirection, used “+”
Describe what you think you can do from the create report screen
Start a report: name, purpose, notes, “self explanatory”
How would you go about attaching the receipt photos from your camera roll?
hit paper clip
What did you think about the process of attaching receipts?
‍“Super easy”
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Successful with all of these steps
Overall, how easy or difficult was it for you to attach receipts to a report?
“Super easy”
Which version do you prefer and why?
didn’t notice a difference until it was pointed out by tester and compared. Preferred not to have the action sheet because it was more “emphatic”, liked illustrated iconography

What do you think you can do from the home menu screen?
review an uploaded receipt (was confused about where the receipts were coming from), noticed the needs review, confused about unattached receipts
How would you start an expense report?
went to expense report first did not expect to tap the “+”
Describe what you think you can do from the create report screen
‍name, purpose, notes didn’t see the paper clip until clicking in invision screen where it blinked up
How would you go about attaching the receipt photos from your camera roll?
hit paper clip
What did you think about the process of attaching receipts?“seamless”
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report
‍Successful with all of these steps
Overall, how easy or difficult was it for you to attach receipts to a report?
Easy, because he second guessed himself twice, but it didn’t take much to figure out
Which version do you prefer and why?
didn’t notice a difference until it was pointed out by tester preferred auto action sheet because it was less clicks

What do you think you can do from the home menu screen?
add more receipts, purchases, link to other expenses and reports, view everything from trip
How would you start an expense report?
press plus, hit create expense first
Describe what you think you can do from the create report screen
type name of report, purpose, notes second thought attachments
How would you go about attaching the receipt photos from your camera roll?
Successful with all of these steps
What did you think about the process of attaching receipts?
‍simple
How do you think you would go about un-attaching one of the receipts? All of them? How about if you wanted to add more? How do you navigate back to your report?
Successful with all of these steps, was wondering if there was a way to preview a receipt larger
Overall, how easy or difficult was it for you to attach receipts to a report?
very easy
Which version do you prefer and why?
preferred the auto action sheet since it’s one less step

Based upon this test I have compiled recommendations
‍The auto-action sheet is the best choice. Users didn’t have a problem with auto action sheet or pulling the sheet up manually, before even knowing that the other option existed most users used words like “easy” “straightforward” “seamless” and “simple” to describe each process. After being shown both, 8/10 users preferred the auto action sheet, most saying because you skip an extra step.One user preferred the auto action sheet because they wanted to see their receipts if they already had (auto action sheet doesn’t pull up if you already have receipts attached) and another preferred having the “emphatic” touch of the iconography in the empty state (this will be changing with the redesign)
Also, we should consider learnability testing. Specifically, for the new menu. When asked to create an expense, I saw users hit a few different incorrect options. Although, when asked what they could do from the starting page, users knew that they could “add” or “create” from the “+”.

Back to Top

Sample Paper Prototyping/ Process Explanation

Overview

Lots of my internship was on the Infor Expense application. My supervisor would often give me features based upon what was decided among the team would be in the release.

What i'd do

• Write the task and any other requirements
• Paper prototype ways to do the task (as many different ways as I can think of) and I also write questions along the way
• move to the computer and display the flows digitally (for V1 expense these were normally based of existing design architecture so there was less design exploration and more showing new functionality)
• Walk supervisor and/or rest of expense team through flow ideas for feedback

Back to Top

kathleen_obrien2@fitnyc.edu

(631) 371-7262

ResumeLinkedIn