Events Stadium

Events Stadium

A user-centric solution for self-service catering

 Overview

A top payment technology company tasked my team with creating the online catering ordering experience for a world-famous, multi-faceted event stadium to support mobile devices. Our small team was comprised of myself and another UX / UI Designer.

We had 4 weeks to complete wireframes, a style guide, an interactive component library, visual UI design, prototyping, testing, and implementing user feedback to deliver high fidelity screens for this mobile app.

Role

UX / UI Designer

Interaction Designer

Usability Testing Coordinator / Moderator

Ramping Up

understanding both user and business goals

With a such a short timeline, we made sure to jump right in and immerse ourselves on everything related to the project. We spoke with the client to understand requirements, goals, and any restraints. We reviewed research on the customers and conducted interviews to better understand their needs when completing their online catering orders.

With a holistic view of customer needs, we focused on creating a site map and style guide in Figma that aligned with the brand to ensure our designs were consistent throughout the experience.

We also created a fully flushed out component library, equipped with color and text styles, component variants, and flexible and interactive cards.

Site Map

 Style Guide / Mobile Design Kit

Wireframes

1- Welcome / Event Calendar

Giving users the freedom to navigate various categories and see upcoming events

2- Menu Navigation

implementing scrolling tabs for simple and intuitive navigation throughout the catering menu
 

3- Completing an Order

using a progress indicator to create a structured order confirmation process
 

4- Invoicing

Giving the customer the capability to search invoices and pay any outstanding balances
 

Usability Testing

Putting our designs 'to the test'

With all of the screens finished after incorporating our new ideas and designs, it was time to create a prototype and test out their efficiency and ease of use through usability testing sessions, which I was in charge of to prepare, lead, and assess results.

We conducted 45-minute sessions using UserZoom Go to record results. Users were asked to test a high-fidelity prototype of the mobile NEXTEP Advance Day Ordering experience while completing tasks, answering questions, and identifying any pain points throughout the process.

 4 participants were 100% successful when asked to complete the tasks provided. Participants had an average subjective ease rating of 1.5 out of 5.0 (with a 1 representing an easy experience overall).

Identifying Needs for Improvement

The catering experience proved to be an overall easy, intuitive, and visually appealing process. However, there were some areas that caused confusion, and it was important to record any pain points users experienced and take another look at our designs to try and mediate these issues moving forward.

 Event Calendar

One of the areas where users experienced the most difficulty and confusion in navigation was the event calendar.

  • Iteration 1

    The first calendar version proved to be difficult for users to understand and navigate. They didn’t understand how to close out of the calendar to see a list view, and removing the numbers on days events ocurred was confusing.

  • Iteration 2

    This version was better received visually, but the navigation remained unclear. Although removing the icons and adding all numbers was well received, the different colors weren’t understood without a guide and brought up the question of if the color coding was necessary if there were few options for different types of events.

  • Iteration 3

    This calendar view is cleaner, and was better understood by users overall. Adding “close” to the “X” really improved ease of navigation. We removed the color coding of dots and made the numbers smaller.

Review Order 

Creating a clean and minimal design

Users also expressed confusion over the Review Order page, stating that it was overwhelming and difficult to manage.

We reduced the hero image, modernized the progress indicator, and added open/close components to allow the user the freedom to control the information that they wanted to see.

 

Invoices

The user can find information relevant to their invoices on this page. Some catering orders are quite large and require extensive content to review at the summary level.

Users noted that the categorization of items was difficult to understand as there wasn’t much of a different visually between the top-level category and the contents within. In order to solve this problem, we created a header category style to distinguish the categories and create a better sense of hierarchy on the page.

Key Takeaways

showing the power of usability testing

Usability testing was the key to our success in this project. We received very valuable feedback that allowed us to improve the experience for the customer and customize it according to their needs.

Many times with short client engagements, user testing is not made a top priority due to time constraints. We made sure to organize our time to accommodate for testing and implementing feedback in our designs, creating a truly user-centric experience.