MOBILE USER CENTERED 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.

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.

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.

Wireframes

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

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.

Back to the Portfolio

Next: Accessible Interaction Design