Joyplux Technologies - 2020

# UX Research

# UX Writing

# Html/Css

# Usability

# Kiosk

Team

Adrian Sung (Supervisor)
👉 Emily Lin (UI Designer/UX Researcher)

My Deliverables

User Research, UI Design, Basic Html & CSS, Multivariate Testing, Data Analysis

Timeline & Duration

Nov 2020 — Dec 2020

Overview

After receiving restaurant owners’ feedback about the self-ordering kiosks failing to reduce customers’ average ordering time, we found out that it might be the UX writing that caused difficulties for the end-users. Thus I conducted research and testing to help with data-driven design decision-making.

The Background

Our Goal

Provide customised e-menu and interfaces for self-ordering kiosks in restaurants to speed ​​up the ordering process.

The Context

Taiwanese restaurants tend to offer highly personalised dishes with lots of extra options for flavours, portions, or add-ons, so the UI of the menu is crucial.

Research Process

Discover & Define

Discover & Define

Identify the Problems

💬 Semi-structured interview with the Clients (Restaurant Owners)

Through contextual semi-structured interviews, we noticed that our clients (restaurant owners) were not satisfied with the effect of self-ordering kiosks.

“Customers would take a lot of time pondering in front of the kiosk.”

“Customers would still come to us and confirm their order again after ordering on the kiosk. They’re not sure if they’ve ordered correctly.”

👀 Fly-on-the-wall Observation of the End Users (Customers)

Through observations, it was noticed that customers would spend a lot of time on pondering and choosing customised options when using self-ordering kiosks.

🤕

Pain Points

End users having trouble understanding the options.

Evaluate the Problems

📌️ Recognising the Importance

By studying the company’s top 5 biggest clients, we found that almost every dish in their menus involved more than one additional option, which again marked the importance of this problem.

“Since our menu options are very diverse, the menu is relatively complicated, which also indirectly causes some problems in ordering. For example, customers will crowd around the counter and consider what they want to order, thus causing traffic congestion in the store.”

🔬 Re-examining the Current Situation

To understand the previous design rationale, I examined and analysed the current solutions and other possible solutions to help pinpoint the main issues.

01

01

I cross-referred the clients' feedback and their e-menu to identify the most common and trickiest issues, which were the options of “adding” or “not adding” something.

02

02

Since in Mandarin, there are usually several ways of conveying the same context, I collected and listed 11 groups of variants to conduct semantic analysis and compared that to the users' possible mental models.

Develop

Develop

Usability Testing

Internal usability testing is conducted to compare the usability of different designs. Participants were asked to order several different designs. We could discover the problems by observing their actions and emotions through the process and collecting their opinions afterwards.

We recruited colleagues from other departments that are less familiar with the system for user testing. Participants of different genders, ages and technology familiarities were included.

The Results

Confusing designs were decided to be excluded after testing.

6 variants groups were chosen for the further multivariate testing.

Our Hypothesis

If we change the UX writing and symbols of options, then users could order more efficiently and accurately.

If we change the UX writing and symbols of options, then users could order more efficiently and accurately.

If we change the UX writing and symbols of options, then users could order more efficiently and accurately.

Multivariate Test

With a hypothesis and several design options in debate, multivariate testing turned out to be an appropriate method. Google Analytics was used to track users’ activities and flows on the testing sites, while Google Optimize was used to redirect and analyse traffic and the task completion rate.

🎯 The Objective

To find out the most intuitive button design and UX writing that aligns with the majority of users’ mental models.

🚧 The Limitations

We had limited resources, such as lacking available web domains and front-end web developers to build the experimental websites.

The Variants

The number of variant groups was filtered to 6 after previous testing. Except for the buttons, all other designs were the same.

The combination of the 6 variant groups are as below:

A: “Option name” + simple checkmark

B: “Option name” + checkbox

C: “Add (加)” + “Option name” + checkmark

D: “No (不要)” + “Option name” + checkmark

E: “v” / “x” icon + “Option name”

F: “Add (加)” or “No (不加 )” + option name + checkmark

The Task

Every participant was asked to order a “spicy noodle with green onion”. Task time and task completion rate were the 2 main metrics evaluated.

The Task

Every participant was asked to order a “spicy noodle with green onion”. Task time and task completion rate were the 2 main metrics evaluated.

Planning & Design

There is an independent URL for each of the variants. The participants would be randomly distributed to one of the URLs.

Since setting up a goal and tracking the participants’ activities on the web require different URLs for different states, we needed 24 independent pages in total. The UI flow and prototype were first created in Figma to understand the connection between each page.

Planning & Design

There is an independent URL for each of the variants. The participants would be randomly distributed to one of the URLs.

Since setting up a goal and tracking the participants’ activities on the web require different URLs for different states, we needed 24 independent pages in total. The UI flow and prototype were first created in Figma to understand the connection between each page.

Building the Testing Sites

