As the UX Interaction Designer, my responsibilities included creating Sitemaps, Heuristic Evaluation, Interaction Design, Visual Design, UX Research, CSS Markup, and QA.
The objective of this project was to completely redesign Aero, an online desktop software that was used by Above the Wing (ATW) agents, mainly lobby and gate agents, to accommodate reservations and information for passengers. We focused primarily on the Passenger Name Record (PNR) section of the site.
Our goal was to make it easier to use, more intuitive, and more consistent across the site. We also wanted to improve the aesthetics so that it had a more modern user interface.
I actually started on the first phase of this project while I was at Critical Mass. At the time, Aero didn’t exist. We built a GUI from the ground up that would replace the “green screen” (commands) that the agents were used to using.
Click on a thumbnail to expand and view all images
For the project kickoff, I went to O’hare International Airport with a couple UX designers and UX Manager on my team to conduct some shadowing and observations for the current Aero experience. I recorded my observations by taking raw notes and then creating an excel/matrix, as you can see on this PDF for the entire software. We also ran a heuristics evaluation, and I put together an extensive sitemap for the current state of the Aero experience.
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all hidden images
The PNR is where we I focused most of my time on. Interaction Design and Information Architecture were top priorities of mine while placing thought into the designs. I needed to be sure that the tool was easy to use, enjoyable, and of course, efficient. We had an existing style guide that the Visual Designer and I would continuously update. We were really going for a more modern look and feel to the GUI. I used Adobe XD for the mockups.
Click here to view the mockups with annotations.
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Our stakeholders frequently changed their minds about conditions and elements - whether to include them, delete them, change the icon, change the color, change the placement, etc. There were several discussions held, and sometimes these decisions would change more than once in the course of the day. As I describe in more detail in the Challenges section, this caused a lot of disruption in my workflow. These were the latest designs before I rolled off the project.
Click on a thumbnail to expand and view all images
Click on a thumbnail to expand and view all images
Click on thumbnail to expand
Click on a thumbnail to expand and view all images
I stumbled across a few challenges while working on this design. To start off with, at the time, Adobe XD did not have any symbols features. As I mentioned earlier, decisions were changing on the fly during this project. So, with Adobe not having symbols, I would have to manually change every instance of an element each time a change needed to be made. It was not an efficient way to work. Luckily, after a couple months, XD finally rolled out with the symbols feature, which was super helpful.
Speaking of efficiency, at the time, before apps like Sketch, SketchMeasure, Zeplin, etc. were available, I had to manually markup the CSS. This also was quite time-consuming and tedious, because, again, changes to the designs were continuously being made. Here is an example of one of the CSS markups I annotated.
Another challenge was that I didn’t understand what some of the actions were and the rules and conditions for each, such as ARNK, and “End and Retrieve.” I spent some time understanding these so that I could better design the flows and interactions that would make sense. PNR Seating also had several rules and conditions that affected the flow.
Furthermore, some of the front-end developers were not coding the designs accurately. I spent a lot of time doing some QA and sending emails, messages, and having in-person chats to let them know these issues that needed to be fixed.
Lastly, our UX Manager decided that we move our design assets into a new prototyping tool we started using, called Justinmind. It became inefficient and not the best practice considering how time-consuming it was and that we still had a lot of work to get done with the designs.
Click on a thumbnail to expand and view all images
Click on thumbnail to expand
I'm always interested in expanding my network or solving new challenges!