MOBILE USER CENTERED ECOMMERCE DESIGN

Airport gift shop website wireframes

Airport gift shops are wonderful places for travelers to find gifts, travel supplies, and even snacks. But many busy travelers don’t have enough time for browsing, or just don’t feel like navigating crowded stores. As a result, my team and I were tasked with developing a new mobile-first website that would allow users to browse their airport’s gift shop on their smartphones, and even place online orders.

Context

Lesley University Course Project

My role

UX researcher (part of a team, and individually) and UX designer

Stakeholder

Professor Darrell Penta

Target Users

  • Have shopped at an airport gift shop before
  • Age: 21-65
  • Geography: US only
  • Language: English

Timeline

The project took 6 weeks to complete, with some tasks overlapping.

  • Surveys: 1 week
  • Interviews: 1 week
  • Card sorts: 1 week
  • Website hierarchy and sitemap development: 1 week
  • Tree testing: 1 week
  • Design: 2 weeks

Process

My team first sent out surveys, asking those who have shopped at an airport gift shop before about their experience. We wanted to know what prompted them to shop, what they bought, who they bought it for, and how they felt about the overall experience. This helped us discover common pain points for airport travelers.

Pain Points

  • Crowded stores
  • Not enough time to shop
  • Limited space in carry-on luggage

Mind Mapping

After completing our surveys, we did a few direct interviews with a few people with airport gift shop experience. We then compiled our data and extracted common products that our survey respondents and interviewees had mentioned. The top 30 of these products were then organized into a mind map.

Airport gift shop product mind map

Card Sort and Tree Test Studies

With our list of 30 products, we created 30 cards in an Optimal Workshop card sort. We made it a hybrid card sort, providing some suggested categories, but allowing participants to also create their own. Our primary findings were:

• Few users created categories, so our existing categories were sufficient.
• Clothing should be part of the upper-level souvenirs category.

Card sort dendrogram chart
Card sort dendrogram

We used these results to inform a website hierarchy that we used to fill an Optimal Workshop tree test. The test results were:

• 1/3 of the tasks resulted in all direct successes.
• The other 2/3 of the tasks were indirect successes.
• Overall, the information architecture was successful.

Tree test participant paths
Tree test participant paths

Wireframes

After the tree test, I developed two different sitemaps for the mobile website.

Two sitemap versions

Based on those two sitemaps, I created two wireframes. I included the feature of being able to choose between in-store pickup or delivery to help with the pain points of not having enough time to shop and not being able to take a lot on the plane.

Two low fidelity wireframe versions
The two wireframe versions.

For the final the design, I merged aspects that the stakeholder liked from both versions of the wireframes, making further improvements to make the site easier to use one-handed when on the go. The stakeholder was very pleased with the final design.

The final airport gift shop low fidelity wireframe
The final wireframes.

Next Steps and Recommendations

Next, I would recommend doing the following:

• Running first-click and 5-second usability tests with a clickable prototype of the wireframe.
• Adding more screens to the wireframe, and running usability tests on those screens.