KIS Kiosk

Background

KIS Technologies provides a sophisticated ticketing platform that manages selling event tickets, generating sales reports, and scanning QR codes using the product's cloud based technology. The company also offers kiosk ticketing solutions with limited capabilities. In January of 2019, our CEO envisioned a new kiosk product capable of delivering several software features and seamlessly integrate with third-party API ticketing systems. The goal in mind was to evolve the current legacy system into a more intelligent and scalable product focused on solving our client's needs.

KIS Ticket platform

All in one ticketing solution.

Legacy kiosk system

Museum of Fine Arts Boston

Legacy kiosk feedback

Throughout the 2018 calendar year the engineering team at KIS Technologies collected valuable client feedback covering various system challenges. The documented short list covered new software needs and hardware performance expectations. A few items from the short list included event registration, unlocking membership ticket pricing, and will call pickup for season ticket customers.

Product Goals

In order to acheive redesigning the KIS Kiosk product, certain strategic goals had to be accomplished:

1. Produce a robust set of ticketing features for clients to provide their customers.
2. Build a new system utiizing React.js front-end library and AWS back-end server technology.
3. Deliver administrative tools to manage several kiosks across a venue.
4. Create a system that can communicate and pull API data from third-party ticketing applications.
5. Integrate kiosk hardware seamlessly through a cohesive new system.
6. Design an intitive and easy to use kiosk customer experience.

Joining the KIS Kiosk team

After interviewing with the CEO of KIS Technologies I was hired to join their newly organized KIS Kiosk team. My role as Product Manager was to plan, design and deliver the new kiosk product. I was expected to not only support designing the product experinece but also to collaborate with engineering and interact with clients frequently uncovering product needs. My position expected to fill the following responsibilities:

1. Help design and plan the product roadmap software deliverables
2. Provide design support and writing product specs documentation
3. Research and interact with clients documenting feature requests.
4. Design an intitive kiosk product that delivers a quality customer experience.

Product Planning and Discovery

Challenges to solve

During our initial product brief I learned about the system challenges from the engineering team. If we were to build a new kiosk system from the ground up then specific technical issues had to be resolved:

1. The kiosk legacy operating system ran on windows software. This created issues from time to time when driver updates would automatically upgrade the system.
2. The front-end php code created some buggy problems when designing new workflows for the kiosk.
3. Hardware components were connected to windows system and needed more customizing capabilities.
4. Touch screen software at times wouldn't work properly for outdoor kiosk models (condensation on the screen).

Team brainstorming

Our CEO and engineering team designed the new back-end system architecture. I provided user flow sketches and we designed workflows covering unique user stories. Over time I began to understand more clearly how the kiosk system works and what UI flows the user expected to complete.

Mapping user flows

System architecture illustrated

Mapping the workflows

Our team covered the various workflow needs and mapped out how a customer on the kiosk would purchase an event or perform a will call pickup for tickets tied to an account. Some of the various questions concerning these customer workflows were:

1. Admin list of workflows vs ticket customer workflows
2. Time out purchase flow, when the user gives up and leaves, how much time does the system hang and then time out with some message.
3. Need mapping for the ADA user flow and Help screen if needed. What is shown for each screen and the content for that screen.
4. Need to design the workfow with the Keyboard that comes up on the screen (form input).
5. General seating (what you get is what you get) called “Best Available” vs. reserved seating for an event (selecting ticket sections).

Research

Field study

To find out what other kiosk companies were providing for their customers I went out and documented a field study noting my observations. I performed various tasks flows interacting with other kiosks and thought about touch gestures, readability and ADA help.

Buying coffee from a self serve kiosk

Pre order food at the airport

Kiosk payment components

Purchasing movie tickets

Initial low level wireframes

After sketching and refining design concepts covering our kiosk UI I created a set of wireframes for our purchase flows.

Attract loop screen - what customers see before entering the workflow

Welcoming screen after a user touches the attract loop display

Options list for will call and purchasing tickets

Events selection listings

Select the event desired

Event pricing and venue image

