When I joined Tyro in 2018, I began planning the future of our web products with our teams.

One of my major projects was to understand and design an internal customer system named Customer Hub. Its purpose is to reduce clutter across multiple separate systems, simplifying customer data retrieval. Eventually this app will be used by teams across Customer Support, Risk, Compliance, and Legal.

We focused on a single cut of the product that would help our customer support team retrieve ID checks for customers while on the phone.

My role in this project was to:

  • Explore how an internal system might work best for staff at Tyro
  • Design the look and feel of our very first internal Tyro app; and
  • Consider how this might influence our product design library
↑ Above: Wireframes detailing flow and layout iterations. They were designed as mid-fidelity wireframes, as we needed feedback on some details from users. They were uploaded as clickable prototypes; iterations incoporated revisions and ideas from weekly feedback sessions.

Explorations

Having direct contact with our in-house users, I started data sorting workshops and interviews with the customer team to get an idea of workflow and level of importance.

At this stage, I presented low to mid-fidelity wireframes regularly to our pilot group and team of engineers and product people. We explored concepts and tried to figure out the best experience for the customer support team and understand their needs.

↑ Above: Exploring information structure and flow using nested vs branched pages.

Editing information: the starting point

During this period, I also trialed different ways of editing information groups, and decided to go ahead with a simple extendable card that would reveal editable fields.

The wireframes were uploaded as basic clickable prototypes I could demo. They helped to further simplify requirements and validate assumptions, and made some people excited about upcoming changes.

↑ Above: Concepts for editing information groups included a popup modal, a drawer and an extendable card. We eventually selected the extendable card option (right) as it was easy to scan, could contain contextual actions, and could expand easily into a form.
↑ Above: Card interaction design, detailing contextual actions that would change the card contents.

Designing up

With Tyro’s newly released identity, my responsibilities were dual-pronged: to develop a foundational product design library and to design the look and feel of Customer Hub.

To start, I chose to design up from cards, or editable information groups, to the broader interface. Cards would house the core information in Customer Hub and would be a heavyweight component. Here, cards need to be scannable and reveal contextual actions.

Details and micro-interactions are also fun to design and can influence the overall style.

↑ Above: A mini animation I made of the selected solution to editing customer cards in the interface.
↑ Above: Applying completed components onto app screens and stories.

Overall look and feel

I consulted with our UX team on the overall product design direction and made sure the mobile app and web app styles were consistent.

Once components — basic UI, navigation, cards, and additional styles — were designed, they were fed back into the growing product design library.

↑ Above: Making navigation structures for Customer Hub that could be reused later.
↑ Above: Feeding back confirmed components into the product design library once they were in production.

Building it

Design doesn’t just end with completed artefacts. A self-described perfectionist, I set aside time every fortnight to revise artboards and the product design library to maintain consistency for the engineering and UX design teams.

Once we had confirmed Customer Hub’s interface, I often consulted with engineers to refine and tweak components, and maybe shelve some interactions unnecessary for an early release. It is a balance rather than push and pull.