Hotailors is award-winning app that streamlines administration of business trips and decreases costs per employee's trip within SME and Enterprise organizations, by providing a single interface for booking anything related to business trips (flight, accommodation, insurance) and trip approval process.
Funded startup with enterprise clients such as Google and T-mobile. Product was in a state of rapid expansion with new features and system integrations to centralize the trip inventory management.
Client: mainly communicating with CTO, Scrum Master, Product Manager and Customer Success Manager (2nd Level Support)
Vendor: me + fellow UI designer Michal Ivanecky
As volume of required interaction with the system increased, UX became the bottleneck for overall performance. Client's presence is continual and necessary for understanding the status of budget allocation and vital for handling exceptions, when correctness of the request needs to be evaluated individually.
Project and Scope:
Project was focused on redesigning of an admin app for approval process only. Client's budget limited us to 120h of work in conjunction.
As a vendor that was chosen among 8 participants in a tender, I took a role of UX Lead figuring out the approach, leading efforts of a UI designer including mentoring activities, reporting the progress to stakeholders on a weekly basis and owning the solution. Agreed delivery assets were comprised of key user flows, wireframes and UI design.
Michal (UI designer) was also helpful force to tackle the contract and client relationship related communication with his empirical knowledge in this matter.
Admin app serves as inbox collecting all internal trip requests. Based on a quick assessment admin changes the approval status of the request. Businesses can set up comprehensive violation rules for request auto-approval, however as nature of traveling is complex, sometimes violation of rules is inevitable and request needs a human evaluation.
App servers two different users with different responsibilities:
1. Approver (on the client side) cares about violation of the traveling policy established with rules by client
2. 2nd Level Support (on the side of Hotailors team) serves as troubleshooting party for case-specific incidents as they have exceptional access channel to services offering transport and accommodation
Approval is occasionally a time sensitive task, therefore prioritization is a key component of the UX in here. Made up example: Google supports contributors around the globe by reimbursing the trip inventory costs for attending the Google I/O event. The sooner the event is happening the more requests are accumulating. When approver reach the request, the flight might not be available anymore and there has to be an effective channel for back and forth communication not just between the traveller, admin and services for transport and accommodation. This is when Hotailors come to the scene.
After the stakeholder workshop we iterated remotely over the situations which are distinct enough to be solved by admin in a different way and represented a recurring patterns. Set of collection was mapped to system elements, such as request statuses and Travel Policy invalidation rule.
Stakeholders Workshop → Key user flows → Iterating on user flows → Wireframing → UI design
Below you can see archetypes of key user journeys noting the sequence and direction of status change.
Snapshot of wireframes for listing and detail. There was a lot of work behind the correct clustering.
- Emphasis on easy to spot urgent requests in a listing
- Application of User Journeys to validate the volume of UI containers for representation of information
- Empowerment with diagnosis affordance through introducing activity feed in the request detail screen
- Clustering of the information and actions into independent boxes determined by the bonded contexts
- Segmenting inbox items automatically into collections in a listing
- Applied progressive disclosure to surface the summary info of the bounded contexts and separate it from the secondary level information
- Improved the information and visual hierarchy
- Iterating over the colors for emphasis of the clues for severity judgement
- De-emphasizing the secondary information
Develop your own website with Mobirise