Exterity / 2019

Exterity creative, interactive and visual signage

Exterity provides a suite of softwares that lets businesses use a drag and drop canvas to advertise, communicate, engage and entertain their customers using highly customisable apps without the need of a techie.

Drag and drop interface turns into an interactive entertainment system for TV
Exterity logo - SAAS entertainment and cruise ship B2B Partners with samsung philips chromecast and sony

Process

πŸ’¬
Hang out with stakeholders and explore their feedback.
πŸ”¬
Conduct a UX audit and research the existing product.
🎯
Define the goals based on the problems.
πŸ’­
Develop a detailed design system
πŸ§ͺ
Impact testing using prototypes

Overview

Developing a consistent user experience and a scalable design system as a solo UX/UI designer at Exterity.

With a large team of developers and product managers, but no design systems in place, inconsistency can arise from feature to feature. It can be as inconsistent as comparing 🍎 apples to 🍊oranges.

RESEARCH & FEEDBACK

Hang out with stakeholders and explore their feedback

Developers working in isolation have created inconsistencies in the product, which has impacted the experience of clients and end users. As a result, it takes a lot of mental effort to use what is supposed to be, a simple software.

πŸ’¬

β€œIt looks like it’s been designed by 20 different devs in silos because it was...”

- Internal devs

There is a lack of consistency in behavior and user interface across different apps.
β€œThe settings are hard to use - It's quite confusing configuring the settings. I need to refer to the documentation often.”

- Client feedbacks

The platform's complex settings often confuses users.
β€œI don’t know what to expect when pressing one button does one thing on one page, but something else on another.”

- End user (surveys)

End users: 62% of the feedback mentioned issues related to confusion in the user interface.

🎯

PROBLEM STATEMENT

β€œHow might we build a seamless experience for our clients without sacrificing flexibility or functionality."

This software is designed for people who want to build things themselves. It has an easy drag and drop interface that doesn't require technical skills. However, clients have given feedback that they still need a lot of help because the design is simply not clear enough.

CREATING A DESIGN SYSTEM

Increasing the context and visibility of change in settings πŸ”§

Users have found the settings to be difficult to understand due to their high level of flexibility. Additionally, developers may use jargon and other specialized language that can further complicate matters. To address these issues, the user interface has been updated to provide clearer context that can be understood through interaction alone.

Before
Before design - jargon filled and complicated non contextual settings dialogue
😐
Learnability for new users is steep
πŸ˜•
Wordy explanation and over reliance on documentation
After
After redesign of currency configurations
πŸ‘
Simplify visuals and context for complicated settings
🫢
Higher contrast can improve accessibility
✌
Improved UI recognition can be achieved through the use of a contextual preview box.

CREATING A DESIGN SYSTEM

Providing transparency and visibility of status can give users peace of mind. Β πŸ™Œ

I provided documentation to developers that served as a guide outlining the significance of visibility of status. Prioritizing this key aspect enabled the team to build better features and functionalities. This made it easier for them to understand how their actions will affect our clients and, therefore, improve the user experience.

Toaster to show system status which will give users more confidence in our systems
TOaster added to design library detailing the anatomy and how it's used
Design library shows cancel or back button should be on the left, confirm or action buttons on the right
TOaster added to design library detailing the anatomy and how it's used

CREATING A DESIGN SYSTEM

Empowering users to take control and perform tasks confidently. πŸ’ͺ

Developers have placed the confirm button in different locations, causing accidental actions like purchasing or ordering. To prevent such mishaps, a consistent user pattern was established in the design system. This means end user can no longer use the button placement as an excuse for β€œaccidentally” ordering late-night munchies. πŸ˜‰.

πŸ†

Impact testing using prototypes

A series of A/B tests shows a 42% decrease in time spent faffing around settings.

21% decrease of clients contacting the help desk to ask for additional support in setup and configuration tasks.

The improvements made in consistency, validation, and user interface gave clients and end users the confidence to navigate the platform with ease, without it feeling like a mental workout.