monaeo calendar case study

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


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.


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.



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?


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


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


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


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


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


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.


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.


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


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


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


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


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

monaeo calendar case study

Data & Analytics