Event Recap: Measuring the Value of UX Research at UXDX

Today, we’re thrilled to announce the arrival of the latest member of the Optimal family:  Prototype Testing! This exciting and much-requested new tool allows you to test designs early and often with users to gather fast insights, and make confident design decisions to create more intuitive and user-friendly digital experiences. 

‍

Optimal gives you tools you need to easily build a prototype to test using images and screens and creating clickable areas, or you can import a prototype from Figma and get testing. The first iteration of prototype testing is an open beta, and we’ll be working closely with our customers and community to gather feedback and ideas for further improvements in the months to come.

‍

‍

When to use prototype testing 

‍

Prototype testing is a great way to validate design ideas, identify usability issues, and gather feedback from users before investing too heavily in the development of products, websites, and apps. To further inform your insights, it’s a good idea to include sentiment questions or rating scales alongside your tasks.

‍

Early in the design process: Test initial ideas and concepts to gauge user reactions and feelings about your conceptual solutions. 

‍

Iterative design phases: Continuously test and refine prototypes as you make changes and improvements to the designs. 

‍

Before major milestones: Validate designs before key project stages, such as stakeholder reviews or final approvals.

‍

Usability Testing: Conduct summative research to assess a design's overall performance and gauge real user feedback to guide future design decisions and enhancements.

‍

‍

How it works 🧑🏽‍💻

‍

No existing prototype? No problem. We've made it easy to create one right within Optimal. Here's how:

‍

1. Import your visuals

Start by uploading a series of screenshots or images that represent your design flow. These will form the backbone of your prototype.

‍

2. Create interactive elements

Once your visuals are in place, it's time to bring them to life. Use our intuitive interface to designate clickable areas on each screen. These will act as navigation points for your test participants.

‍

3. Set up the flow

Connect your screens in a logical sequence, mirroring the user journey you want to test. This creates a seamless, interactive experience for your participants.

‍

4. Preview and refine

Before launching your study, take a moment to walk through your prototype. Ensure all clickable areas work as intended and the flow feels natural.

‍

The result? A fully functional prototype that looks and feels like a real digital product. Your test participants will be able to navigate through it just as they would a live website or app, providing you with authentic, actionable insights.

‍

By empowering you to build prototypes from scratch, we're removing barriers to early-stage testing. This means you can validate ideas faster, iterate with confidence, and ultimately deliver better digital experiences.

‍

‍

Or…import your prototypes directly from Figma 

‍

There’s a bit of housekeeping you’ll need to do in Figma in order to provide your participants with the best testing experience and not impact loading times of the prototype. You can import a link to your Figma prototype into your study,  and it will carry across all the interactions you have set up. You’ll need to make sure your Figma presentation mode is made public in order to share the file with participants. If you make any updates to your Figma file, you can sync the changes in just one click. 

‍

Help Article: Find out more about how to set up your Figma file for testing

‍

‍

How to create tasks 🧰

‍

When you set up your study, you’ll create tasks for participants to complete. 

‍

There are two different ways to build tasks in your prototype tests. You can set a correct destination by adding a start screen and a correct destination screen. That way, you can watch how participants navigate your design to find their way to the correct destination. Another option is to set a correct pathway and evaluate how participants navigate a product, app, or website based on the pathway sequence you set. You can add as many pathways or destinations as you like. 

‍

Adding post-task questions is a great way to help gather qualitative feedback on the user's experience, capturing their thoughts, feelings, and perceptions.

‍

Help Article: Find out how to analyze your results

‍

‍

Prototype testing analysis and metrics 📊

‍

Prototype testing offers a variety of analysis options and metrics to evaluate the effectiveness and usability of your design.  By using these analysis options and metrics, you can get comprehensive insights into your prototype's performance, identify areas for improvement, and make informed design decisions:

‍

Task results 

The task results provide a deep analysis at a task level, including the success score, directness score, time taken, misclicks, and the breakdown of the task's success and failure. They provide great insight into the usability of your design to achieve a task. 

‍

• Success score tells you the total percentage of participants who reached the correct destination or pathway that you defined for this task. It’s a good indicator of a prototype's usability. 
• Directness score is the total completed results minus the ‘indirect’ results.
• A path is ‘indirect’ when a participant backtracks, viewing the same page multiple times, or if they nominate the correct destination but don’t follow the correct pathway
• Time taken is how long it took a participant to complete your task and can be a good indicator of how easy or difficult it was to complete. 
• ‍Misclicks measure the total number of clicks made on areas of your prototype that weren’t clickable, clicks that didn’t result in a page change.

