Cycling

UX Design, UI Design

PERI

01

Background

Peri® is an enterprise travel and expense management application developed for use on mobile devices and as a web-based desktop application. I spend months on this project with Yan Giet, an amazingly talented Product Manager to push it forward. We had a enjoyable and challenging journey from the very beginning, when the web App is just a stretched version of mobile app, to all the screens for each roles polished and implemented.
02

Roles

By interviewing the finance director in the parent company, we figure out and illustrate four primary roles in the system:
Cycling
Cycling
Cycling
Cycling
03

System Structure

while identifying all the roles that are involved in the entire process, Yan and I work together to fit roles into the process and narrow down every piece.
Pre-trip Trip Request
Before the trip, the submitter should draft and submit a request for that upcoming trip. He should provide the leaving/returning date, destination, mode of travel, etc. He is also able to send notes to the travel agency, which the company is in cooperation with, to add specific requirements for booking within the platform. After the request is approved, he will be able to create expense reports out from the approved trip request after the trip.
Cycling
Post-trip Expensing
After the trip, the user is able to log in every reimbursable expense in his portal, then put the expenses together and create an expense report to submit. The approval manager and auditor will check the report and once it gets approved, it goes to finance team for imrebursement.
Cycling
04

Refine Requirements


Looks good, ready to go? No, I need more information!
Like..
  • What are the needed input/output of each stage?
  • What if the manager wants to keep the report as it is without further editing? Other exceptional conditions?
  • What the user will see when first log into the system?
  • Different fields for different expense category?
  • ...
After questioning Yan and our approval managers and auditors, I created a spreadsheet and listed all the data fields(both input and output, and remove all the redundant fields that were thought to be ‘necessary’ before) and UI components on each stage. Furthermore, I inserted exceptional stage/blank version in-between stage and stage.
Cycling
05

Design and Deliver


Ingredients are ready and then it was the time to do my work, with Yan and other co-workers having my back. We successfully design and delivered mockups of four web portals.
Cycling
After rounds of internal(present to other team who are future users and dev team) and external(sales and conference demo) demo. They are implemented by our dev team one by one. Guess what? our team has already been using the platform we built today(farewell Databasics)!

Here is a small video we put together for Peri, which I thought is pretty cute. Hope you enjoy it.