Mobile Gift Shop Ecommerce Design

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.

Project Details

Context

Lesley University Course Project

Target Users

  • Have shopped at an airport gift shop before

  • Age: 21-65

  • Geography: US only

  • Language: English

My Role

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

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

Stakeholder

Professor Darrell Penta

Tools

  • Balsamiq Wireframes

  • Optimal Workshop

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

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.

Mind Mapping

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 dendogram

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

Wireframes

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

  • Version A- More categories, with less options per category.

  • Version B- Less categories, but more options per category.

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.

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.

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.

Previous

ACN Email Newsletter
Next

Accessible Restaurant Finder App Design