‍

‍

Clickmaps

‍

Clickmaps provide an aggregate view of user interactions with prototypes, visualizing click patterns to reveal how users navigate and locate information. They display hits and misses on designated clickable areas, average task completion times, and heatmaps showing where users believed the next steps to be. Filters for first, second, and third page visits allow analysis of user behavior over time, including how they adapt when backtracking. This comprehensive data helps designers understand user navigation patterns and improve prototype usability.

‍

‍

‍

Participant paths 

‍

The Paths tab in Optimal provides a powerful visualization to understand and identify common navigation patterns and potential obstacles participants encounter while completing tasks. You can include thumbnails of your screens to enhance your analysis, making it easier to pinpoint where users may face difficulties or where common paths occured.

‍

‍

‍

Coming soon to prototyping 🔮

‍

Later this year, we’re running a closed beta for video recording with prototype testing. This feature captures behaviors and insights not evident in click data alone. The browser-based recording requires no plugins, simplifying setup. Consent for recording is obtained at the start of the testing process and can be customized to align with your organization's policies. This new feature will provide deeper insights into user experience and prototype usability.

‍

These enhancements to prototype testing offer a comprehensive toolkit for user experience analysis. By combining quantitative click data with qualitative video insights, designers and researchers can gain a more nuanced understanding of user behavior, leading to more informed decisions and improved product designs.

‍

Start prototype testing today

UI and UX are two terms that are often used interchangeably and confused for one another, but what do they actually mean? And is there a crossover between them?

‍

These two terms have only grown in use in recent years, thanks largely to the exploding technology sector. This is great news. For organizations, effectively harnessing UX and UI enables them to build products and services that people will actually want to use – and continue using. For users, they’ll have access to products designed for them. 

‍

What is UX? 🤳🎯

‍

User experience (UX as it’s commonly called) refers to the experience that a person has with a product or service. 

‍

We can determine whether a user experience is good or bad based on how easy (or difficult) it is for users to interact with the various elements of a product or service. Is the sign-up flow easy to use? Does the CTA button on the homepage encourage users to click? UX design exists to answer questions like these – and here’s how.

‍

At the core of UX design is user research, which you can use to understand customer pain points and actually build products designed for the people using them. Typically, user research involves the use of a number of different research methods designed to answer specific questions. Card sorting, for example, can show you how people think the information on your website should be arranged.

‍

Designer and information architect Peter Morville came up with the user experience honeycomb, which demonstrates the various components of UX design.

‍

‍

Don Norman of Nielsen Norman Group defines UX as “[encompassing] all aspects of the end-users interaction with the company, its services, and its products”.

‍

If this seems broad, that’s because it is. UX actually extends beyond just the digital products of an organization and can be used for areas like retail, customer service and more. In fact, there’s actually a growing movement to replace UX with customer experience (CX), as a way of encompassing all of these disparate elements.

‍

What is UI? 🪄📲

‍

User interface (UI), in the most stripped-back definition, is the interface by which a user and a computer system communicate with one another. This includes the touchscreen on your smartphone, the screen on your laptop, your mouse and keyboard and countless other mechanisms.

‍

With this in mind, user interface design is focused on the elements that users will see on these interfaces, such as buttons, text and images. UI design is all about layout, look and feel. The objective of UI design is to visually guide users through an interface so they can complete their task. In a nutshell, you don’t want a user to think too hard about what they’re doing.

‍

‍

‍

UI has its origins in the 1980s, when Xerox developed the very first graphical user interface (GUI). Instead of needing to interact with a computer through a programming language, people could now use icons, menus and buttons. The rest, as they say, is history. Apple came along with the Macintosh computer in 1984 (bringing with it the first point and click mouse), and now we’re all carrying smartphones with touch screens that even a baby can operate.

‍

Like UX, UI has grown significantly – going far beyond what you’ll see on a computer screen. Those involved in the field of UI design today will work as much on the interfaces of computer programs and apps as they will on the user interfaces of cars, wearable devices and technologies in the home. If current trends continue, UI design is likely to become an even bigger field in the years ahead.

‍

What’s the difference between UX and UI? 👀

‍

UX and UI are both essential components of a product or service. You can’t have one without the other, and, as we’ve explored, neglecting one could have serious consequences for your product’s success.

‍

