Transcript
Monaeo is a location data analytics software that serves to help enterprises and high
net-worth individuals manage tax exposures created by business travel.
BRIEFThe current calendar is limited in features. The current UI design is also not concurrent with iOS Human Interface Guidelines.
GOALCreate a user-friendly calendar with robust features and functionality
DELIVERABLESA calendar prototype to hand off to development teamCalendar Style Guide
ROLEPrincipal UX|UI Designer
TOOLSUser ResearchCompetitive AnalysisUser FlowsSitemapWireframes | SketchPrototyping | FlintoUser Testing
TIMELINE6 WEEKS
Overview HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
Overview HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
Heuristic evaluation of tHe current app
The app uses a very casual tone to communicate with the user, making the app seem personable.
The app adopts the standard real world calendar layout and conventions.
Popup right appears right below the highlighted boxes thus clearly communicating what the popup is referring to and what the task is.
The change of highlighting color provides feedback to what information has just been changed.
User doesnt have the freedom to select multiple days. When user selects a day it takes them to the edit screen.
User doesnt have to remember information from one part of the dialogue to another.
1.0
1.1
1.3
1.5
1.6
1.2
1.4 1.7
1.1
The user knows right away that the dates blocked in orange refers to data gaps that need to be fixed. The question is direct and the user is clear in what next steps to take.
App provides user with a clear way to exit calendar.
1.2
1.31.0
1.4
1.5
1.6
1.7
Heuristic evaluation of tHe current app
Action options are very linear.
There is no undo feature.
User is clear on distinguishing between different actions.
App does not follow iOS conventions.
There currently are no error messages.
User recognizes objects, actions, and options.
System remembers frequently used locations to help users along task.
Overall design is minimal and all relevant elements are easily visible.
There is not sufficient dialogue to help user recognize, diagnose, and recover from errors.
App provides sufficient help via in-app dialogue to help users complete tasks.
Overview HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
EY Tracer iCal Google Calendar Sunrise CalendarCalendar UI design Uses calendar grid
formatHorizontal line separating the weeks
Horizontal line separating the weeks
Horizontal line separating the weeks
Different views N/A Day, Week, Month, Year
Day, Week, Month, Year
Day, Week, Month, Year
Use of color coding Uses three colors to indicate Not Cap-tured, Not Submit-ted, and Submitted
Color coding differentiates between different calendars
Different colors represent different type of calendar events
Different colors represent different type of calendar events
Add a new event N/A Plus icon in top right Plus icon on bottom right
Plus icon in top right
Event indicators Box is separated with dual colors
Circles Circles Circles
Header NavigationMonth View
Settings Back, Search, Add New Event
Settings, Today, Op-tions Menu
Settings, New Event
Footer Navigation Today, Capture loca-tion, Submit all
Today, Calendars, Inbox
None None
Calendar should have a clean minimal design due to the amount of elements on the screen.Colors could/should be used but the palette is limited, so as to not confuse the user.Main actions are located in the header navigation, or where it is highly visible and secondary actions are located in the footer bar.Different views should be available to user.
CONClUSIONS
coMpetitive analysis
In order to build a user-friendly and
intuitive calendar app for Monaeo, I had to
better understand the nuances and
complexities of popular calendar apps.
i chose the top 3 calendar apps, as well as
an app from ernst & Young which provides
a similar service, and churned them through
my analytical process. Unfortunately, I wasnt
able to fully get into the EY Tracer app
because I needed a Ernst & Young account.
Overview HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
Overview HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
coMpetitive analysis / EY TRACER
User is able to easily switch between months.
Each day is split into halves (AM and PM). The day box is split vertically to be able to communicate the status of that day.
The info for whichever day is selected, broken up into AM/PM.
The legend for the colors and what they mean.
Footer contains the main functions.
2.0
2.0
2.1
2.2
2.3
2.42.2
2.3
2.4
2.1
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
user researcH
The resources for user interviews were not available to me,
so I decided to comb through tons of support email from
existing clients and frequently sat in on calls with
customers. I was able to understand how they used the
app and discover what pleasure and pain points they had
when using the app.
BlacKeD out to protect client privacy
How can I tell if Im in
two locations on the
same day?
What if I wanted to edit
a day at the beginning
of the month and end of
month at the same time?
Is there anyplace to put important imformation as to why your client was in
a specific location?
What if I just wanted to see which days I was
in a certain location?
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
PrOFiLe
GeNDer
AGe
LOCATiON
OCCUPATiON
FREqUENT TRAVElER
MAlE
52
NEW YORK
SENIOR VP
BiOGrAPHY
TeCH
GOALS
FrUSTrATiONS
FeATUreS NeeDeD
Tom travels frequently due to his companys recent expansion across the domestic U.S. Hes needed at the various numerous locations to oversee the development of each branch. He stays at each location for weeks at a time, which opens him up to tax vulnerabilities. Because of his busy travelling schedule, Tom uses only the necessary apps to increase productivity. He likes to get the task done as efficiently as possible, as quickly as possible. He also appreciates being able to access all the information pertaining to his travelling schedule when needed.
Hes not what you would consider tech savvy, so he likes his apps and tools to be easy to use and intuitive.
iPhone, MacBook Pro
Browse feature to be able to personally ensure that data is accurate Ability to add and organize notes pertaining to his travel For the app to be smart and generate results based on his past activity
Be protected from tax vulnerabilities Wants to complete tasks as efficiently as possible Wants to be able to access his information quickly and expects the information
to be fully accurate
Doesnt like it when he gets confused while using an app Doesnt like being bogged down by unneccesary app features
Using the research from
tons of support emails,
conference calls with
clients, and interviewing
the Monaeo support
team, I created a primary
user that best embodied
the Monaeo user.
Thomas
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
user floW CONFIRMING GAPS
Dashboard with alert
Calendar year view with gap notification
April with 3 location guesses in orange
April with 3 activities guesses in orange
Select New location
Are our guesses correct?
Are our guesses correct?
Tap alert Tap on April Tap NO
Tap YES
Tap on first location gap
Tap on secondlocation gap
Tap on thirdlocation gap
Tap EDIT Tap NYC
Tap DONE Tap DONE Tap DONE
Tap SElECT
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
user floW BROWSE DAY
Month of April
locations populate that start with N
Day view New entry
WorkPersonal
Non Taxable Work
Day view with new location added
Tap on March 6 Tap New Start typing in New York
Tap location Field
Tap New York Tap DONE
Tap DONE
Tap Activity Field Tap Non Taxable Work
Tap DONE
Tap Add Note Type note
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
user floW FILTER SEARCH
Month of March locations populate that start with NCreate New Filter
Create New Filter
Create New Filter
Blank location field
WorkPersonal
Non Taxable Work
Calendar with days highlighted that
match search criteria
Tap FIlTER Tap By location Type location
Tap New Jersey Tap DONE
Select End Date
Tap Activity Field Tap Non Taxable Work
Tap DONE
Tap DONE Tap APPlYTap By Date Select Start Date
eXplorinG tHe solution
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
The research resulted in a list of features that
users needed. I used feature prioritization to
decide on which features to build first. I also
established what the Most Valuable Product was.
Essential
Nice to Have
Low Effort High Effort
View/Edit: Block of Time: Whole Day Half Day
Edit: Purpose Location
Confirm: Purpose Location
Settings: Color Code Purpose
Settings View: By Week By Bi-week By Month
Edit: Select Multiple
Confirm: Select Multiple
Edit: Gaps
Filter: Whole Day/ Half Day Data: WD/HD
Filter: City Data: City
Filter: Purpose Data: Purpose
Submit feature
Ability to split days
Changing Champion
Add notes and photos
MvP
12 users
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
DesiGn stuDio
a | B testinG
A B C
I opted to go straight to low fidelity wireframes due to the nature of the project. It was easier and faster to design the
many elements of the calendar on the computer than sketching by hand.
1 Users : A | 2 Users: B | 8 Users: C
Users preferred the clean and simple design of option C. It was also easier to comprehend which city corresponds with which date. It was also clearer what task needed to be tackled in option C.
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
features iMpleMentation
User is able to select multiple days.
User is able to edit location
User feedbackon days selected
User feedback on new location selected User is able to edit
multiple days and confirm gaps.
User is able to edit activities for multiple days
User is able submit completed tasks.
User feedbackfor submitting.
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
features iMpleMentation
User is able to add a note or image.
Ability to have multiple locations in a single day.
Ability to designate the champion or main location.
Ability to create search filters for current data
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
user test finDinGs CONFIRM GAPS
User just started tapping in the calendar area rather than tap the select icon.
Icon isnt instantly understood.
User needed to be able undo actions. User needed more
feedback on what task they just performed.
User liked the feedback on which days they just selected.
User thought the circle selection visual might get messy if the majority of the calendar is selected.
User wanted a simpler way to edit both location and activity.
Utilizing treats to lure user testers in a coworking office space, it was
a good method to test a group that was diverse of all ages and
professions.
12 USerS were TeSTeD and audio recorded.
Confirm all gaps in a month
Add a location, activity, and a
note to a day
Submit a pay period
Perform a filter search
TASKS
My first instinct is to start tapping on the days.
These circles dont feel very clean
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE
user test finDinGs SUBMIT PAY PERIOD
user test finDinGs BROWSE DAYS
Font size needs to be bigger.
Font size needs to be bigger.
User didnt know what this was.
Use of hint really helped the task.
Redundant icons.
User knew what to do because of the color highlight.
Many of the issues that were prevalent in the user test for confirm
gaps apply to this flow as well.
Needs more spacing between locations so that the user doesnt select the wrong location
I know its a trophy, but Im not sure what
it stands for.
I have to squint to see those words.
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE FINAL
https://www.flinto.com/p/6b5fe824
prototype
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE FINAL ITERATION SITEMAP
user testinG iteration
User can select and deselect by directly tapping on screen
Select All and Clear feature to select and deselect gaps with one tap Ability to edit both
location and activity on the same screen
Increased spacing between elements
Adjusted font sizefor legibility
User knows exactly how many days need to be adjusted
Color coding different activities
Square selection indicator provides calendar with a cleaner look when many days are selected at once.
Icons are clarified by text.
Constant user feedback
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE FINAL ITERATION SITEMAP
user testinG iteration
Removed extraneous information
Made adding notes a primary feature
Easy access to secondary features
Removed redundant icons
Changed champion location icon to a star
Feedback makes it clear that the star is referring to the champion location
OVERVIEW HEURISTIC EVALUATION COMPETITIVE ANALYSIS USER RESEARCH ExPLORING THE SOLUTION WIREFRAMES USER TESTING PROTOTYPE FINAL ITERATION SITEMAP
siteMap
New calendar sitemapCurrent calendar sitemap
Current monthDays
Days
Edit location
Edit location
Edit activity
Edit activityPast months
Current year
Edit location
Edit location
Edit activity
Edit
View
Add note
Add location
Add attachment
Take photo
Choose file
Add charge code
Add expenses
Edit activity
Submit
Past years
Months
Current pay period
Days
top related