Employee Travel Management App. My role as a UX/UI Designer involved addressing inherited design challenges, ensuring cohesiveness, and enhancing usability for a user-friendly journey.
Upon joining the project, I encountered TMS, a substantial app that had undergone multiple iterations and redesigns under the guidance of various designers.
As the app continued to evolve, we recognized an opportunity to perform a critical user experience analysis. Although relatively modest in scope, this analysis enabled us to pinpoint areas of concern, confusion, and potential improvements. Subsequent to this analysis, we compiled a list of "quick wins" and formulated a strategic action plan for their implementation. This laid the foundation for ongoing enhancements in future iterations of the app.
1.2 Years (upon my arrival)
UX/UI Designer
1 Product Owner
1 Scrum Master
3 - 5 Developers
1 QA
Figma.
SCRUM
Project built in .NET,
The TMS project's main challenge was to improve the efficiency of tracking employee travel and simplifying the related paperwork, including information, permits, approvals, and more. The objective was to streamline the entire process when an employee needed to go on a trip.
Furthermore, upon my arrival, it became evident that the app had encountered challenges during the transition between designers and the incorporation of developer-designed elements when designers were unavailable. This resulted in a lack of cohesiveness in certain sections and functionalities of the app, negatively impacting the overall user experience.
The TMS project had an overarching goal of revolutionizing the tracking and management of employee travel within the company. This involved a concentrated effort to streamline paperwork, information handling, and the approval process, ultimately aiming to create a more efficient and user-friendly experience.
As the UX/UI designer, my primary focus upon joining the project was to address the challenges inherited from the previous design team. I aimed to ensure a cohesive and unified user interface by resolving issues that had arisen during the app's transition between designers. A key emphasis was placed on enhancing overall usability and consistency, with the ultimate goal of improving the user experience across all aspects of the application. The project's scope extended beyond the app's core functionalities. It encompassed addressing these inherited issues, ensuring design consistency, and conducting a comprehensive cleanup of both the current Figma files and the app interface.
Upon my arrival, the TMS project required a departure from the conventional design process. This was due to the fact that the app had already been created and was extensive, complex, and deeply integrated within a large company. This presented a distinctive challenge that leaned more towards a UX analysis. It's important to note that the displayed images were created for reference and are intended for use in this case study; they do not represent the actual application.
The TMS app, already substantial, was a complex entity within a colossal company. The initial step was to comprehensively understand its functionality and purpose. Engaging with key stakeholders, including the product owner, scrum master, design lead, and developers, was crucial. Through discussions, I gained insights into the app's intricacies, realizing that its primary focus was on authorizations rather than ticket purchases, which was an initial misconception. To further contextualize my understanding, I attended client meetings as an observer, absorbing the environment and subsequently clarifying queries with the product owner. Simultaneously, I reviewed pre-existing files, organizing and annotating them to enhance my grasp of the app's functionality.
After gaining a comprehensive understanding of the app and making several minor changes along the way, the client recognized the necessity of a UX analysis. Consequently, I initiated the planning of testing sessions and research. However, due to the client's desire not to inconvenience current users and the limited timeframe available for this analysis, an alternative approach was adopted. The research was conducted using different materials, including comments, tickets, emails, reviews, etc., and techniques like "guerrilla testing" to conduct interviews and collect the required information.
Given the constraint of not directly engaging with real users, I adopted an alternative approach to access and make use of real users information. I began by collating comments received via email and data from past surveys. Additionally, I delved into the records of tickets and previously reported issues, with a particular emphasis on matters related to usability. Simultaneously, I remained vigilant for any potential bug-related insights that could be gleaned from these sources.
Due to the absence of current user interviews, we opted to conduct tests with potential new users within our department, specifically those who hadn't previously used the app. To ensure an efficient and informed testing process, I focused on testing a specific user flow with various scenarios. To facilitate this, I prepared prompts for each scenario, describing potential situations along with the required information for submitting a travel request through the app. In total, I created three prompts for each scenario, both in Spanish and English.
Once the prompts were finalized and reviewed, we initiated the testing phase with the users through video calls. During the introductory explanation, we provided minimal information about the app, primarily emphasizing its function as a tool for travel requests, including information sharing, approval processes, and overall travel management.
Users were instructed to envision themselves in the travel scenarios presented in the prompts, carefully reading and thinking out loud as they completed them. We also sought their permission to record the call and screen, ensuring that we had evidence for reference and review. In addition to tracking their actions, we observed facial expressions and emotions. At the conclusion of the session, we engaged them in a discussion, asking about their feelings and inviting suggestions for improvements or areas of enhancement within the app.
Subsequent to gathering responses from the interviews and research, I initiated the card sorting process, which involved a comprehensive analysis and categorization of the information. This categorization was carried out in two key steps. Initially, I assessed the data in terms of its relevance or priority, essentially determining the significance of each issue. Following this, the information was further organized into topics, consolidating related data into distinct topic groups.
After classifying all the information, I compiled a report to present the results to the Product Owner, Stakeholder, and Design Lead. During this meeting, in addition to presenting the identified issues, we delved into potential action items. These action items were marked with a 1 to 5 tag system:
1. Fix: Issues that could be promptly addressed.
2. Bug: Problems primarily related to coding issues.
3. Client Confirmation: Matters likely to require a larger budget and exceeding the project's original scope.
4. Ask the Client: Issues that might conflict with a company requirement or necessitate process improvements rather than direct app modifications.
5. More Info Required: Problems necessitating further exploration to determine the most effective solution or requiring more extensive research for a comprehensive understanding and resolution.
With all the information and tags defined, we initiated the process of creating action items for the "quick wins" (those tagged with "fix" or "bug"). These were prioritized based on their importance, while, in parallel, we engaged in discussions with the client during subsequent meetings to address the other tagged items.
One of the problems discovered pertained to the excessive number of banners within the app, which was impacting the screen's visibility. In response to this issue, several solutions were proposed, including streamlining the number of banners, adhering to a consistent format, and prioritizing their content. The principle guiding this approach was that "if everything is important, nothing will be." As a result, the proposal involved relocating the banners to a dedicated notification section, where all the relevant information could be accessed in one place.
Another issue that came to light was the inconsistency in the search and filter bars throughout the app. In addition to their varied visual appearance, each search bar exhibited different functionalities, such as triggering a search by clicking a button or using the "enter" key, leading to a less-than-optimal user experience. To address this, I proposed standardizing the functionality to make "enter" the default action for initiating searches while retaining the on-type functionality only in specific, necessary areas. This approach also encompassed standardizing the visual design, ensuring a consistent look and feel, and maintaining a uniform order of elements within the bar.
One of the most significant proposals centered around the organization of a lengthy and complex form within the app. This form featured an extensive amount of text and more than a hundred fields, making it challenging for users to navigate. While it wasn't feasible to substantially reduce the number of fields due to the company's requirements, I endeavored to enhance the form's clarity and user-friendliness. The objective was to make the extensive form more digestible, ultimately improving the overall user experience.
One of the most significant proposals centered around the organization of a lengthy and complex form within the app. This form featured an extensive amount of text and more than a hundred fields, making it challenging for users to navigate. While it wasn't feasible to substantially reduce the number of fields due to the company's requirements, I endeavored to enhance the form's clarity and user-friendliness. The objective was to make the extensive form more digestible, ultimately improving the overall user experience.
In the original form, after completing each page, a "continue" button allowed users to move forward while simultaneously checking the information on the entire page for any missing fields or errors. While this approach made sense logically, it posed a challenge, particularly in the case of multi-destination forms, where the second and third steps could become quite lengthy. To address this issue, it was recommended to implement a section-by-section review process. Specifically, the suggestion was to add the validation function to the "add new destination" button, enabling users to review all information before proceeding.
In addition to this, a similar validation process was implemented for the security information section. Furthermore, the developers introduced field-level validation, which checked for errors immediately after user interaction. This proactive approach made it easier to identify and address any issues while filling out the form.
A noticeable issue was the suboptimal organization of the form, resulting in a fragmented flow and making the process seem longer and more complex for users. To rectify this, a proposal was submitted to the stakeholder, advocating for a thorough reorganization of the form. This would involve the creation of new sections for improved information structuring. Additionally, a recommendation was made to move the general information area to a new step or screen within the form-filling process. The primary objective was to provide users with a clear sense of progress, thereby enhancing their comprehension of the form and reducing the potential for errors or confusion. This approach focused on grouping related information or logical sequences together, resulting in a more streamlined and user-friendly form.
This project stands as one of the most enlightening experiences in my career. I'm profoundly grateful to the company for entrusting me with such a complex and extensive task. While I've had some exposure to UX in the past, the challenges posed by this app, coupled with its sheer complexity and scale, provided an immense learning opportunity and a wealth of new knowledge.
Despite some proposed solutions not being implemented as suggested, the process of devising new ideas was incredibly stimulating. Additionally, this project reinforced the importance of effective onboarding, comprehensive documentation, and clear communication in ensuring a thorough understanding of the app.
Furthermore, it offered valuable experience in engaging with clients and navigating stressful scenarios to reach mutually agreeable solutions. While I may not witness these changes firsthand, I am content knowing that they have been presented and are under consideration for future iterations. I wish the best for this project and the dedicated team behind it.