The difference between UX and UI is that UX is focused on the experience of using something and UI is focused on the look and feel of the interface. 

‍

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success”. - Rahul Varshney, co-creator of Foster.fm

‍

The difference between UX and UI is that UX is focused on the experience of using something and UI is focused on the look and feel of the interface. 

‍

Or, if you’d prefer a statement from venerable Nielsen Norman Group: “It’s important to distinguish the total user experience from the UI, even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios”.

‍

With this in mind, let’s now take a look at the people behind UX and UI. What do the roles look like in these fields? And, more importantly, what do they involve?

‍

UX and UI jobs guide 📱🧑🏻💻

‍

• Visual designer: This role works with other design roles in the organization (brand, marketing, etc) to ensure designs match brand guidelines. Visual designers also work with UX designers to verify that designs meet accessibility and usability requirements.
• UX strategist: At the core, a UX strategist should act as a champion of good UX. That is to say, work to ensure the principles of usability and human-centered design are well understood and utilized. They should also assume some of the responsibility of product-market fit, and work with product managers and the ‘business’ side of the organization to mesh business requirements with user requirements.
• UX designer: The most common UX profession, UX designers should have a strong understanding of the principles of UX design as well as some research ability. Essentially a jack of all trades, the UX designer will float between all stages of the UX lifecycle, helping out with usability tests, putting together prototypes and working with other areas of the organization.
• Service designer: The service designer looks at the entire end-to-end process and works with other designers, pulling them when required to liaise on visual designs and UI work. In a smaller organization, the responsibilities of this role will typically be absorbed by other roles, but eventually, there comes a time for the service designer. 

‍

Wrap up 🎬

‍

UX and UI as terms are only going to continue to grow, especially as technology and technology companies continue to proliferate across the globe. If you want to make sure that the user experience and user interfaces of your product or service are fit for the people using them, there’s no better place to start than with user research using powerful tools.

Natalie and Lulu have forged a unique team culture that focuses on positive outputs (and outcomes) for their app’s growing user base. In doing so, they turned the traditional design approach on its head and created a dynamic and supportive team. 

‍

Natalie, Director of Design at Hatch, and Lulu, UX Design Specialist, recently spoke at UX New Zealand, the leading UX and IA conference in New Zealand hosted by Optimal Workshop, on their concept of “radical collaboration”.

‍

In their talk, Nat and Lulu share their experience of growing a small app into a big player in the finance sector, and their unique approach to teamwork and culture which helped achieve it.

‍

Background on Natalie Ferguson and Lulu Pachuau

‍

Over the last two decades, Lulu and Nat have delivered exceptional customer experiences for too many organizations to count. After Nat co-founded Hatch, she begged Lulu to join her on their audacious mission: To supercharge wealth building in NZ. Together, they created a design and product culture that inspired 180,000 Kiwi investors to join in just 4 years.

‍

Contact Details:

‍

Email: natalie@sixfold.co.nz

‍

LinkedIn: https://www.linkedin.com/in/natalieferguson/ and https://www.linkedin.com/in/lulupach/

‍

Radical Collaboration - How teamwork makes the dream work 💪💪💪

‍

Nat and Lulu discuss how they nurtured a team culture of “radical collaboration” when growing the hugely popular app Hatch, based in New Zealand. Hatch allows everyday New Zealanders to quickly and easily trade in the U.S. share market. 

‍

The beginning of the COVID pandemic spelled huge growth for Hatch and caused significant design challenges for the product. This growth meant that the app had to grow from a baby startup to one that could operate at scale - virtually overnight. 

‍

In navigating this challenge, Nat and Lulu coined the term radical collaboration, which aims to “dismantle organizational walls and supercharge what teams achieve”. Radical collaboration has six key pillars, which they discuss alongside their experience at Hatch.

‍

Pillar #1: When you live and breathe your North star

‍

Listening to hundreds of their customers’ stories, combined with their own personal experiences with money, compelled Lulu and Nat to change how their users view money. And so, “Grow the wealth of New Zealanders” became a powerful mission statement, or North Star, for Hatch. The mission was to give people the confidence and the ability to live their own lives with financial freedom and control. Nat and Lulu express the importance of truly believing in the mission of your product, and how this can become a guiding light for any team. 

‍

Pillar #2: When you trust each other so much, you’re happy to give up control

‍

