PDF - Amy Mauriello

Amy Ma uri ello
User Experience Designer / Somerville, MA / [email protected] / aemcreative.com / 603.315.9222
Education
Work
Master of Science in Human Computer Interaction
DePaul University
November 2016 expected
B.A. Degree in Graphic Design
Chester College of New England
May 2010
UX Designer
MassMutual Boston Solutions Center
February 2015 ~ Current
Designs user experiences for mobile and web applications in an agile, technology
lab environment. Creates wireframes, user flows, and interactive prototypes.
Additionally aids front-end developers HTML, CSS and some JS responsibilities.
Interaction Designer
DEKA Research & Development
September 2013 ~ February 2015
Collaborates with interdisciplinary teams to research user needs and rapidly
iterate design solutions. Works within agile software development frame
work, supporting business analysts and product owners. Provide support for
requirement definition exercises and take part in usability testing protocol.
Web Designer
Stonyfield
June 2012 ~ September 2013
Conceptualize and create intuitive, engaging, and brand-consistent web and
mobile experiences. Design original email layouts and hand code underlying
HTML and CSS and other interactive components into site content.
Web / Graphic Design Freelancer
aemcreative
Designs and creates print and web collateral for numerous clients. Created
websites, email blasts, landing pages, magazine advertisements, logos,
brochures, trade show booths, business cards, counter cards and invitations.
June 2007 ~ Current
Amy MauriellO
User Experience Design Portfolio
A my Mauri ello UX Por tf o li o
MyCityRoute Mobile App
Human Computer Interaction Graduate Work
OVERVIEW
Public transportation is notoriously unreliable. Overcrowded train platforms, buses
that skip stops, equipment failures, even police actions, all mean that the way you
were counting on getting to work or making your restaurant reservation on time may
fail without warning.
Commuters need a way to reliably know what’s happening on their favorite lines in
real-time so they can figure out how to get where they need to go no matter what
happens.
MyCityRoute is designed to be a personalized, social app that increases its
effectiveness the more one uses it. This means it is best for those repeatedly using
public transit who need to quickly know what issues are occurring and make rapid
transit decisions. It is also useful for those who travel regularly and want a familiar
tool to use in a new city.
ROLE
I worked alongside other HCI graduate students to design and develop MyCityRoute.
The app is responsive and works across mobile, tablet, and desktop. I led the technical
effort and created the majority of the interactive prototypes using Axure and Flinto.
SKILLs
Personas
prototyping
user stories
axure
u s e r r e s e a rc h
flinto
usability testing
M YCI T Y RO U TE
Personas
J e n n a , T h e C o m m u ter
R o g er , T h e T o u rist
•
•
•
•
•
•
•
•
Age: 33
Profession: Web Developer
Location: Chicago, IL
Jenna is a an AE at a large advertising firm in downtown Chicago and
has been with the company for five years. She is a very organized
individual who likes lists, sticking to schedules, and being punctual.
In her free time, Jenna enjoys working out at her local gym in Irving
Park, riding her bike along the lake with her boyfriend, checking out
new restaurants and going to the local farmers market on Saturday
mornings.
“I take two buses and a train everyday to and from work, and on the weekends, I’m
always running around somewhere. I need to be able to make quick decisions when
taking public transit to arrive to my destination safely, with minimal headache and
hassle.”
Age: 42
Profession: Teacher
Location: San Francisco, CA
Roger teaches high school history and geography. Roger and his wife
have two children, Garrett, age 10, and Rebecca, age 13. In his free
time, he enjoys traveling and exploring new cities with his family,
reading, attending baseball games, and cooking. He also enjoys
coaching his little league t-ball teams on the weekends.
“When I’m exploring large cities with my family, I don’t like forking out tons of
money on cab fares, and instead prefer to take public transportation. Living in
San Francisco, we are familiar with public transit systems and how they work, so
planning out a trip in a new city while being able to check times and alerts is easy
and convenient. ”
M YCI T Y RO U TE
User Story #1 - The Commuter
As a Commuter, I want to make an educated decision on the best way to get to my destination
so I can arrive quickly and safely.
M YCI T Y RO U TE
User Story #2 - The Tourist
As a Tourist, I want to plan my trip so that I can access it quickly throughout the day.
M YCI T Y RO U TE
Usability Testing
GOALS
•
•
•
•
Making sure the app functionality meets user expectations
Determining whether users can find information on their favorite routes quickly
Determining whether users are able to quickly report current travel alerts
Determining whether users are interested in using this app based on their testing experience
P a rticip a n ts
We reached out to urban male and female users between the ages of 18-50 who are in college or
have a college degree. These individuals are regular users of public transit and familiar with using
other transit apps.
P a i n poi n ts a n d sol u tio n s
•
The RouteScore wasn’t easy to access because it was only visible when you clicked into the
station detail view. We now have it showing on the overview screen.
•
Users requested the ability to add a travel alert from the station detail view. It is now
included.
•
There were too many clicks to navigate to the desired page. We added a new static
navigation that is always visible.
•
Inconsistent terminology used to describe a travel alert confused users. All instances of the
word “advisory” have been converted to “alert”.
•
The hint text in the search bar was confusing to users because they didn’t know what they
could search for. We have since updated it to be more descriptive.
M YCI T Y RO U TE
The best way to get where
you need to be with real
time updates from fellow
passengers
Take a look at MyCityRoute now
http://bvm4cz.axshare.com/#c=2
A my Mauri ello UX Por tf o li o
Website Redesign
MassMutual Ventures
OVERVIEW
MassMutual Ventures needed an update to their existing website. The previous
iteration was effectively brochure-ware and wasn’t attracting startups. Simply, it was
outdated. The redesign effort objective was to showcase the current companies the
Ventures team was working with and to provide a way to generate new partnerships.
ROLE
I worked closely with one other developer to create the site. My role was largely
the web designer and front-end developer. We installed a new Wordpress site and
customized a basic theme. We were able to stand this up very quickly and at a
significantly lower cost than the outside agency the Ventures team was in talks with.
Additionally, I took team photos and came up with the look and feel for the site.
SKILLs
Web Design
W ordpr e s s
p h o t o g r a p hER
H T M L / C SS
F RON T - EN D D E V
BOO T S T RAP
Take a look at MassMutual Ventures now
http://www.massmutualventures.com
A my Mauri ello UX Por tf o li o
Spiriello Finanicial Responsive Site
Human Computer Interaction Graduate Work
OVERVIEW
Spiriello Financial manages pension plans and provides a single location online for
non-retired and retired users to visit and manage all aspects of their pension plan.
The website is dynamic and shows different modules tailored to the user’s needs. The
non-retired user will use the site to view plan details and the retired users will it to
make changes to their plan.
BUSINESS
•
Lighten the workload on our customer service center.
OBJECTIVES
•
Become a leading competitor in the industry by giving our users more
flexibility and access to their funds and documents.
•
Provide Educational Material to our users.
•
Ensure the website is accessible on multiple devices.
ROLE
I partnered with another HCI graduate student to develop the information
architecture for the website. We defined . I was able to provide subject matter expert
information from my ongoing work at MassMutual.
SKILLs
D E F INE D BUSINESS OB J E C T I V ES
RESPONSI V E D ESIGN
Requirements definition
PRO T O . IO
USE R S C ENA R I O S
W IRE F RA M ES
SI T E M APPING F OR IA
Prototyping
S P IRI E L L O FINANCIAL R ES P O NSI V E WE B SI T E
User Groups
No n - R etire d Users
R etire d Users
People age ~65 and under who are currently non retired fit into this user
group. These individuals would use the website a couple times per year.
They are technology savvy, own smartphones and newer devices, and
considered to be expert web application users. These users can use the
following features:
People age 65+ who are retired fit into this user group. These individuals
would use the website several times per year. They are less experienced
with technology than others and own older devices. They are considered to
be novice web application users. These users can use the following features:
•
•
•
•
•
•
•
update their contact and beneficiary information *
download tax forms *
use calculators and tools to determine possible living conditions *
view FAQs *
view list of agents
find a local agent
read helpful articles to get educated on their finances
* user group specific features
•
•
•
•
•
•
•
•
update their contact and beneficiary information
update bank account details for direct deposit *
update mailing address for payment by check *
download tax forms *
use calculators and tools to determine possible living conditions *
find a local agent
read helpful articles to get educated on their finances
view FAQs *
S P IRI E L L O FINANCIAL R ES P O NSI V E WE B SI T E
Sitemap
Logout
Login Form
page
page
1
entry form
FAQS for
Retired Users
rs
Account Overview
Register Form
overview page
1.1
Profile Settings
g
page
2.1
FAQ page
2
Beneficiary
Information
n
page
Forms for
Retired Users
ers
group
3
Disbursements
2.2
overview
module
4
Resource Center
for Retired Users
ers
group
Find an Agent
page
5
Calculator
page
2.3
5.1
Longevity of
Fund Calculator
ator
page
5.1.1
Where Should I
Retire Tool
ol
page
Retirement
Fund Calculator
ator
Unique to this User Group
Primary Navigation
Page
Child Page
SI T E M AP F OR RE T IRE D USERS
5.1.2
page
Helpful
Articles
group
5.2
5.1.3
6
7
S P IRI E L L O FINANCIAL R ES P O NSI V E WE B SI T E
Wireframes
We created heavily annotated
wireframes to communicate the
specific needs of the user interface
and to ensure the development
piece of the project would go
smoothly and efficiently.
S P IRI E L L O FINANCIAL
RE SPONS I VE WEBSITE
Mobile
Our mobile wireframes are also heavily
annotated for clear communication of ui
design intent. These wireframes are high
fidelity and represent the look and feel of
Spiriello Financial.
A my Mauri ello UX Por tf o li o
Brand Identity
Nathan Fogg’s Auto
OVERVIEW
A very close friend of mine launched a business and wanted to expand his digital
presence. He desired a very polished clean look to communicate the quality of work
his auto shop executes.
A large part of the project was creating social media profiles and gathering reviews
from current customers to generate interest from prospective customers.
ROLE
I worked closely with a copywriter to develop the brand idenity for Nathan Fogg’s
Auto. I was responsible for the entire technical effort and look and feel. There was
a wide variety of collatoral including the website, social media profiles, logo design,
business card design, T-shirt design, and photographer needs for the photoshoot.
I installed and customized a wordpress theme for the website and setup all of
the social media sites. I purchased and setup the domain and email for web and
mobile. Additionally, I coordinated the creation of the business cards with the printer
company.
SKILLs
C LIEN T RELA T IONS
F RON T - EN D D E V
SO C IAL M E D IA S T RA T EGY
P H O T OGRAP H ER
BRAN D ING
C US T O M I Z E D
LOGO D ESIGN
W OR D PRESS T H E M E
PRIN T D ESIGN
H T M L / C SS
N A T HAN FOGG’S AUTO
Logo Design & Color Palette
O r i g i n a l S k e tch
N A T HAN FOGG’S AUTO
Photography
I went to the shop for a day to take photos for the
website and other social media outlets.
nathan fogg ’s auto
Web
I lead the technical effort to install and customize the Wordpress theme. Take a look
at the website now http://nathanfoggsauto.com/
nathan fogg ’s auto
Social
I setup several different Social Media outlets for the business.
A my Mauri ello UX Por tf o li o
Enterprise Software App
DEKA Research & Development (under NDA)
OVERVIEW
The Enterprise Software is part of a software system paired to a complex medical
device. I’m unable to provide samples of my work due to a non-disclosure agreement
between DEKA Research & Development and a well known medical device company.
The application is part of a family of apps that make up the enterprise web based
software, and it is the largest and most safety critical of the suite.
The product is very niche, so we worked closely with a subject matter expert and a
few of their peers to help define requirements. The interface design was completed
in several stages. After system requirements were defined we developed workflows.
After they were approved by the client, business analyst and product owner, we
developed the wireframes. The wireframes are then reviewed by several parties
before they are developed (QA, business analyst, product owner, human factors,
software engineers, and the client). We worked in an agile development environment.
UX is partially embedded within that process, but we struggled to do so successfully.
ROLE
I worked with the product owner and business analyst to understand and reshape
requirements as necessary. I also contributed by developing workflows, designing
wireframes, updating documentation, and code HTML/CSS as needed.
SKILLs
C LIEN T RELA T IONS
USABILI T Y T ES T ING
ANGULAR J S
REQUIRE M EN T s GA T H ERING
A g i l e F RA M E W ORK
J QUERY
requirements definition
B A L SA M I Q
H T M L / C SS
W ORK F LO W S
AXU R E
BOO T S T RAP
W IRE F RA M ES
ILLUS T RA T OR
SASS
F RON T - EN D D E V
V ISIO
JIRA
prototyping
EXTJS
A my Mauri ello UX Por tf o li o
Glance Again Mobile App
East Coast Interactive
OVERVIEW
In today’s digital era, some people prefer creating their grocery or to-do lists in their
phones than on paper. The challenge posed is the process can be more cumbersome
than jotting it down on paper: n the time it takes to pull out the phone, unlock it, and
browse to the correct app, one could have easily pulled out come paper.
Glance Again is a mobile app unlike any other in the productivity or utilities category
because it allows users to turn any app (whether built-in or purchased) into static
content that can be viewed for a specified period of time without being locked out
from inactivity and having to navigate back to the content. The app can be used for
anything that needs to be referenced quickly, such as lists, notes, and pictures.
ROLE
I worked alongside other HCI graduate students to develop and design Glance Again.
It can be used for anything that needs to be referenced quickly, such as lists, notes,
and pictures. When designing this mobile application, we decided to take a user
centered design approach.
SKILLs
REQUIRE M EN T s GA T H ERING
W IRE F RA M ES
Requirements definition
USABILI T Y T ES T ING
usability goals
Prototyping
use cases
B A L SA M I Q
conceptual model
Proto.io
glance again
Requirements Gathering Activities
Due to budget and time constraints, requirements were gathered from
survey results and unstructured interviews.
s u rve y res u lts
•
42% of participants use handwritten notes regularly to track
daily tasks and refer to content. 35% said sometimes.
•
43% of participants use electronics regularly to track daily tasks
and refer to content. 27% said sometimes.
•
When using devices, 53% of users said they use built-in apps to
track their daily tasks and refer to content. 35% take pictures
and 28% use an app they have downloaded separately. Some
users mentioned also setting reminders on their phones and
sending themselves text messages to refer to later.
I n terview t h e m es
•
Interviewees took pride in physically crossing a task off of a list.
•
Interviewees like to use the core features that apps offer
including reminders, histories and viewing many pieces of
content.
•
Interviewees prefer using their phones because they are almost
always accessible.
•
Interviewees tend to forget their notes and where they place
them (especially handwritten).
78% of participants have taken pictures of items on their
phones to reference later.
I n terview t a ke a w a y s
•
50% of participants prefer to track lists and reference content
using a combination of phone and paper methods.
•
•
Participants that preferred to handwrite their lists and content
did so because handwritten notes are easier to use (69%). 30%
of participants said that there isn’t an app that is useful enough. Keep it simple. Don’t overload the application with extra
features that won’t be used by the masses. Less distractions
helps users get to the content they need faster.
•
Focus on recognition over recall. Users need to be able to come
back to information they have previously stored without having
to remember how and where that content is. Users should be
able to reference content without too much cognitive load.
•
Keep gathering user feedback. It will be important to keep
users tightly involved as we create conceptual models and
prototypes moving forward.
•
•
Participants that preferred to use their devices to access
content did so because their phone or tablet is usually in their
possession and the devices are easy to access (90%). 57% said
that it is easier to track many lists and different types of content
on their devices.
glance again
Personas
p e r s o n a s d e v e l o p e d f r o m r e q u i r e m e n t s g a th e r i n g d a t a
glance again
Usability Goals & Use Cases
u s a bilit y g o a ls
top 5 u se c a ses
Heuristic
Measurable Goals
Priority
Learnability
The app should be easy to learn for
novice and expert smartphone users.
High
Efficiency &
Accuracy
The app should allow users to quickly
and easily perform tasks after they
have learned how to use the app.
High
The app should allow users to understand what is expected on each
screen and how to interact with each
feature.
Medium
Low Error
The app should prevent users from
making errors and help them recover
quickly when they do make errors.
Medium
Satisfaction
The app should allow users to feel
productive, accomplished and satisfied.
Low
Ease of Use
1.
Start a Session
The user chooses to navigate to any other compatible app
within the app or take a photo to start a viewing session.
2.
Define a Session Duration
The user sets the duration of the session. The chosen content
will persist on screen until the session is complete and the
session duration is met.
3.
Extend a Session
At any point during or at the conclusion of a session, the user
can extend that current session to last beyond the original
duration that was set previously.
4.
Edit and Annotate a Session
During the session, the user can perform limited interactions
with the chosen content (i.e., scrolling in order to view more
content, annotating to cross off list items or make notes,
cancelling the viewing session and toggle between other
compatible apps).
5.
View Help Content
The user can view help content to learn about all available
functionality and to access the app settings. The system also
notifies the user with help content, such as a deficient battery
that may end a session early.
glance again
Conceptual Models
We created three low-fidelity, vertical prototypes to be used for user testing
during the Evaluation phase.
glance again
Conceptual
Models (cont.)
glance again
Usability Testing
The usability test methodology we used was informal in nature and provided qualitative data
addressing the usability needs for the Glance Again app. We asked users to complete the
following use cases: start a session, view and draw in session, and extend a session. As users
completed tasks we asked then to think out loud and rate the experience for its ease of use.
The feedback from testing drove further iterations to the prototype.
K E Y F I ND I NG S
1.
The purpose of the app wasn’t immediately obvious to the user.
As a newer concept, they didn’t have any previous experience
with a similar app that they could be applied to this app.
2.
When given the task to create one of three different captures,
the user didn’t select the capture that we had expected.
3.
Users didn’t understand exactly which apps would be
compatible.
4.
Users didn’t understand whether choosing existing images
would be from their phone’s photo gallery or the app’s photo
gallery of previously saved images.
5.
Users wanted to know what would happen upon closing the
app. They didn’t know if they would be brought back into a
paused session, or have to start a new session.
6.
Users expected to interact more within sessions rather than
just draw on top of sessions.
glance again
Final Prototype
The final interactive prototype was created in Proto.io.
Based on the findings and observations from usability
testing, we made the following design changes.
1.
Include introductory content to introduce
the purpose and functionality of the app.
As a new concept, users aren’t able to
apply previous knowledge to the activity. A
welcome screen and/or overlay help feature
may be necessary to provide first time users
with the direction they need.
Create Capture by
Action
Choose from gallery
Create capture from
phone’s photo gallery
Take new photo
Create capture by
taking a new photo
Take application
screenshot
Create capture from
existing mobile app
2.
Include help content post-introduction to
the app throughout the experience. At any
time, a user should be able to read help
content if they are still learning and
get stuck.
3.
Provide a more polished prototype.
Iconography and some light design
treatment will be applied to emphasize
each feature and the intended flow of the
experience.
A my Mauri ello UX Por tf o li o
i-Ready Reports
Curriculum Associates
OVERVIEW
i-Ready is an online educational software built for the Common Core, i-Ready
Diagnostic & Instruction providing valid and reliable growth measure and
individualized instruction saving teachers time at a fraction of the cost of similar
products.
ROLE
I specifically worked on designing the reporting aspect of this online product and
functionality in conjunction with the senior developer and project manager. I met with
internal stakeholders to meet the needs and objectives of the product. There were 4
tracks to consider while designing the product. Separate logins and dashboards for
Teachers, Administrators, Parents and Students.
I provided wireframes for development and high fidelity mock ups for the sales team
to begin marketing it to customers. There are 20 different reports that needed to be
outlined in a very short amount of time. After approvals, I began working on providing
the specifications and art assets to the senior developer to bring it to life in flex.
Additionally, I built the HTML and CSS for the website promoting this product.
SKILLs
wireframes
art assets
data visualization
H T M L / C SS
High-fidelity mock-ups
illustrator
C SS S p e c i f i c a t i o n s
i - RE A DY REPOR TS
Wireframes
I created two levels of wireframes. One was
created when we were still trying to finalize
the look and feel. I made sure to get this
version out to the lead developer so he
could start coding before I was complete.
This worked out very well and ended
up being the process we went by when
completing the remaining 19 or so reports.
The other level of wireframes created were
high fidelity. These were specifically for the
sales team. Marketing was producing a sales
guide for the sales representatives to bring
with them for client meetings. I made sure
to include dummy data and clean up the
look and feel.
semi final report for development
final high fidelity report for sales guide
i - RE A DY REPOR TS
CSS Specifications
The developer we worked with admitted he
struggled translating the look and feel of the
final reports into code. He admitted CSS was
not his strong suit. I am quite knowledgeable
in that area, so I specified as much CSS as
possible to ensure they communicated the intentional look and feel. The results were
nearly identical to my designs. Any minor issues
we faced we tackled and it went seamlessly.
i - RE A DY REPOR TS
Art Assets
I created icons for the UI of i-Ready. They are
vector based to ensure maximum flexibility
for resizing on screen. They were individually
exported as svg files for the developer to
embed in flex.
Amy MauriellO
p l e a s e v i s t a e m cre a tive . co m F o r e x a m p l e s o f m y v i s u a l d e s i g n w o r k