Tutorial Testing

Goal One

Understand if users could follow the onboarding tutorial

Goal Two

Assess comprehension of new terms like “splats” and “droplets”

Goal Three

Gauge whether the tutorial reduced first-time user hesitation

Wireframes

I translated flows and IA into low and mid fidelity wireframes to explore layout, structure, and interaction without the distraction of visual polish.

Low-fidelity sketches helped me:

Quickly test structural ideas and get feedback from stakeholders
Clarify page hierarchy, calls to action, and information groupings
Iterate on different Help Center layouts, such as card-based vs. list-based formats

Mid-Fidelity

Based on feedback, I created mid-fidelity wireframes for:

Sign-up & Onboarding Tutorials
Help Center UI

These included realistic content, refined UI patterns, and visual cues like tooltips, guided steps, and search visibility. This fidelity level helped me:

Validate interactive states and copy hierarchy
Communicate more confidently with developers and PMs
Get meaningful feedback from test participants who needed more context than wireframes alone provid

Affinity Diagram - Tutorial_ Info Architecture & Task Flow 1.png

Information Architecture for Tutorials

Focused on guiding users step-by-step through key actions in a clear, progressive format. The structure was kept shallow and linear to avoid cognitive overload for less tech-savvy users.

Task Flows

Affinity Diagram - Welcome Modal_ Info Architecture & Task Flow 1.png

Mind Mapping

Used individually to broaden the solution space and reduce groupthink before sharing back with the team.

Content Audit & Card Sorting

We audited the existing Help Center content and then used a card sort exercise to reimagine how information could be better structured and labeled. This helped us identify gaps and redundant content while thinking more deeply about user mental models.

Creating first impressions and supporting user learning

During my internship with Metaito, I was tasked with improving the onboarding experience, especially for new organisational users, by reducing friction and helping them feel confident and in control from their first login.

My Role

As one half of the design team, I was responsible for end-to-end UX design including:

UX Research & Interviews
Data Analysis & Insight Synthesis
Wireframing & Prototyping
Ideation Workshops
UI Design & Information Architecture
Usability Testing

Tools Used: Figma, Miro, InVision, Flowmapp, pen and paper

The Challenge

The primary challenge was to:

Increase confidence and trust among new users
Address first adopters’ feedback while creating a more intuitive, minimal interface
Balance onboarding clarity with long-term flexibility

Target Audience

Teams and individuals transitioning from scattered workflows
Users aiming to improve digital focus and productivity
Early-stage adopters with varying levels of digital fluency

Research

To understand what holds users back and how to help them move forward we set the following research goals.

How can we make it easier for users to form new habits on Factsplat?

What pain points occur during the onboarding/learning process, and how do they affect engagement?

How are users adapting or changing their existing workflows to use Factsplat?

Research Methods

We used a mix of quantitative and qualitative research to build a rounded understanding of user behavior

Ethnographic research with new users

Literature review of over 40 productivity studies

1-on-1 user interviews and usability tests

SWOT analysis to uncover competitive and internal friction points

Data Synthesis & Insights

One standout insight was that 85% of participants relied on traditional bookmark systems to organize digital content. Many felt resistant to switching to a new system due to perceived complexity and fear of losing their structure.

What We Learned

Users needed a more guided onboarding experience
Early interactions should highlight product value and suggest use cases
Reducing perceived effort was key to encouraging first-time engagement

These findings directly informed our design of walkthroughs, microcopy, and first-session content suggestions in the next phase.

User Persona

I created personas based on research findings to keep our focus on user pain points and motivations.

The persona helped align stakeholders and guided our design decisions throughout the project.

Empathy Mapping

To better understand the mindset of new users, I created an empathy map based on quotes and behaviours collected through interviews and usability tests. This exercise helped me visualise what users say, think, do, and feel when first interacting with Factsplat.

Understanding the Problem

During onboarding, many new users, particularly those in organisational roles, reported feeling lost or overwhelmed shortly after signing up. As a result, they often didn’t explore or learn the core functions of Factsplat.

Several users described themselves as “not tech savvy”, expressing hesitation and skepticism about adopting a new system. Their feedback suggested a need for more structured guidance during early interactions with the product.

Additionally, we found that users were frequently relying on a mix of old habits, such as browser bookmarks and tab hoarding, instead of fully committing to Factsplat. While migrating to a new system wasn’t technically difficult, it wasn’t motivating enough without a clear, immediate payoff.

Problem Statement

Less tech-savvy organizational users are not understanding key features of Factsplat.

These users need a guided onboarding experience that presents information in clear, bite-sized steps,accessible to users of all digital abilities.

If we solve this problem, we can create a better first impression, reduce early drop-off, and help users gain confidence in adopting Factsplat as their new digital workspace.

Ideation

To address the problem of users feeling under-confident and overwhelmed during their first experience with Factsplat, I facilitated and contributed to a collaborative design ideation process.

We brought together a multi-disciplinary team, including full-stack developers and sales representatives, for a workshop that used both divergent and convergent thinking to generate and evaluate ideas. This allowed us to combine technical feasibility with real user insights.