As Hatch grew rapidly, trusting each other became more and more important. Nat and Lulu state that sometimes you need to take a step back and stop fueling growth for growth’s sake. It was at this point that Nat asked Lulu to join the team, and Nat’s first request was for Lulu to be super critical about the product design to date - no feedback was out of bounds. Letting go, feeling uncomfortable, and trusting your team can be difficult, but sometimes it’s what you need in order to drag yourself out of status quo design. This resulted in a brief hiatus from frantic delivery to take stock and reprioritize what was important - something that can be difficult without heavy doses of trust!

‍

Pillar #3: When everyone wears all the hats

‍

During their journey, the team at Hatch heard lots of stories from their users. Many of these stories were heard during “Hatcheversery Calls”, where team members would call users on their sign-up anniversary to chat about their experience with the app. Some of these calls were inspiring, insightful, and heartwarming.

‍

Everyone at Hatch made these calls – designers, writers, customer support, engineers, and even the CEO. Speaking to strangers in this way was a challenge for some, especially since it was common to field technical questions about the business. Nevertheless, asking staff to wear many hats like this turned the entire team into researchers and analysts. By forcing ourselves and our team outside of our comfort zone, we forced each other to see the whole picture of the business, not just our own little piece.

‍

Pillar #4: When you do what’s right, not what’s glam

‍

In an increasingly competitive industry, designers and developers are often tempted to consistently deliver new and exciting features. In response to rapid growth, rather than adding more features to the app, Lulu and Nat made a conscious effort to really listen to their customers to understand what problems they needed solving. 

‍

As it turned out, filing overseas tax returns was a significant and common problem for their customers - it was difficult and expensive. So, the team at Hatch devised a tax solution. This solution was developed by the entire team, with almost no tax specialists involved until the very end! This process was far from glamorous and it often fell outside of standard job descriptions. However, the team eventually succeeded in simplifying a notoriously difficult process and saved their customers a massive headache.

‍

Pillar #5: When you own the outcome, not your output.

‍

Over time Hatch’s user base changed from being primarily confident, seasoned investors, to being first-time investors. This new user group was typically scared of investing and often felt that it was only a thing wealthy people did.

‍

At this point, Hatch felt it was necessary to take a step back from delivering updates to take stock of their new position. This meant deeply understanding their customers’ journey from signing up, to making their first trade. Once this was intimately understood, the team delivered a comprehensive onboarding process which increased the sign-up conversion rate by 10%!

‍

Pillar #6: When you’re relentlessly committed to making it work

‍

Nat and Lulu describe a moment when Allbirds wanted to work with Hatch to allow ordinary New Zealanders to be involved in their IPO launch on the New York stock exchange. Again, this task faced numerous tax and trade law challenges, and offering the service seemed like yet another insurmountable task. The team at Hatch nearly gave up several times during this project, but everyone was determined to get this feature across the line – and they did. As a result, New Zealanders were some of the few regular investors from outside the U.S that were able to take part in Albirds IPO. 

‍

Why it matters 💥

‍

Over four years, Hatch grew to 180,000 users who collectively invested over $1bn. Nat and Lulu’s success underscores the critical role of teamwork and collaboration in achieving exceptional user experiences. Product teams should remember that in the rapidly evolving tech industry, it's not just about delivering the latest features; it's about fostering a positive and supportive team culture that buys into the bigger picture.

‍

The Hatch team grew to be more than team members and technical experts. They grew in confidence and appreciated every moving part of the business. Product teams can draw inspiration from Hatch's journey, where designers, writers, engineers, and even the CEO actively engaged with users, challenged traditional design decisions, and prioritized solving actual user problems. This approach led to better, more user-centric outcomes and a deep understanding of the end-to-end user experience.

‍

Most importantly, through the good times and tough, the team grew to trust each other. The mission weaved its way through each member of the team, which ultimately manifested in positive outcomes for the user and the business.

‍

Nat and Lulu’s concept of radical collaboration led to several positive outcomes for Hatch:

• It changed the way they did business. Information was no longer held in the minds of a few individuals – instead, it was shared. People were able to step into other people's roles seamlessly. 
• Hatch achieved better results faster by focusing on the end-to-end experience of the app, rather than by adding successive features. 
• The team became more nimble – potential design/development issues were anticipated earlier because everyone knew what the downstream impacts of a decision would be.

‍

Over the next week, Lulu and Nat encourage designers and researchers to get outside of their comfort zone and:

• Visit customer support team
• Pick up the phone and call a customer
• Challenge status quo design decisions. Ask, does this thing solve an end-user problem?

‍