Event quantity of tickets

Reserve seating

Houston we have a problem

After spending two weeks meeting and planning the product roadmap our team realized that we were short on man power and needed extra help to get the project completed. We would need additional UI designers and engineers to assist in the product development in order to hit our October 1st, 2019 deadline. Our CEO quickly researched and looked for a design agency in Dallas that could provide the best resources for our team.

Dialexa joins the project

Our team had the first project brief with the Dialexa group and several questions were explored during the meeting. We covered version 1.0 expectations on both the software and hardware development for the kiosk. The need to build from the ground up a React.js based application that can cohesively connect to API's and to our AWS server. The user experinece with purchasing tickets on the kiosk had to be simple and easy to use. After covering several key points throughout the meeting it was decided that our teams should collaborate in a Design Sprint to better understand the priorities needed for version 1.0 launch.

Dialexa office in Dallas

Meeting room for our team

Design Sprint discoveries

In four days our combined teams performed a series of design exercises to discover mental models, journey mapping and vote on priority items for product development. We designed Personas, illustrated a service design blueprint journey for the user and my task was to document and refine our product specs for the kiosk roadmap.

Planning the roadmap and team collaboration

After our Design Sprint week I began working with the Dialexa team moving forward. I became the product point person between our KIS Kiosk engineers, CEO and Dialexa team throughout the project time frame. The Dialexa team consisted of two UI designers, three engineers covering QA/Front-end/Back-end development and one project manager to manage our Sprint planning. Our teams came together the following week and covered the Design Sprint data. I wrote up the product specs expectations for both the customer and admin facing software, listed the features and illustrated the task flows, plus wrote initial user stories for our designers to tackle during our future design sessions.

Designing the application

I planned a design session with the Dialexa UI designers and project manager during the second week of the project. We defined our design process and explored deeper into what designs would work based on our Design Sprint feedback.

UI Wireframes

After mapping and thinking about the organized information I asked the team to wireframe concepts for our workflows. I kept the team focused on purchase flows, will call ticket pick up, and the admin features only to meet the 1.0 expectations from our CEO. Together we came up with designs that were voted on and I made the decision of what layouts could work for the kiosk interface.

UI structure and finalized workflows

After completing our design session the Dialexa team flushed out several wireframe structures for our purchase flows and KIS Kiosk Control Center admin tools.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

High fidelity prototype

Working along side our two UI designers we created a brand style guide that themed the KIS Kiosk product for 2019. Utilizing this new visual guide the UI designers created a set of high fidelity mockups for our future prototype.

Meeting and presenting the prototype to a list of our clients

With a fully functional InVision prototype created I was tasked to meet with a few existing legacy clients over a Zoom call. With a questionaire and prototype ready the CEO and I performed walkthroughs with the clients. During these meetings we discoverd more feature needs that could provide an extended roadmap list for the kiosk product:

1. Donations workflow to allow kiosk customers to donate towards charities.
2. RFID chip scanning technology, simply walk by the kiosk and scan your membership card or wristband.
3. Second monitor on the kiosk providing marketing advertisements.
4. Multiple event cart purchases, our 1.0 launch allows single event purchase per session.
5. Integration with Worldpay payment processing.
6. Managing tickets in account through the will call feature.

Production launch!

After months of working with our engineers and QA testing with our hardware integration our kiosk was ready for our first client. The Charles Eisemann Center in Richardson Texas ordered the first new kiosk unit and was excited for using the product covering their will call pickup needs.

Charles Eisemann Center

Front lobby of the performing art center

I scheduled a delivery date and tasks to complete before delivery. Two weeks before shipping the kiosk out I designed a kiosk wrap around the hardware structure for branding the unit. This artwork was supplied by the Eisemann Center's designer and completion of the wrap went smoothly. On day of delivery our team wrapped the kiosk and rolled out the unit to the delivery truck. Three engineers and myself delivered the kiosk and walked through the boot up process of going live via the in-house internet connection. The launch was a success and our client was pleased with the results.

• 
• 
• 
• 
• 
•