Methods Used

Beyond the group session, we also applied several individual and collaborative methods to explore the problem space from multiple angles

Prioritising Solutions with NUF

To select the most promising ideas, we used the NUF framework (Novelty, Usefulness, Feasibility) to evaluate and prioritize.

These concepts were chosen because they addressed both emotional pain points (like uncertainty or hesitation) and functional blockers (like not knowing where to begin or how to organize content).

Tutorials

Lightweight, visual guidance for specific tasks

Help Center

Restructured and simplified for clarity and accessibility

Getting Started Support

Onboarding content designed to build early confidence

Information Architecture for Help Center

Organized content into clearly defined categories and entry points (e.g. search, categories, related articles), with progressive disclosure to prevent information dumping. This IA supports both browsing and targeted help-seeking behavior.

User Tests

To validate the tutorial and help center concepts, I ran structured usability tests with a combined group of 11 participants. Each group was given tasks designed to reflect real onboarding scenarios, from signing up and watching tutorials to searching for answers and completing actions in the product.

Help Center Testing

Goal One

Evaluate how easily users could find specific help content

Goal Two

Observe user behavior with categories, subpages, and video content

Key Feedback

Usability testing revealed that while users found the tutorial helpful in introducing key concepts, many wanted the flexibility to revisit it later during real-world use.

Participants also preferred a balanced mix of text and video in the Help Center, noting that video alone wasn’t always practical for quick reference.

Navigation within the Help Center surfaced minor usability issues, with users expressing difficulty locating specific content due to excessive scrolling or unclear category groupings. Overall, the feedback highlighted a need for more accessible, clearly organized support resources that cater to different learning styles and comfort levels with technology.

Bachelors Student

“I’m not a tutorial person, but I’d definitely come back to it if I got stuck, right now I’m not sure how to find it again.”

Working Professional

“The Help Center layout makes sense, but I don’t always have time to watch videos, sometimes I just want to skim text.”

Retiree

“I got a bit lost in the categories. I knew what I was looking for, but scrolling made it harder to find.”

Masters Student

“The tutorial helped me understand the terms, but I still don’t really know how to use the platform in my own work.”

Data Synthesis

After testing, I processed feedback into a matrix of issues, insights, and actionable design changes.

Interpreting Feedback

The data showed several key opportunities for improvement:

Support content needed to be more inclusive.

Users wanted a balance between text and video. By prioritizing a mix of formats, I could cater to different learning preferences and also meet accessibility standards.

The tutorial needed to be available beyond onboarding.

Many users skipped or skimmed the tutorial at first—but later wanted to return to it. This insight led to changes that made the tutorial easy to access anytime in the product.

Users lacked real-time context.

Participants wanted a way to understand “what’s happening right now” in the interface. This gap surfaced during testing of the mid-fidelity wireframes and highlighted the need for contextual UI support or real-time updates.

How Testing Influenced Design

Using this feedback, I prioritised:

Restructuring the Help Center to support multi-format content
Making the tutorial persistent and discoverable, not one-and-done
Designing UI components that give users more immediate system feedback

Design Iteration

The final design changes were driven directly by insights gathered through usability testing. Each update was made to improve clarity, accessibility, and user confidence, especially for those less familiar with digital tools.

Help Center Improvements

We updated article content to better support embedded video tutorials (webms), improving clarity and catering to different learning styles.

A sub-menu was introduced to improve in-page navigation, helping users move easily between related topics.

Card sizes were increased to improve visual clarity, especially for users skimming or scanning.

Video Tutorial Navigation

Menus within the video pages were redesigned for easier, quicker access to different segments.

This helped reduce friction for users who preferred jumping to the information they needed rather than watching full walkthroughs.

Onboarding Experience

The guided tutorial was reworded and visually refreshed based on feedback.

We also updated the welcome modal to clearly point users toward the Help Center and tutorials, addressing a key issue where users weren’t sure how to find help once they skipped onboarding.

Lessons Learnt

As one of my first professional UX projects, this experience was both immersive and formative. It gave me the opportunity to apply the lean UX/UI process in a real-world setting, working as part of an agile, cross-functional team.

I gained confidence in my ability to translate complex, open-ended problems into simple, supportive user experiences, a skill I’ve carried forward into every project since.

Lesson One

Collaborating closely with developers, sales, and product stakeholders taught me the importance of communication, timing, and flexibility, particularly when navigating hand-offs and keeping user testing schedules aligned with sprint cycles.

I learned how to anticipate delays, clarify ownership, and maintain momentum across disciplines.

Lesson Two

Designing the Help Center and onboarding tutorial in tandem pushed me to think holistically about the user journey, and how multiple touchpoints contribute to user learning and confidence over time.

Lesson Three

This project also helped me grow significantly as a usability testing moderator. I experimented with how I framed tasks, used timing, and interpreted behavior to extract actionable insights.

The quantitative and qualitative data I gathered became central to informing design iterations, and showed me the power of testing to shape real product impact.