Navan
As a Product Design Intern at Navan, I led the end-to-end design of the "trip proposal" feature. This feature empowers travelers and streamlines card activation, addressing over 30,000 user-reported issues related to declined transactions.
Project details
Project
UI/UX design
Role
Product Design Intern
Duration
Jun–Aug 2023 (9 weeks during a 12-week internship)
Team
2 Product Designers 1 Product Manager 3 Engineers (Web/iOS/Android)
Led design decision-making and created brand guidelines
Conducted and synthesized interview with users and stakeholders
Designed wireframes for a responsive website
Designed interactive hi-fi prototype
Created the design solution, a virtual musical instrument app
Led the end-to-end design of a new web and mobile app feature, streamlining corporate card usage for business travelers. Launched in Q1 ‘24, resolving user pain points that were addressed from over 37,000 reports.
Developed and iterated high-fidelity prototypes in Figma, working closely with engineers and designers to ensure technical feasibility and improve user adaptability of the new feature.
Scoped and prototyped the product roadmap, collaborating with 10 cross-functional team members to align business objectives with design and technical requirements. Presented final designs to senior leadership and engineering teams.
Designed user-friendly micro-interactions with clear error feedback during the reimbursement process, reducing error rates by 15%.
Challenge
Business travelers were frustrated by inconvenient card lockouts due to company expense policies
10,107
Card transaction declines
4/1/2023 – 6/30/2023 (3 months)
27,736
Flagged manual transactions
4/1/2023 – 6/30/2023 (3 months)
Objective
Design Solution
Designed a feature for app&web that allows users to temporarily unlock their cards
User Flow
Prototype& Iteration
I refined the feature by continuously iterating the design, focusing on UX principles, intuitiveness, and user engagement. This cross-team effort involved adapting designs through feedback from researchers, designers, product managers, and engineers. With the feature's launch set for after my internship, I relied on feedback from internal users to guide improvements.
Improvment 01
Refined design focuses on its relevance and user context
Initially, the entry point was designed to minimize steps for accessing the feature. This featured a bottom sheet accessible via a sticky button on the main page, aiming for easy accessibility. While this approach reduced steps and was noticeable to users, it was ultimately abandoned due to its misalignment with the information hierarchy of parallel elements.
The focus shifted from mere accessibility to integrating the feature into a relevant page location, enhancing user experience. The entry point was reevaluated for user-friendliness, with multiple iterations undertaken to identify the most logical and cohesive locations. This process involved continuous feedback from the design team. Additionally, leveraging existing design patterns facilitated more efficient development.
Improvment 02
Improved design with a comprehensive approach to travel expenses
The initial design focused on reviewing submitted travel plans and approval statuses. The first design featured a bottom sheet accessible via a sticky button on the main page, aiming for easy accessibility. While this approach reduced steps and was noticeable to users, it was ultimately abandoned due to its misalignment with the information hierarchy of parallel elements.
The improved design, with a comprehensive approach to travel expenses, offers a more effective travel expense management experience.
During collaboration with another team's designer, I discovered an existing pattern, the transaction overview, which could enhance this feature. By incorporating it, users can now efficiently manage and review their business trip expenses on a trip-by-trip basis.
This addition provides accessible information for users to review, plan, and manage expenses related to each trip. This revision taught me the importance of considering a holistic user experience, beyond just addressing the initial problem.
Final Designs
This feature allows business travelers to activate their corporate credit cards for 'on-trip' use, helping them avoid the frustration of transaction declines.
Multiple Entering Points
Travelers can access the travel plan submission form through multiple relevant entry points, ensuring easy access to the feature. These entry points include the cards page, manual transactions page, as well as through email or push notifications.
Submit and Review Travel Plan
Travelers submit their travel plans through a form, which also shows their company's approval policy. Post-submission, they are directed to a trip details page displaying their entered information, policy details, approval status, and a summary of trip expenses, ensuring a streamlined and informative experience.
Get Approval, Use Credit Cards
Once the manager approves, the traveler is notified via email and push notification. Following this, their 'on-trip' status is activated for the duration of the submitted schedule, allowing them to use their company credit card accordingly.
Review Trip Expenses
Travelers can review expenses for each trip as they occur, facilitating efficient budget control.
Handling Travel Plan Rejections
When a manager rejects a travel plan, the traveler is notified immediately by email and push notification.
Repayment for Pre-Approval Expenses
Under a 'flag everything' policy, travelers are allowed to use their card while their travel plan is pending approval. In this case, if repayment is required, travelers can smoothly follow the process upon receiving a repayment notification.
Final Takeaways
While working on this project for 9 weeks with 10 cross-functional team members, I've learned a lot while going through unexpected challenges with my team.
Understanding users
Designing across multiple teams and products taught me the critical role of user empathy. Simplifying complex backends into intuitive designs was key, driven by understanding user experiences.
Collaboration
Identifying and communicating project obstacles was essential. Working with diverse teams enhanced our design clarity and efficiency, thanks to shared visuals and clear rationales.
Product roadmap
My role in feature development highlighted the balance between meeting immediate needs and planning for future enhancements. Collaborative efforts with the Product Manager and feedback from engineers and other Product Managers ensured our designs were robust and aligned with long-term goals.
