Touch

New York City based startup, Touch, is a point-of-sale system in which users can pay in college dining halls and in select stores with their fingerprint. The project goal was to design the PoS interface which should operate like software, feel like a mobile application, and function on a Nexus 7 tablet. Touch systems will first roll out through a beta program in fall 2014. The system will initially be used by college students to pay for meal plan items with their fingerprint in university dining halls.

My Role

UX Designer/Product Designer on a team of 3: I interviewed students and university administrators, conducted a heuristic evaluation, created user personas and user journeys and then wireframed, tested, and skinned the final product. My most significant leadership roles were in the interview and testing processes. I was also responsible for the final visual design.

Duration: 2.5 weeks

Challenges

Touch had to be implemented on a diverse range of college campuses, all with very different meal plan systems. Along with a variety of payment considerations, the system sign-up process and the payment process must happen within the same application interface. My team set out to find a solution that would feel customized but work across a variety of platforms in a wide range of contexts.

Solution

A modular application design in which colleges can pick and choose the screens that work best with their dining experiences and policies. The highly customizable solution easily flows from campus to campus and allows students the flexibility of signing up for the program in various locations across and allows students to use varying payment methods at all types of eateries.

Touch console "About Page"
Simulation of application and fingerprint scanner without physical hardware around device

Research

Our initial research focused on understanding the PoS marketplace, non-traditional payment competitors, and a deep understanding of college students and current meal plan systems. We gained insight into college dining by surveying and interviewing current college students and university administrators. We realized very quickly there is much more to a college meal plan than a quick swipe of the student ID card.

My Contributions

I conducted a large majority of the team interviews and collaborated with my team to compile a thorough heuristic evaluation. Through the research process, I interviewed New York University students in their dining hall and later spoke with various university administrators across the country to discuss the intricacies and particularities of college meal plans.

Techniques & Tools

  • Affinity Mapping
  • Surveys
  • User Interviews
  • Competitive Analysis
  • Heuristic Evaluation

Key Findings

  • Must account for variety of meal plan options on a diverse range of college campuses
  • Security is extremely important
  • Simple and fast processes are of the utmost importance
Heuristic analysis

Understanding the User

After conducting a wide range of research, our team began to flesh out the key takeaways in order to develop personas and better understand the variety of Touch users. While we knew that students with meal plans were key, our research and investigation led us to realize the dining hall cashier was an important user as well.The research also helped put us in the mindset of a malicious user; someone looking to steal ID cards and other student meal plans. Understanding the malicious student would lead us to develop a more secure application.

My Contributions

I created extensive user journeys for both a college student and for the cashier in order to get into the user mindset. However, I still wanted to understand the user relationship with the product even further. As a result, I took a leading role in the production of a video that illustrated the interaction between the student and cashier and helped my team better understand the dialog, training, and situation involved.

Techniques & Tools

  • Personas
  • User Flows
  • User Journeys
  • Use Case
  • Scenario Video Production

Key Takeaways

  • Student pain points include slow sign-up process and clunky checkout process
  • Cashier pain points include excessive technology training and constant troubleshooting with Touch at the cash register
Student user journey through dining hall checkout process
Video created to understand the interaction between students, the cashier, and the Touch console

Sketching and Prototyping

The sketching phase began with a fast paced, leave it all on the table design studio. My team initially focused our attention on the sign-up process because all of our research pointed to the importance of security and we wanted to define and flesh out this aspect as soon as possible. After we felt comfortable with our sketches we created a paper prototype. It was extremely important that we began testing our flow and gaging user comfort with the interface as soon as possible.

My Contributions

I led the team design studio and then conducted our usability testing of the paper prototype. Once the testing notes were compiled, I helped determine how we should iterate appropriately going into the wireframing stage of the process.

Techniques & Tools

  • Design Studio
  • Sketching
  • Paper Prototyping

Key Takeaways

  • Screen flow should take a modular approach to provide adaptability across a variety of campuses and dining systems
  • Part of the experience design should include the copy, look, and feel of supplementary materials (i.e. verification text and confirmation emails)
Team brainstorming and sketching session
First round of paper prototyping

Wireframing and Testing

Prototyping was a problem solving exercise in and of itself because my team did not have any physical hardware (fingerprint scanner, card swipe, etc) to work with. We solved this problem by digitally creating the hardware and Nexus tablet screen onto an iPad and using the prototyping tool Flinto. This proved to be a great solution because it was important for usability testers to physically touch the interface. As a final test we took the skinned wireframes and iPad down to New York University and tested guerrilla-style with students outside the campus dining hall.

My Contributions

I created the first round of digital wireframes in Omnigraffle and was responsible for the visual skinning and design of the PoS interface. I also led the team usability testing, both in the office and on site at New York University.

Techniques & Tools

  • Wireframing
  • Omnigraffle
  • Flinto
  • Adobe Photoshop
  • Adobe Illustrator
  • Usability Testing
  • Contextual Testing

Key Takeaways

  • Minimized clicks to smooth out payment process
  • Changed text weight to catch user attention more effectively
  • Students continuously smiled while using the product

The Big Picture

The further my team immersed ourselves in the Touch project, the more we realized that the user experience went beyond the PoS interface. The experience of the touch payment system included supplemental materials, user initiation, user training, kiosk placement, and consideration of secondary and tertiary personas like the cashier and mischievous security breeching student. As a result, my team created not just an interface but an all encompassing experience.

One sheet about Touch to hand out to students, cashiers, and administrators on campus
Wireflow of both the sign-up and checkout process