Next Generation Storefront (NGS)

We noticed a significant drop in successful bookings after rolling out a new design for Next Generation Shopping (NGS). The NGS standard is meant to create a consistent experience for users across flight booking platforms by displaying similar products in organized columns. The specific implementation is different across Online Travel Agencies (OTAs), and we created a quick version to publish. After launching the new design, we saw a drop in bookings potentially related to usability concerns I had noted. We began investigating through usability testing with the goal of creating a design addressing the issues found.

Company

StudentUniverse

Team

Front-end developer, PM, UI designer, UX designer

Timeline

5 weeks

Research

We started with some research to understand potential problems that users may be having. I created a test and recruited participants in Useberry. I asked participants to complete tasks like selecting a flight departing at 6:15 pm that included a checked bag for free. I measured success with completion, time on task, and a Single Ease Question.

Testing revealed that cabin type labels at the top of the columns looked interactive when they weren’t, “RT” meaning roundtrip was not understood, and baggage icons were not clear. We took note of these items to change and solve for the next iteration.

Heatmap of NGS usability test 1

Design exploration

The team took the results and worked on a new prototype incorporating the feedback. The key changes were cabin type labels were moved to the cards, button interaction was adjusted, and amenity information was shifted to the expanded view.

NGS prototype iteration 1 collapsed viewNGS prototype iteration 1 expanded view

Testing

After some changes, we ran the test again on the new design. This test revealed some additional problems and reinforced some initial findings. The “RT” roundtrip label was still a source of confusion, participants noted an inability to find amenity and comparison information easily, and most assumed clicking on the cabin type price point would show details when it actually moved them to the cart. We continued to iterate to address these problems.

Heatmap of NGS usability test 2

Final designs

We ran another test nearly identical to the first 2. This was to ensure the design solved problems and accurately compare results. Participants were able to complete tasks more effectively, with reduced time on task, consistent success rates, and increased perceived ease of task. Main changes included scaling back color use, making the amenities and cabin details dropdown upon clicking the price card, and writing out roundtrip.

Prototype of StudentUniverse Next Generation Storefront results page collapsed viewPrototype of StudentUniverse Next Generation Storefront results page expanded view

Impact

Feedback

“intuitive and easy to use”

Perceived ease of task

+ 23.5%

Number of bookings

+ 31%

What I would add

I would iterate more to fine tune the design. More user testing may reveal better ideas that challenge assumptions.

The comparison table is a piece of the design that could be investigated further. More radical changes could be made to improve usability and potentially increase conversion.

What I learned

Firstly, the team was able to see how much value testing can bring to the design process. When I joined in 2022, StudentUniverse did not have any UX personnel or a user testing program. I am continuing to educate the company on UX, the value of testing, and how to keep the user prioritized. This project yielded a surprise outside of what we were testing - it sparked a discussion about filtering results, and how we should optimize that experience. 

A big part of these restraints was a contract requirement for us to show particular items on the results page. This forced me and the team to dig deeper to find creative solutions. It was a lot of fun and I gained a particular appreciation for collaboration.

Home