Test

UI/UX case study for adding an app feature

Duration: 2 Weeks

Tools

Sketch
InVision
Axure

My Responsibilities

Team Plan
Develop Personas
Problem & Solution Statements
User Interviews
Usability Testing
App Map

Team Members

Taylor Owens (myself)
Samantha MacDonald
Jason Ma


Research: Defining the Problem

Overview

SeatGeek D2 is a modern gift shop located in Somerville MA. Their catalog of humorous and witty gifts is a perfect destination for unique items. Although D2 is modern their current website does not offer a way for buyers to shop online. With 40 percent of internet users in the United States purchasing items online several times per month, D2 wanted a way to accommodate this expanding market.

The Challenge

With such an eclectic shop there wasn’t a clear way to organize their catalog at first. After a visit to their location, I determined the best way to approach this challenge would be to speak directly to online gift shoppers and find out how they shop for gifts.


User Interviews

First, I sent out a screener survey to collect information about online gift shoppers and their shopping habits. I then conducted three in-person interviews to gain more insight into what leads them to a final decision.

From these interviews I found:

  • Gift buyers look for reviews before choosing a gift.
  • Buyers browse through multiple gifts before picking their final item.

The Problem

Allow users to buy multiple tickets but make sure their friends are financially responsible for their tickets.

Our Solution

Create an e-commerce layout that was easy to navigate but also included a way for users to write and read reviews.


Design: Creating the Prototype

User Personas

We then developed two personas based on our research.
We recognized that our main user would be someone who plans their events in advance and enjoying coordinating events for their friends.

User Flow and App Map

Our idea was to integrate this new feature into the current checkout process.
From here we created a user flow and app map to organize the number of pages needed for later usability tests.

Group Sketching

With so many ideas in our head, we found it easier to sketch pages in a group setting and iterate on our thoughts in real time.
We used a whiteboard and saved our work for reference with photographs.

Wireframes

After our group sketching session, we used Sketch to create wireframes.
These wireframes were uploaded into InVision and used as the prototype for user testing.



Wireframes created in Sketch (view larger)


Usability: Testing the Prototype

We first created a paper prototype to fix our design before the screens were made digital and became more challenging to adjust. We then conducted three usability tests using our paper prototype and three tests using our digital prototype. We asked testers to imagine they were buying two event tickets for themselves and two for their friends.

The paper and digital prototypes included two main features:

  • A checkout page that allowed users to determine how to split the tickets.
  • A “group status” page where users can check which members of their group paid for their tickets.

View Digital Prototype


Takeaways: What We Learned

Users did not read the text explaining how splitting tickets would work.
We attempted to add an initial pop up to explain the process and took away the following text describing the same process. More testing would be needed to confirm our addition helped solve the issue.

Users felt overwhelmed with the amount of text on the checkout page.
We reduced the amount of text shown on the page. However, we were concerned that by putting the fees under an accordion this would decrease the visibility of the fees. More testing would be needed to ensure users can still find the fees during checkout.

To further test our feature we would need SeatGeek’s insight as to if reserving seats is possible.
Because the nature of the project was hypothetical, we had to make many guesses as to the practicality of reserving tickets for a period. However, we required the purchase of at least one ticket. We also reduced the window of time needed to purchase a reserved ticket. To validate our idea, we would need insight from SeatGeek.

What I would do next

  • Work on the notification text to make sure it is clear and not overwhelming.
  • See if there was a way to integrate Facebook with the group contact information page.
Scroll Up