Due to the lack of resources, I coded 6 simple websites with HTML and CSS and uploaded them to Neocities, a free web hosting provider. participants’ behaviours were tracked with the embedded code of Google Analytics and Google Optimize on each site.

Building the Testing Sites

Due to the lack of resources, I coded 6 simple websites with HTML and CSS and uploaded them to Neocities, a free web hosting provider. participants’ behaviours were tracked with the embedded code of Google Analytics and Google Optimize on each site.

Deliver

Deliver

Findings from the data

Collected Data
  • Total data amount: 280 (entries)

  • Valid data (repeated entries excluded): 266

  • Devices used:

    • 73.6 % mobile

    • 25.4 desktop

    • 1% tablet

Efficiency

Variants A and B turned out to be the most efficient design as they averagely require the shortest task time.

(This statistics only included those who completed the task.)

Accuracy

Variant A participants topped the accuracy with a goal achieve rate of 48.5%, followed by 43.1% of variant B participants. (Those who answered incorrectly and those who didn’t finish were considered failing to achieve the goal.)

(Those who ordered incorrectly or didn’t finish were considered failing the task.)

Variant A participants topped the accuracy with a goal achieve rate of 48.5%, followed by 43.1% of variant B participants. (Those who answered incorrectly and those who didn’t finish were considered failing to achieve the goal.)

(Those who ordered incorrectly or didn’t finish were considered failing the task.)

Inform Design Guidelines

According to what we have concluded from the usability testing and multivariate testing, we established design guidelines for future designs and identified the recommended UX writing and button design for the ordering system.

Avoid Double Negation

Double negation between the text and the symbol shall be avoided as it may cause confusion and misunderstandings. For instance, the “No Spicy” button with a prohibiting sign may related to 3 types of mental models:

  • I will get food without spicy seasoning

  • I don’t want a “No Spicy” dish (I will get a spicy one)

  • The “No Spicy” option is unavailable

Avoid Double Negation

Double negation between the text and the symbol shall be avoided as it may cause confusion and misunderstandings. For instance, the “No Spicy” button with a prohibiting sign may related to 3 types of mental models:

  • I will get food without spicy seasoning

  • I don’t want a “No Spicy” dish (I will get a spicy one)

  • The “No Spicy” option is unavailable

A confusing design with double negation

A confusing design with double negation

Avoid Unintelligible Design

Analysing the customers of our clients’ restaurants, we learned that approximately a quarter of them are elders. As elderly users may find button states unintelligible if the button style in different statuses is similar, there is a need for more intuitive and accessible designs to clearly indicate the “selected/unselected” state.

Avoid Unintelligible Design

Analysing the customers of our clients’ restaurants, we learned that approximately a quarter of them are elders. As elderly users may find button states unintelligible if the button style in different statuses is similar, there is a need for more intuitive and accessible designs to clearly indicate the “selected/unselected” state.

An unintelligible design for states

An unintelligible design for states

Minimise the Amount of Options

According to Hick’s Law, the more choices a person is presented with, the longer the person will take to reach a decision. Therefore, designs shall stick to simplicity and avoid unnecessary options; options with similar meanings should be combined into one.

Minimise the Amount of Options

According to Hick’s Law, the more choices a person is presented with, the longer the person will take to reach a decision. Therefore, designs shall stick to simplicity and avoid unnecessary options; options with similar meanings should be combined into one.

A design with the abuse of options

A design with the abuse of options

👉 Final Recommendation

Data has showed that variants A and B are the most understandable. Thus, the two designs should be prioritised as the standard design for the system.

Reflection

Reflection

To be Improved

Without evaluating the costs and available resources before conducting the research, the limitations were not acknowledged until they were encountered. This gave us a lot of pressure when it could have been avoided.

Takeaway

Increased UX maturity of the company

Increased UX maturity of the company

Aside from solving clients’ pain points and optimising user experiences, this research also introduced an evidence-based decision-making method to the company.

Aside from solving clients’ pain points and optimising user experiences, this research also introduced an evidence-based decision-making method to the company.

Resolve conflict among colleagues

Resolve conflict among colleagues

A debate arose when my colleagues had trouble reaching an agreement about the solutions, so I proposed to conduct proper research and used Multivariate Testing to make a better data-led design decision.

A debate arose when my colleagues had trouble reaching an agreement about the solutions, so I proposed to conduct proper research and used Multivariate Testing to make a better data-led design decision.

Sharpen my proficiency in data analysis

Sharpen my proficiency in data analysis

To conduct the multivariate test, I acquired Google Analytics and Optimize tool and also strengthened my data analysis skills.

To conduct the multivariate test, I acquired Google Analytics and Optimize tool and also strengthened my data analysis skills.

Sense of achievement

Sense of achievement

I enjoyed researching UX writing and analysing semantic meaning with the linguistic knowledge I learned as a language major student since I’ve always loved combining knowledge in different fields and putting it into use.

I enjoyed researching UX writing and analysing semantic meaning with the linguistic knowledge I learned as a language major student since I’ve always loved combining knowledge in different fields and putting it into use.