AHT Portal - Media Upload Interface

This one is going to be a doozy, so hold on to your design thinking hats ladies and gentlemen. AHT is a luxury travel agency that offers discerning members recommendations for luxury travel as well as the ability to bid on curated auctions and purchase discounted luxury vacation packages at select resorts. My role at AHT was to redesign and build out their new corporate site. In addition, I was also responsible for updating and building out the backend portal used to interface with the in-house CMS that was accessed via secure login by hotels and travel agents. The only technical individuals working on the project were myself and one backend developer. This case study will focus on the media upload interface portion of the backend portal.

 

This is an example of how any media uploaded via the portal backend would be translated to the front-end consumer portion of the site.


 

The Ask

A visual representation of the architecture and flow of the backend portal to consumer facing side that is AndrewhHarperTravel.com.

New layout of the media upload interface.

The initial request was to update the design of the already existing backend portal with a cleaner interface for data collection. The largest part of this task was taking the multi-step work-flow of uploading media to the front end and “simplifying” it into a self-service interface where the user could manage their own image library. The previous process tasked the hotel property to fill out a text form that generated a “ticket” which was then routed to a photo editor for approval. The undertaking was both lengthy and tedious, and often hotel properties would go for months without updated images.

Constraints:
I needed to create a new interface for the portal while maintaining a look and feel that existing customers were used to.

The media page needed to be as self-sufficient as possible.


The Process

aht-case-study-banner.gif

Alright! *Rubs hands together giddily* I was able to travel to a few of the hotel properties while on vacation and took the initiative to conduct mini user interviews with a few of the property managers about their use of the media upload interface. We discussed how they currently used the interface, and what where the pain points that they experienced while using the interface. I also asked for examples of any interfaces that they used regularly that they enjoyed using. These guerrilla style interviews allowed me to glean some small pieces of information on what was missing from the site and how the property managers ideally would like that portion of the site to work for them.

Armed with this knowledge I did a mini discovery session again researching the most popular image upload interfaces (including the ones suggested) to see how I could tailor what was already out there to what AHT needed in the VERY short turn around time required. This was key because I needed to the interface to feel as familiar as possible to encourage ease of use. I also mapped out a user journey based on planned behavior, detailing all of the steps that a user would possibly take in order to add media to their portal page.

Based on this information I was able to mockup both low-fidelity and high fidelity mockups that we used to build out the interface with the help of our backend developer who linked all of the fields to their counterparts in the database.

Example user journey of how a property manager might interact with the new interface.


The Prototype

TRY THE INTERFACE BY CLICKING THROUGH THE PROTOTYPE BELOW
(Tap to Open in a New Window)

 

In Action


Evaluation

This is one of those real world projects where your mettle as a designer is tested. The project scope of this initially was very small. The company was under the impression that only a few static pages were needed to tide them over until they could hire more resources to complete a more robust overhaul. Unfortunately, that was not the case. My co-worker and I ended up being tasked to completely build this whole thing out in a matter of a few months due to legal constraints. As a result we really had to buckle down in order to get everything built in a timely manner. He learned a bit about design to understand my needs and I had to learn Python on the fly in order to help build out the pages and attach them to the database. There was a lot of triage that had to happen in order to figure out the bigger things that needed doing now, vs. features that could hold off until later. I would have liked to have added an iteration of the portal that accounted for multiple languages since we had such a large portion of properties in foreign countries. I would have liked to have performed more user testing to see how they actually used the newly designed interface so that we could iterate upon the design.