Helping Muslims Travel Better, Faster
COMPANY
Have Halal Will Travel
ROLE
Lead UX Designer & Researcher
EXPERTISE
UX/UI Design
YEAR
2023
Curious Core — 2023
Revolutionising F&B Supplier Onboarding
CLIENT
ZOLO
ROLE
Interaction Designer and UX Researcher
EXPERTISE
Interaction Design
UX Research
YEAR
2023
Curious Core — 202325
Revolutionising F&B Supplier Onboarding
CLIENT
ZOLO
ROLE
Interaction Designer and UX Researcher
EXPERTISE
Interaction Design
UX Research
YEAR
2023
Background —
ZOLO is an AI-driven powered order management software that offers food suppliers a centralized interface for effortless management of their B2B orders and sales.
Our collaboration with ZOLO aimed to facilitate our clients' transition from a no-code beta app to a fully coded version, making it possible for a wider range of prospective suppliers to test the platform before becoming actual customers.
My Role —
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Timeline —
4 Weeks sprint | Sep 2023
Skills —
UX Research
UX Design
Onboarding Flow
Micro-interactions
Chatbot
Prototyping
Usability Testing
Problem
The client came to us and established the following problems that the current product is facing:
No onboarding flow on the webapp
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
Transitioning from a no-code app to a fully coded one
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
UI of interface needs a refresher and the team has to set design system guidelines
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
Goal
To develop a user-centric onboarding process that instills confidence and provides control at users' fingertips
To allow users to self-serve on the webapp instead of resorting to calling customer support as the first option
To boost supplier productivity by optimising the user experience of the webapp
Our Research Process
User Interview
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
On-site Prototype Testing
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
Usability Testing
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
Understanding the current user flow
Based on insights from supplier user interviews, we focused on creating the webapp's onboarding flow to align with user priorities and existing practices. By understanding their current workflows, we can demonstrate to prospective customers how ZOLO's AI capabilities improve workflow efficiency, reduce human errors, and free up manpower.
Our Iterative Research Process
Three rounds, each one de-risking further. Round 1 tested just the "Convert to Order" step, validating the need to show users what's happening behind the scenes, and surfaced the value of instructional videos for key processes. Round 2 tested the full flow end to end, but still required fine-tuning, such as giving users more control over the flow. Round 3 gave us the System Usability Score, which helped us gauge how effective the onboarding flow felt to users.
Feel free to see our prototype in action here!
Our Design Solutions
01
Onboarding Chatbot
ZOLO's final solution for onboarding offers users a streamlined journey with personalised paths, improved search functionality, and a user-centric design.
With engaging tutorials and a real-time feedback loop, it ensures a seamless introduction to the app, diminishing customer support dependence and enhancing user satisfaction and adoption.
02
AI Convert to Order
This was one of the first features we iterated on after a user interview, where our interviewee wondered what was happening and didn't notice the spiral loading animation.
It taught us a valuable lesson: show what's happening, especially for a process that takes a bit of time.
03
Pulsating Hover Tooltip
Challenge
Users were overwhelmed with information, leading to confusion and inefficiency during onboarding.
Solution
Reduces information overload.
Provides contextual information on-demand.
Enhances user understanding.
Increases onboarding efficiency.
04
Support Centre
Challenge
Users often encountered difficulties and had no immediate support during onboarding.
Solution
Offers access to resources and FAQs.
Provides a self-help hub.
Empowers users to find solutions independently.
Enhances user confidence.
05
Instant Overlay
Challenge
Users were struggling with the complexity of navigating multiple tabs to access their purchase orders and invoices. This resulted in frustration and a less efficient workflow.
Solution
Simplifies access to PO orders and invoices.
Eliminates the need for multiple clicks and tab navigation.
Streamlines the user workflow.
Enhances efficiency and user satisfaction.
Reflections
Project Takeaways
Time Constraints
Due to the constraints of a one-month timeline, we are significantly limited in our ability to gather comprehensive user insights on the proposed design. This limitation affects our capacity to thoroughly analyse user feedback and make informed improvements to enhance the design effectively.
Integration Complexity
The team was asked about how ZOLO could be integrated but we can’t provide comprehensive responses to those questions. This is due to our limited knowledge of backend development and existing complex ERP systems. These challenges often involve significant costs and technical limitations.
User Expectation
User expectations may differ from ZOLO's current functions. Clarity about ZOLO's future plans can enhance user understanding of its potential and better manage their expectation
Personal Takeaways
Better Time Management
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Adopt an Agile Way of Working
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
Key Learnings From Research
User Interview
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
Analytics Review
Analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behaviour challenges.
These insights guide us on revamping the website's information architecture (IA).
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
Main Takeaways From Research
Navigation & findability issues on key pages
Users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem
They turn to external Google searches, since information isn't updated or extensive enough, with no way to ask or clarify on-site.
Users want to be led to information faster
Especially on article content pages, without having to experience scrolling fatigue.
Ideation
Affinity Mapping
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
01 — Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 — Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the page
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Prioritisation Table
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact.
This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
Background —
Background —
Have Halal Will Travel (HHWT) is the leading muslim travel & lifestyle platform based in Singapore with a market in the SEA region. Their current product is a content-rich website, primarily centred around travel-related articles and content.
Considering their substantial Muslim user base, HHWT is now aiming to extend their scope beyond being just a content website and transition into an all-in-one platform for muslim's travel needs.
ZOLO is an AI-driven powered order management software that offers food suppliers a centralized interface for effortless management of their B2B orders and sales.
Our collaboration with ZOLO aimed to facilitate our clients' transition from a no-code beta app to a fully coded version, making it possible for a wider range of prospective suppliers to test the platform before becoming actual customers.
Timeline —
4 Weeks sprint | Sep 2023
Skills —
UX Research
UX Design
Onboarding Flow
Micro-interactions
Chatbot
Prototyping
Usability Testing
My Role —
My Role —
My Role —
Led a team of 3, worked closely with Product Manager
Directed project flow through UX design and research
Collaborated closely with stakeholders and team to execute and deliver prototype
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Problem
Problem
02 / Establishing the problem
The client came to us and established the following problems that the current product is facing:
The client came to us and established the following problems that the current product is facing:
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
No onboarding flow on the webapp
No motivation to sign up for an account
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
Users can only read and then save articles that they like
UI of interface needs a refresher and the team has to set design system guidelines
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
Low engagement on website
Transitioning from a no-code app to a fully coded one
No onboarding flow on the webapp
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
UI of interface needs a refresher and the team has to set design system guidelines
Transitioning from a no-code app to a fully coded one
“How might we enhance the user experience and boost engagement of Have Halal Will Travel website so that muslims will use it as a go-to resource for all their travelling needs?”
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
Research Deepdive
View Solutions
Goal
Goal
To increase retention time and lower bounce rates from 80% to 70%
To develop a user-centric onboarding process that instills confidence and provides control at users' fingertips
To increase engagement on website and allow users to interact with the community
To allow users to self-serve on the webapp instead of resorting to calling customer support as the first option
To improve overall user experience by aligning information architecture with user behaviours in asking, searching, and browsing
To boost supplier productivity by optimising the user experience of the webapp
Our Research Process
Our Iterative Research Process
Three rounds, each one de-risking further. Round 1 tested just the "Convert to Order" step, validating the need to show users what's happening behind the scenes, and surfaced the value of instructional videos for key processes. Round 2 tested the full flow end to end, but still required fine-tuning, such as giving users more control over the flow. Round 3 gave us the System Usability Score, which helped us gauge how effective the flow felt to users.
Understanding the current user flow
Based on insights from supplier user interviews, we focused on creating the webapp's onboarding flow to align with user priorities and existing practices. By understanding their current workflows, we can demonstrate to prospective customers how ZOLO's AI capabilities improve workflow efficiency, reduce human errors, and free up manpower.
Analytics Review
On-site Prototype Testing
Analysed Google Analytics and Hotjar recordings to identify behavioural patterns, findability issues, ad placement friction, and scrolling fatigue across key pages.
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
User Interview
Spoke with 3 Muslim travellers to understand their travel needs, pain points, and frustrations, observed their site usage, and asked for suggestions on integrating a community aspect.
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them.
Affinity Mapping
Usability Testing
On-site Prototype Testing
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
Usability Testing
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
Feel free to see our protoype in action here!
View HHWT Prototype
03 / Solutions in detail
Our Design Solutions
Our Design Solutions
03 — 01
01
Destination Page
Destination Page
Expanding to 3 destination pages to improve categorisation and hierarchy
Onboarding Chatbot
Expanding to 3 destination pages to improve categorisation and hierarchy
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
Main destination page : users will be led here when they click on ‘Destinations’ in the navbar
Country specific destination page (i.e Japan)
City specific destination page (i.e Tokyo)
Main destination page : users will be led here when they click on ‘Destinations’ in the navbar
Country specific destination page (i.e Japan)
City specific destination page (i.e Tokyo)
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
03 — 02
02
Homepage
Homepage
Homepage
Leading users to more content by allowing them to search
Leading users to more content by allowing them to search
Leading users to more content by allowing them to search
To enhance accessibility, the search bar is now prominently centered on the page, instead of being in the left-hand corner.
Centralised Search Bar
These prompts are designed to guide users who visit the homepage with the intention of exploring further, directing them to different parts of the site.
Actionable Prompts
Centralised Search Bar
To enhance accessibility, the search bar is now prominently centered on the page, instead of being in the left-hand corner.
Actionable Prompts
These prompts are designed to guide users who visit the homepage with the intention of exploring further, directing them to different parts of the site.
03 — 03
03
Destination Page
Destination Page
Increase findability of content for users who browse
Increase findability of content for users who browse
City Specific Destination Page > Article Categorisation
Following HHWT's travel taxonomy of Eat, See & Do, and Stay, we've organised articles to help users easily find inspiration to include in their itineraries.
Country Specific Destination Page > Itinerary
Placing the itinerary on the country destination page ensures a more central and contextually relevant experience, improving user engagement and easier reference.
05
Article Content Page
Improve content browsing experience
Summary Feature
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Setting Ad Constraints
Our research showed sporadic ads disrupt user experience; we chose banner ads as it offer a less intrusive and space-efficient revenue solution
03 — 04
04
Article Content Page
Article Content Page
Allowing users to ask all their questions natively
Allowing users to ask all their questions natively
Previously HHWT struggle with updated information and users have no means to ask / clarify on site. We introduced a community forum to let users update information or seek community opinions, therefore enhancing engagement and interaction.
Previously HHWT struggle with updated information and users have no means to ask / clarify on site.
We introduced a community forum to let users update information or seek community opinions, therefore enhancing engagement and interaction.
04
06
Career Page
Homepage
Aligning with Natural User Behaviour
Personalising The Experience
Personalising the experience
Dynamic Content
Dynamic sections like "Latest Stories" and "Trending Destinations" will refresh with trending content, enhancing engagement and boosting user retention.
Personalisation of content
To boost signups, the homepage is customised: new visitors see general content, while logged-in users receive personalised recommendations based on their engagement, enhancing their experience.
"Join our Academic Network"
Dynamic Content
For exploratory candidates, we introduced the feature with a Qualtrics form, allowing them to express interest and submit their details without the pressure of immediate application.
Dynamic sections like "Latest Stories" and "Trending Destinations" will refresh with trending content, enhancing engagement and boosting user retention.
Enhanced Filtering Options
Personalisation of content
Including specific filters for transitional educator roles—enable faster, more precise job discovery.
To boost signups, the homepage is customised: new visitors see general content, while logged-in users receive personalised recommendations based on their engagement, enhancing their experience.
03 — 05
05
Article Content Page
Article Content Page
Improve content browsing experience
Improve content browsing experience
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Summary Feature
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Setting Ad Constraints
Our research showed sporadic ads disrupt user experience; we chose banner ads as it offer a less intrusive and space-efficient revenue solution
Proposed Future steps for HHWT
04 / Next Steps
01 / UGC
Users sharing their vlogs, tiktoks
Users sharing their itineraries
Destination guides write articles or reviews about new halal openings
02 / Geolocation
Consider geolocalized personalisation
Use geolocation to recommend things around the area. i.e. halal food near the airport.
03 / Community — 'Ask a Guide'
Give users motivation to signup for an account to interact with community
Reach out to muslims who stay abroad to be guides and answer user queries.
Retrospective
Reflections
Project Takeaways
Project Takeaways
Embracing Agile to Manage Time and Quality
Time Constraints
The team spent about 1.5 weeks designing and delivering a high-quality prototype. Adopting a more agile methodology could have helped allocate time more effectively, preventing burnout and ensuring we didn't overextend ourselves.
Due to the constraints of a one-month timeline, we are significantly limited in our ability to gather comprehensive user insights on the proposed design. This limitation affects our capacity to thoroughly analyse user feedback and make informed improvements to enhance the design effectively.
Integration Complexity
The team was asked about how ZOLO could be integrated but we can’t provide comprehensive responses to those questions. This is due to our limited knowledge of backend development and existing complex ERP systems. These challenges often involve significant costs and technical limitations.
Navigating Constraints in User Research
User Expectation
Although 200 users were willing to participate in interviews, only 19 were selected by the client, with just 3 responding. A larger pool would have deepened user understanding. Time constraints prevented user testing to validate assumptions and prototype effectiveness in enhancing user experience, leaving recommendations based solely on insights, not user feedback.
User expectations may differ from ZOLO's current functions. Clarity about ZOLO's future plans can enhance user understanding of its potential and better manage their expectation
Personal Takeaways
Personal Takeaways
Delegate and Communicate More
Better Time Management
Initially, team communication was poor, leading me to take on too much until I realised the need for explicit delegation.
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Clarifying Early to Avoid Delays
Adopt an Agile Way of Working
Better Time Management
We had to pivot significantly due to broad scope and overwhelming focus areas, causing delays. In hindsight, earlier check-ins with stakeholders could have ensured ample project time.
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Adopt an Agile Way of Working
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
Ideation
Affinity Mapping
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
01 — Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 — Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the page
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Prioritisation Matrix
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact.
This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
Key Learnings From Research
Analytics Review
Analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behaviour challenges.
These insights guide us on revamping the website's information architecture (IA).
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
User Interview
We conducted 3 user interviews to gain a better understanding of the travel needs of muslims, their pain point and frustrations.
Additionally, we observed their site usage, collected their suggestions for improving the overall user experience, and sought their opinions on integrating a community aspect.
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
Main Takeaways From Research
Navigation & findability issues on key pages
Users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem
They turn to external Google searches, since information isn't updated or extensive enough, with no way to ask or clarify on-site.
Users want to be led to information faster
Especially on article content pages, without having to experience scrolling fatigue.
Key learnings from research
06 / Research insights
Key insights from data
Through analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behavior challenges. These insights will serve as valuable guidance as we work on revamping the website's information architecture (IA).
01 / Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 / Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 / Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
Key insights from user interviews
We conducted 3 user interviews to gain a better understanding of the travel needs of muslims, their pain point and frustrations. Additionally, we observed their site usage, collected their suggestions for improving the overall user experience, and sought their opinions on integrating a community aspect.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
Main takeaways from research
Navigation challanges and findability issues on key pages - users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem to do external google search - information not updated and not extensive enough, no means to ask / clarify on site.
Users want to be led to information faster especially on an article content page, without having to experience scrolling fatigue
Design Prioritsation
07 / Idea Development
Synthesising all our data
The affinity map helped us recognize consistent patterns across all data sources and provided valuable guidance for shaping our recommendations. We identified patterns in current user behavior, type of travel, most importantly we identified current pain points and opportunities for us to take
Key Insights from Affinity Map
01 / Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 / Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the pages
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Categorising our features and recommendations
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact. This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
TL;DR
08 / Research Process
We conducted data analysis, competitive analysis, user testing, and evaluated usability heuristics and information architecture to better understand our users and website.
These insights guided the redesign of key pages like the homepage, destination page, and content article page.
For more details on the case study, please reach out to me here.
Helping Muslims Travel Better, Faster
COMPANY
Have Halal Will Travel
ROLE
Lead UX Designer & Researcher
EXPERTISE
UX/UI Design
YEAR
2023
Curious Core — 2023
Revolutionising F&B Supplier Onboarding
CLIENT
ZOLO
ROLE
Interaction Designer and UX Researcher
EXPERTISE
Interaction Design
UX Research
YEAR
2023
Curious Core — 202325
Revolutionising F&B Supplier Onboarding
CLIENT
ZOLO
ROLE
Interaction Designer and UX Researcher
EXPERTISE
Interaction Design
UX Research
YEAR
2023
Background —
ZOLO is an AI-driven powered order management software that offers food suppliers a centralized interface for effortless management of their B2B orders and sales.
Our collaboration with ZOLO aimed to facilitate our clients' transition from a no-code beta app to a fully coded version, making it possible for a wider range of prospective suppliers to test the platform before becoming actual customers.
My Role —
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Timeline —
4 Weeks sprint | Sep 2023
Skills —
UX Research
UX Design
Onboarding Flow
Micro-interactions
Chatbot
Prototyping
Usability Testing
Problem
The client came to us and established the following problems that the current product is facing:
No onboarding flow on the webapp
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
Transitioning from a no-code app to a fully coded one
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
UI of interface needs a refresher and the team has to set design system guidelines
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
Goal
To develop a user-centric onboarding process that instills confidence and provides control at users' fingertips
To allow users to self-serve on the webapp instead of resorting to calling customer support as the first option
To boost supplier productivity by optimising the user experience of the webapp
Our Research Process
User Interview
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
On-site Prototype Testing
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
Usability Testing
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
Understanding the current user flow
Based on insights from supplier user interviews, we focused on creating the webapp's onboarding flow to align with user priorities and existing practices. By understanding their current workflows, we can demonstrate to prospective customers how ZOLO's AI capabilities improve workflow efficiency, reduce human errors, and free up manpower.
Our Iterative Research Process
Three rounds, each one de-risking further. Round 1 tested just the "Convert to Order" step, validating the need to show users what's happening behind the scenes, and surfaced the value of instructional videos for key processes. Round 2 tested the full flow end to end, but still required fine-tuning, such as giving users more control over the flow. Round 3 gave us the System Usability Score, which helped us gauge how effective the onboarding flow felt to users.
Feel free to see our prototype in action here!
Our Design Solutions
01
Onboarding Chatbot
ZOLO's final solution for onboarding offers users a streamlined journey with personalised paths, improved search functionality, and a user-centric design.
With engaging tutorials and a real-time feedback loop, it ensures a seamless introduction to the app, diminishing customer support dependence and enhancing user satisfaction and adoption.
02
AI Convert to Order
This was one of the first features we iterated on after a user interview, where our interviewee wondered what was happening and didn't notice the spiral loading animation.
It taught us a valuable lesson: show what's happening, especially for a process that takes a bit of time.
03
Pulsating Hover Tooltip
Challenge
Users were overwhelmed with information, leading to confusion and inefficiency during onboarding.
Solution
Reduces information overload.
Provides contextual information on-demand.
Enhances user understanding.
Increases onboarding efficiency.
04
Support Centre
Challenge
Users often encountered difficulties and had no immediate support during onboarding.
Solution
Offers access to resources and FAQs.
Provides a self-help hub.
Empowers users to find solutions independently.
Enhances user confidence.
05
Instant Overlay
Challenge
Users were struggling with the complexity of navigating multiple tabs to access their purchase orders and invoices. This resulted in frustration and a less efficient workflow.
Solution
Simplifies access to PO orders and invoices.
Eliminates the need for multiple clicks and tab navigation.
Streamlines the user workflow.
Enhances efficiency and user satisfaction.
Reflections
Project Takeaways
Time Constraints
Due to the constraints of a one-month timeline, we are significantly limited in our ability to gather comprehensive user insights on the proposed design. This limitation affects our capacity to thoroughly analyse user feedback and make informed improvements to enhance the design effectively.
Integration Complexity
The team was asked about how ZOLO could be integrated but we can’t provide comprehensive responses to those questions. This is due to our limited knowledge of backend development and existing complex ERP systems. These challenges often involve significant costs and technical limitations.
User Expectation
User expectations may differ from ZOLO's current functions. Clarity about ZOLO's future plans can enhance user understanding of its potential and better manage their expectation
Personal Takeaways
Better Time Management
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Adopt an Agile Way of Working
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
Key Learnings From Research
User Interview
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
Analytics Review
Analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behaviour challenges.
These insights guide us on revamping the website's information architecture (IA).
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
Main Takeaways From Research
Navigation & findability issues on key pages
Users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem
They turn to external Google searches, since information isn't updated or extensive enough, with no way to ask or clarify on-site.
Users want to be led to information faster
Especially on article content pages, without having to experience scrolling fatigue.
Ideation
Affinity Mapping
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
01 — Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 — Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the page
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Prioritisation Table
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact.
This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
Background —
Background —
Have Halal Will Travel (HHWT) is the leading muslim travel & lifestyle platform based in Singapore with a market in the SEA region. Their current product is a content-rich website, primarily centred around travel-related articles and content.
Considering their substantial Muslim user base, HHWT is now aiming to extend their scope beyond being just a content website and transition into an all-in-one platform for muslim's travel needs.
ZOLO is an AI-driven powered order management software that offers food suppliers a centralized interface for effortless management of their B2B orders and sales.
Our collaboration with ZOLO aimed to facilitate our clients' transition from a no-code beta app to a fully coded version, making it possible for a wider range of prospective suppliers to test the platform before becoming actual customers.
Timeline —
4 Weeks sprint | Sep 2023
Skills —
UX Research
UX Design
Onboarding Flow
Micro-interactions
Chatbot
Prototyping
Usability Testing
My Role —
My Role —
My Role —
Led a team of 3, worked closely with Product Manager
Directed project flow through UX design and research
Collaborated closely with stakeholders and team to execute and deliver prototype
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Problem
Problem
02 / Establishing the problem
The client came to us and established the following problems that the current product is facing:
The client came to us and established the following problems that the current product is facing:
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
No onboarding flow on the webapp
No motivation to sign up for an account
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
Users can only read and then save articles that they like
UI of interface needs a refresher and the team has to set design system guidelines
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
Low engagement on website
Transitioning from a no-code app to a fully coded one
No onboarding flow on the webapp
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
UI of interface needs a refresher and the team has to set design system guidelines
Transitioning from a no-code app to a fully coded one
“How might we enhance the user experience and boost engagement of Have Halal Will Travel website so that muslims will use it as a go-to resource for all their travelling needs?”
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
Research Deepdive
View Solutions
Goal
Goal
To increase retention time and lower bounce rates from 80% to 70%
To develop a user-centric onboarding process that instills confidence and provides control at users' fingertips
To increase engagement on website and allow users to interact with the community
To allow users to self-serve on the webapp instead of resorting to calling customer support as the first option
To improve overall user experience by aligning information architecture with user behaviours in asking, searching, and browsing
To boost supplier productivity by optimising the user experience of the webapp
Our Research Process
Our Iterative Research Process
Three rounds, each one de-risking further. Round 1 tested just the "Convert to Order" step, validating the need to show users what's happening behind the scenes, and surfaced the value of instructional videos for key processes. Round 2 tested the full flow end to end, but still required fine-tuning, such as giving users more control over the flow. Round 3 gave us the System Usability Score, which helped us gauge how effective the flow felt to users.
Understanding the current user flow
Based on insights from supplier user interviews, we focused on creating the webapp's onboarding flow to align with user priorities and existing practices. By understanding their current workflows, we can demonstrate to prospective customers how ZOLO's AI capabilities improve workflow efficiency, reduce human errors, and free up manpower.
Analytics Review
On-site Prototype Testing
Analysed Google Analytics and Hotjar recordings to identify behavioural patterns, findability issues, ad placement friction, and scrolling fatigue across key pages.
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
User Interview
Spoke with 3 Muslim travellers to understand their travel needs, pain points, and frustrations, observed their site usage, and asked for suggestions on integrating a community aspect.
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them.
Affinity Mapping
Usability Testing
On-site Prototype Testing
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
Usability Testing
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
Feel free to see our protoype in action here!
View HHWT Prototype
03 / Solutions in detail
Our Design Solutions
Our Design Solutions
03 — 01
01
Destination Page
Destination Page
Expanding to 3 destination pages to improve categorisation and hierarchy
Onboarding Chatbot
Expanding to 3 destination pages to improve categorisation and hierarchy
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
Main destination page : users will be led here when they click on ‘Destinations’ in the navbar
Country specific destination page (i.e Japan)
City specific destination page (i.e Tokyo)
Main destination page : users will be led here when they click on ‘Destinations’ in the navbar
Country specific destination page (i.e Japan)
City specific destination page (i.e Tokyo)
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
03 — 02
02
Homepage
Homepage
Homepage
Leading users to more content by allowing them to search
Leading users to more content by allowing them to search
Leading users to more content by allowing them to search
To enhance accessibility, the search bar is now prominently centered on the page, instead of being in the left-hand corner.
Centralised Search Bar
These prompts are designed to guide users who visit the homepage with the intention of exploring further, directing them to different parts of the site.
Actionable Prompts
Centralised Search Bar
To enhance accessibility, the search bar is now prominently centered on the page, instead of being in the left-hand corner.
Actionable Prompts
These prompts are designed to guide users who visit the homepage with the intention of exploring further, directing them to different parts of the site.
03 — 03
03
Destination Page
Destination Page
Increase findability of content for users who browse
Increase findability of content for users who browse
City Specific Destination Page > Article Categorisation
Following HHWT's travel taxonomy of Eat, See & Do, and Stay, we've organised articles to help users easily find inspiration to include in their itineraries.
Country Specific Destination Page > Itinerary
Placing the itinerary on the country destination page ensures a more central and contextually relevant experience, improving user engagement and easier reference.
05
Article Content Page
Improve content browsing experience
Summary Feature
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Setting Ad Constraints
Our research showed sporadic ads disrupt user experience; we chose banner ads as it offer a less intrusive and space-efficient revenue solution
03 — 04
04
Article Content Page
Article Content Page
Allowing users to ask all their questions natively
Allowing users to ask all their questions natively
Previously HHWT struggle with updated information and users have no means to ask / clarify on site. We introduced a community forum to let users update information or seek community opinions, therefore enhancing engagement and interaction.
Previously HHWT struggle with updated information and users have no means to ask / clarify on site.
We introduced a community forum to let users update information or seek community opinions, therefore enhancing engagement and interaction.
04
06
Career Page
Homepage
Aligning with Natural User Behaviour
Personalising The Experience
Personalising the experience
Dynamic Content
Dynamic sections like "Latest Stories" and "Trending Destinations" will refresh with trending content, enhancing engagement and boosting user retention.
Personalisation of content
To boost signups, the homepage is customised: new visitors see general content, while logged-in users receive personalised recommendations based on their engagement, enhancing their experience.
"Join our Academic Network"
Dynamic Content
For exploratory candidates, we introduced the feature with a Qualtrics form, allowing them to express interest and submit their details without the pressure of immediate application.
Dynamic sections like "Latest Stories" and "Trending Destinations" will refresh with trending content, enhancing engagement and boosting user retention.
Enhanced Filtering Options
Personalisation of content
Including specific filters for transitional educator roles—enable faster, more precise job discovery.
To boost signups, the homepage is customised: new visitors see general content, while logged-in users receive personalised recommendations based on their engagement, enhancing their experience.
03 — 05
05
Article Content Page
Article Content Page
Improve content browsing experience
Improve content browsing experience
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Summary Feature
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Setting Ad Constraints
Our research showed sporadic ads disrupt user experience; we chose banner ads as it offer a less intrusive and space-efficient revenue solution
Proposed Future steps for HHWT
04 / Next Steps
01 / UGC
Users sharing their vlogs, tiktoks
Users sharing their itineraries
Destination guides write articles or reviews about new halal openings
02 / Geolocation
Consider geolocalized personalisation
Use geolocation to recommend things around the area. i.e. halal food near the airport.
03 / Community — 'Ask a Guide'
Give users motivation to signup for an account to interact with community
Reach out to muslims who stay abroad to be guides and answer user queries.
Retrospective
Reflections
Project Takeaways
Project Takeaways
Embracing Agile to Manage Time and Quality
Time Constraints
The team spent about 1.5 weeks designing and delivering a high-quality prototype. Adopting a more agile methodology could have helped allocate time more effectively, preventing burnout and ensuring we didn't overextend ourselves.
Due to the constraints of a one-month timeline, we are significantly limited in our ability to gather comprehensive user insights on the proposed design. This limitation affects our capacity to thoroughly analyse user feedback and make informed improvements to enhance the design effectively.
Integration Complexity
The team was asked about how ZOLO could be integrated but we can’t provide comprehensive responses to those questions. This is due to our limited knowledge of backend development and existing complex ERP systems. These challenges often involve significant costs and technical limitations.
Navigating Constraints in User Research
User Expectation
Although 200 users were willing to participate in interviews, only 19 were selected by the client, with just 3 responding. A larger pool would have deepened user understanding. Time constraints prevented user testing to validate assumptions and prototype effectiveness in enhancing user experience, leaving recommendations based solely on insights, not user feedback.
User expectations may differ from ZOLO's current functions. Clarity about ZOLO's future plans can enhance user understanding of its potential and better manage their expectation
Personal Takeaways
Personal Takeaways
Delegate and Communicate More
Better Time Management
Initially, team communication was poor, leading me to take on too much until I realised the need for explicit delegation.
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Clarifying Early to Avoid Delays
Adopt an Agile Way of Working
Better Time Management
We had to pivot significantly due to broad scope and overwhelming focus areas, causing delays. In hindsight, earlier check-ins with stakeholders could have ensured ample project time.
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Adopt an Agile Way of Working
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
Ideation
Affinity Mapping
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
01 — Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 — Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the page
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Prioritisation Matrix
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact.
This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
Key Learnings From Research
Analytics Review
Analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behaviour challenges.
These insights guide us on revamping the website's information architecture (IA).
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
User Interview
We conducted 3 user interviews to gain a better understanding of the travel needs of muslims, their pain point and frustrations.
Additionally, we observed their site usage, collected their suggestions for improving the overall user experience, and sought their opinions on integrating a community aspect.
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
Main Takeaways From Research
Navigation & findability issues on key pages
Users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem
They turn to external Google searches, since information isn't updated or extensive enough, with no way to ask or clarify on-site.
Users want to be led to information faster
Especially on article content pages, without having to experience scrolling fatigue.
Key learnings from research
06 / Research insights
Key insights from data
Through analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behavior challenges. These insights will serve as valuable guidance as we work on revamping the website's information architecture (IA).
01 / Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 / Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 / Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
Key insights from user interviews
We conducted 3 user interviews to gain a better understanding of the travel needs of muslims, their pain point and frustrations. Additionally, we observed their site usage, collected their suggestions for improving the overall user experience, and sought their opinions on integrating a community aspect.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
Main takeaways from research
Navigation challanges and findability issues on key pages - users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem to do external google search - information not updated and not extensive enough, no means to ask / clarify on site.
Users want to be led to information faster especially on an article content page, without having to experience scrolling fatigue
Design Prioritsation
07 / Idea Development
Synthesising all our data
The affinity map helped us recognize consistent patterns across all data sources and provided valuable guidance for shaping our recommendations. We identified patterns in current user behavior, type of travel, most importantly we identified current pain points and opportunities for us to take
Key Insights from Affinity Map
01 / Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 / Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the pages
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Categorising our features and recommendations
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact. This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
TL;DR
08 / Research Process
We conducted data analysis, competitive analysis, user testing, and evaluated usability heuristics and information architecture to better understand our users and website.
These insights guided the redesign of key pages like the homepage, destination page, and content article page.
For more details on the case study, please reach out to me here.
Helping Muslims Travel Better, Faster
COMPANY
Have Halal Will Travel
ROLE
Lead UX Designer & Researcher
EXPERTISE
UX/UI Design
YEAR
2023
Curious Core — 2023
Revolutionising F&B Supplier Onboarding
CLIENT
ZOLO
ROLE
Interaction Designer and UX Researcher
EXPERTISE
Interaction Design
UX Research
YEAR
2023
Curious Core — 202325
Revolutionising F&B Supplier Onboarding
CLIENT
ZOLO
ROLE
Interaction Designer and UX Researcher
EXPERTISE
Interaction Design
UX Research
YEAR
2023
Background —
ZOLO is an AI-driven powered order management software that offers food suppliers a centralized interface for effortless management of their B2B orders and sales.
Our collaboration with ZOLO aimed to facilitate our clients' transition from a no-code beta app to a fully coded version, making it possible for a wider range of prospective suppliers to test the platform before becoming actual customers.
My Role —
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Timeline —
4 Weeks sprint | Sep 2023
Skills —
UX Research
UX Design
Onboarding Flow
Micro-interactions
Chatbot
Prototyping
Usability Testing
Problem
The client came to us and established the following problems that the current product is facing:
No onboarding flow on the webapp
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
Transitioning from a no-code app to a fully coded one
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
UI of interface needs a refresher and the team has to set design system guidelines
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
Goal
To develop a user-centric onboarding process that instills confidence and provides control at users' fingertips
To allow users to self-serve on the webapp instead of resorting to calling customer support as the first option
To boost supplier productivity by optimising the user experience of the webapp
Our Research Process
User Interview
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
On-site Prototype Testing
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
Usability Testing
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
Understanding the current user flow
Based on insights from supplier user interviews, we focused on creating the webapp's onboarding flow to align with user priorities and existing practices. By understanding their current workflows, we can demonstrate to prospective customers how ZOLO's AI capabilities improve workflow efficiency, reduce human errors, and free up manpower.
Our Iterative Research Process
Three rounds, each one de-risking further. Round 1 tested just the "Convert to Order" step, validating the need to show users what's happening behind the scenes, and surfaced the value of instructional videos for key processes. Round 2 tested the full flow end to end, but still required fine-tuning, such as giving users more control over the flow. Round 3 gave us the System Usability Score, which helped us gauge how effective the onboarding flow felt to users.
Feel free to see our prototype in action here!
Our Design Solutions
01
Onboarding Chatbot
ZOLO's final solution for onboarding offers users a streamlined journey with personalised paths, improved search functionality, and a user-centric design.
With engaging tutorials and a real-time feedback loop, it ensures a seamless introduction to the app, diminishing customer support dependence and enhancing user satisfaction and adoption.
02
AI Convert to Order
This was one of the first features we iterated on after a user interview, where our interviewee wondered what was happening and didn't notice the spiral loading animation.
It taught us a valuable lesson: show what's happening, especially for a process that takes a bit of time.
03
Pulsating Hover Tooltip
Challenge
Users were overwhelmed with information, leading to confusion and inefficiency during onboarding.
Solution
Reduces information overload.
Provides contextual information on-demand.
Enhances user understanding.
Increases onboarding efficiency.
04
Support Centre
Challenge
Users often encountered difficulties and had no immediate support during onboarding.
Solution
Offers access to resources and FAQs.
Provides a self-help hub.
Empowers users to find solutions independently.
Enhances user confidence.
05
Instant Overlay
Challenge
Users were struggling with the complexity of navigating multiple tabs to access their purchase orders and invoices. This resulted in frustration and a less efficient workflow.
Solution
Simplifies access to PO orders and invoices.
Eliminates the need for multiple clicks and tab navigation.
Streamlines the user workflow.
Enhances efficiency and user satisfaction.
Reflections
Project Takeaways
Time Constraints
Due to the constraints of a one-month timeline, we are significantly limited in our ability to gather comprehensive user insights on the proposed design. This limitation affects our capacity to thoroughly analyse user feedback and make informed improvements to enhance the design effectively.
Integration Complexity
The team was asked about how ZOLO could be integrated but we can’t provide comprehensive responses to those questions. This is due to our limited knowledge of backend development and existing complex ERP systems. These challenges often involve significant costs and technical limitations.
User Expectation
User expectations may differ from ZOLO's current functions. Clarity about ZOLO's future plans can enhance user understanding of its potential and better manage their expectation
Personal Takeaways
Better Time Management
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Adopt an Agile Way of Working
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
Key Learnings From Research
User Interview
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
Analytics Review
Analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behaviour challenges.
These insights guide us on revamping the website's information architecture (IA).
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
Main Takeaways From Research
Navigation & findability issues on key pages
Users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem
They turn to external Google searches, since information isn't updated or extensive enough, with no way to ask or clarify on-site.
Users want to be led to information faster
Especially on article content pages, without having to experience scrolling fatigue.
Ideation
Affinity Mapping
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
01 — Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 — Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the page
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Prioritisation Table
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact.
This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
Background —
Background —
Have Halal Will Travel (HHWT) is the leading muslim travel & lifestyle platform based in Singapore with a market in the SEA region. Their current product is a content-rich website, primarily centred around travel-related articles and content.
Considering their substantial Muslim user base, HHWT is now aiming to extend their scope beyond being just a content website and transition into an all-in-one platform for muslim's travel needs.
ZOLO is an AI-driven powered order management software that offers food suppliers a centralized interface for effortless management of their B2B orders and sales.
Our collaboration with ZOLO aimed to facilitate our clients' transition from a no-code beta app to a fully coded version, making it possible for a wider range of prospective suppliers to test the platform before becoming actual customers.
Timeline —
4 Weeks sprint | Sep 2023
Skills —
UX Research
UX Design
Onboarding Flow
Micro-interactions
Chatbot
Prototyping
Usability Testing
My Role —
My Role —
My Role —
Led a team of 3, worked closely with Product Manager
Directed project flow through UX design and research
Collaborated closely with stakeholders and team to execute and deliver prototype
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Worked in a team of 4 and collaborated closely with stakeholders, working in tandem for product launch
Owned the interaction design layer due to my motion design background and designed micro-interactions
Conducted UX research that helped improve and refine the onboarding flow
Problem
Problem
02 / Establishing the problem
The client came to us and established the following problems that the current product is facing:
The client came to us and established the following problems that the current product is facing:
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
No onboarding flow on the webapp
No motivation to sign up for an account
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
Users can only read and then save articles that they like
UI of interface needs a refresher and the team has to set design system guidelines
Our clients have been going down to the suppliers' place of operation to guide them in real life
This will pose a strain on manpower especially when the customer base is expanding
Low engagement on website
Transitioning from a no-code app to a fully coded one
No onboarding flow on the webapp
No-code beta app is slow and oftentimes unresponsive, causes frustration for the users
UI of interface needs a refresher and the team has to set design system guidelines
Transitioning from a no-code app to a fully coded one
“How might we enhance the user experience and boost engagement of Have Halal Will Travel website so that muslims will use it as a go-to resource for all their travelling needs?”
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
How might we improve ZOLO's onboarding so it diminishes customer-support dependence and boosts satisfaction and app adoption?
Research Deepdive
View Solutions
Goal
Goal
To increase retention time and lower bounce rates from 80% to 70%
To develop a user-centric onboarding process that instills confidence and provides control at users' fingertips
To increase engagement on website and allow users to interact with the community
To allow users to self-serve on the webapp instead of resorting to calling customer support as the first option
To improve overall user experience by aligning information architecture with user behaviours in asking, searching, and browsing
To boost supplier productivity by optimising the user experience of the webapp
Our Research Process
Our Iterative Research Process
Three rounds, each one de-risking further. Round 1 tested just the "Convert to Order" step, validating the need to show users what's happening behind the scenes, and surfaced the value of instructional videos for key processes. Round 2 tested the full flow end to end, but still required fine-tuning, such as giving users more control over the flow. Round 3 gave us the System Usability Score, which helped us gauge how effective the flow felt to users.
Understanding the current user flow
Based on insights from supplier user interviews, we focused on creating the webapp's onboarding flow to align with user priorities and existing practices. By understanding their current workflows, we can demonstrate to prospective customers how ZOLO's AI capabilities improve workflow efficiency, reduce human errors, and free up manpower.
Analytics Review
On-site Prototype Testing
Analysed Google Analytics and Hotjar recordings to identify behavioural patterns, findability issues, ad placement friction, and scrolling fatigue across key pages.
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
User Interview
Spoke with 3 Muslim travellers to understand their travel needs, pain points, and frustrations, observed their site usage, and asked for suggestions on integrating a community aspect.
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them.
Affinity Mapping
Usability Testing
On-site Prototype Testing
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
We conducted prototype testing alongside the user interviews, surfacing valuable insights that guided the iteration of the onboarding flow
Usability Testing
We conducted unmoderated testing through Maze, which gave us crucial insights and a System Usability Score to gauge how effective our onboarding flow was
Feel free to see our protoype in action here!
View HHWT Prototype
03 / Solutions in detail
Our Design Solutions
Our Design Solutions
03 — 01
01
Destination Page
Destination Page
Expanding to 3 destination pages to improve categorisation and hierarchy
Onboarding Chatbot
Expanding to 3 destination pages to improve categorisation and hierarchy
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
Main destination page : users will be led here when they click on ‘Destinations’ in the navbar
Country specific destination page (i.e Japan)
City specific destination page (i.e Tokyo)
Main destination page : users will be led here when they click on ‘Destinations’ in the navbar
Country specific destination page (i.e Japan)
City specific destination page (i.e Tokyo)
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
Our research shows users struggle with the old destination page; they prefer to start with a country-first approach and then narrowing down to specific cities.
03 — 02
02
Homepage
Homepage
Homepage
Leading users to more content by allowing them to search
Leading users to more content by allowing them to search
Leading users to more content by allowing them to search
To enhance accessibility, the search bar is now prominently centered on the page, instead of being in the left-hand corner.
Centralised Search Bar
These prompts are designed to guide users who visit the homepage with the intention of exploring further, directing them to different parts of the site.
Actionable Prompts
Centralised Search Bar
To enhance accessibility, the search bar is now prominently centered on the page, instead of being in the left-hand corner.
Actionable Prompts
These prompts are designed to guide users who visit the homepage with the intention of exploring further, directing them to different parts of the site.
03 — 03
03
Destination Page
Destination Page
Increase findability of content for users who browse
Increase findability of content for users who browse
City Specific Destination Page > Article Categorisation
Following HHWT's travel taxonomy of Eat, See & Do, and Stay, we've organised articles to help users easily find inspiration to include in their itineraries.
Country Specific Destination Page > Itinerary
Placing the itinerary on the country destination page ensures a more central and contextually relevant experience, improving user engagement and easier reference.
05
Article Content Page
Improve content browsing experience
Summary Feature
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Setting Ad Constraints
Our research showed sporadic ads disrupt user experience; we chose banner ads as it offer a less intrusive and space-efficient revenue solution
03 — 04
04
Article Content Page
Article Content Page
Allowing users to ask all their questions natively
Allowing users to ask all their questions natively
Previously HHWT struggle with updated information and users have no means to ask / clarify on site. We introduced a community forum to let users update information or seek community opinions, therefore enhancing engagement and interaction.
Previously HHWT struggle with updated information and users have no means to ask / clarify on site.
We introduced a community forum to let users update information or seek community opinions, therefore enhancing engagement and interaction.
04
06
Career Page
Homepage
Aligning with Natural User Behaviour
Personalising The Experience
Personalising the experience
Dynamic Content
Dynamic sections like "Latest Stories" and "Trending Destinations" will refresh with trending content, enhancing engagement and boosting user retention.
Personalisation of content
To boost signups, the homepage is customised: new visitors see general content, while logged-in users receive personalised recommendations based on their engagement, enhancing their experience.
"Join our Academic Network"
Dynamic Content
For exploratory candidates, we introduced the feature with a Qualtrics form, allowing them to express interest and submit their details without the pressure of immediate application.
Dynamic sections like "Latest Stories" and "Trending Destinations" will refresh with trending content, enhancing engagement and boosting user retention.
Enhanced Filtering Options
Personalisation of content
Including specific filters for transitional educator roles—enable faster, more precise job discovery.
To boost signups, the homepage is customised: new visitors see general content, while logged-in users receive personalised recommendations based on their engagement, enhancing their experience.
03 — 05
05
Article Content Page
Article Content Page
Improve content browsing experience
Improve content browsing experience
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Summary Feature
The summary feature addresses scrolling fatigue and provides rapid information access, making HHWT an on-the-go resource beyond trip planning.
Setting Ad Constraints
Our research showed sporadic ads disrupt user experience; we chose banner ads as it offer a less intrusive and space-efficient revenue solution
Proposed Future steps for HHWT
04 / Next Steps
01 / UGC
Users sharing their vlogs, tiktoks
Users sharing their itineraries
Destination guides write articles or reviews about new halal openings
02 / Geolocation
Consider geolocalized personalisation
Use geolocation to recommend things around the area. i.e. halal food near the airport.
03 / Community — 'Ask a Guide'
Give users motivation to signup for an account to interact with community
Reach out to muslims who stay abroad to be guides and answer user queries.
Retrospective
Reflections
Project Takeaways
Project Takeaways
Embracing Agile to Manage Time and Quality
Time Constraints
The team spent about 1.5 weeks designing and delivering a high-quality prototype. Adopting a more agile methodology could have helped allocate time more effectively, preventing burnout and ensuring we didn't overextend ourselves.
Due to the constraints of a one-month timeline, we are significantly limited in our ability to gather comprehensive user insights on the proposed design. This limitation affects our capacity to thoroughly analyse user feedback and make informed improvements to enhance the design effectively.
Integration Complexity
The team was asked about how ZOLO could be integrated but we can’t provide comprehensive responses to those questions. This is due to our limited knowledge of backend development and existing complex ERP systems. These challenges often involve significant costs and technical limitations.
Navigating Constraints in User Research
User Expectation
Although 200 users were willing to participate in interviews, only 19 were selected by the client, with just 3 responding. A larger pool would have deepened user understanding. Time constraints prevented user testing to validate assumptions and prototype effectiveness in enhancing user experience, leaving recommendations based solely on insights, not user feedback.
User expectations may differ from ZOLO's current functions. Clarity about ZOLO's future plans can enhance user understanding of its potential and better manage their expectation
Personal Takeaways
Personal Takeaways
Delegate and Communicate More
Better Time Management
Initially, team communication was poor, leading me to take on too much until I realised the need for explicit delegation.
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Clarifying Early to Avoid Delays
Adopt an Agile Way of Working
Better Time Management
We had to pivot significantly due to broad scope and overwhelming focus areas, causing delays. In hindsight, earlier check-ins with stakeholders could have ensured ample project time.
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
I experienced burnout during this project, as I was still wrapping up the previous one when I had to immediately start this new project. Balancing my (new) day job and working on the project at night, often until late, added to the challenge. In hindsight, I should have planned better and communicated more effectively with my team to manage the workload more efficiently.
Adopt an Agile Way of Working
I spent considerable time developing interactions for this one-off project. Whilst this is a one-off project, I need to adopt an agile way of working to quickly create micro-animations for MVP or prototype testing.
Ideation
Affinity Mapping
Grouped insights from both data and interviews into themes, including destination-first thinking, lack of clear next actions, and demand for community-driven recommendations.
01 — Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 — Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the page
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Prioritisation Matrix
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact.
This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
Key Learnings From Research
Analytics Review
Analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behaviour challenges.
These insights guide us on revamping the website's information architecture (IA).
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
01 — Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
02 — Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
03 — Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
User Interview
We conducted 3 user interviews to gain a better understanding of the travel needs of muslims, their pain point and frustrations.
Additionally, we observed their site usage, collected their suggestions for improving the overall user experience, and sought their opinions on integrating a community aspect.
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
We conducted 4 supplier interviews to better understand their pain points and workflow, and to determine how ZOLO could address them
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
02 —
Reducing Manual Workload
Users aim to reduce manual data entry and human errors that they often come across in their current flow.
03 —
Integration Eases Workflows:
Users are looking for seamless integration between ZOLO and their ERP systems. They believe that such integration would significantly improve their workflow and enhance overall efficiency.
Main Takeaways From Research
Navigation & findability issues on key pages
Users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem
They turn to external Google searches, since information isn't updated or extensive enough, with no way to ask or clarify on-site.
Users want to be led to information faster
Especially on article content pages, without having to experience scrolling fatigue.
Key learnings from research
06 / Research insights
Key insights from data
Through analysis of Google Analytics and Hotjar recordings, we've identified the following key insights of user behavior challenges. These insights will serve as valuable guidance as we work on revamping the website's information architecture (IA).
01 / Findability issues
Users exhibited uncertainty about how to navigate the destination and itinerary page : often can't find what they need in either page
02 / Ad placements
Ad placements are too sporadic and interfere with user experience. Most users drop off after the 2nd pop-up ad interaction
03 / Scrolling Fatigue
Users read the entire article and scroll back up to find listings they're interested in, which proved to be tedious
Key insights from user interviews
We conducted 3 user interviews to gain a better understanding of the travel needs of muslims, their pain point and frustrations. Additionally, we observed their site usage, collected their suggestions for improving the overall user experience, and sought their opinions on integrating a community aspect.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
01 —
Streamlined User Experience
Interviewees desire a more streamlined, user-friendly experience that allows quick and efficient access to various parts of the web app.
Main takeaways from research
Navigation challanges and findability issues on key pages - users bounce off from the site out of frustration and HHWT struggle with retention
Users leaving the HHWT ecosystem to do external google search - information not updated and not extensive enough, no means to ask / clarify on site.
Users want to be led to information faster especially on an article content page, without having to experience scrolling fatigue
Design Prioritsation
07 / Idea Development
Synthesising all our data
The affinity map helped us recognize consistent patterns across all data sources and provided valuable guidance for shaping our recommendations. We identified patterns in current user behavior, type of travel, most importantly we identified current pain points and opportunities for us to take
Key Insights from Affinity Map
01 / Destination
Users will generally think about the country first before narrowing down to the cities i.e. Japan first and then Tokyo
02 / Lack of Action
Resources are overwhelming, users don’t know what they’re supposed to do on the pages
03 / User Engagement
Recommendations from muslims based in different countries and interaction with the community
04 / Summary Button
Summary button suggestions were brought up as it will direct users faster without having to scroll so much
Categorising our features and recommendations
We grouped our affinity map insights into three categories: IA improvements, design features, and content rules, placing them on a prioritisation matrix based on feasibility and impact. This helps us to pinpoint key areas of focus. We also documented future suggestions that emerged but couldn't be incorporated due to project time constraints.
TL;DR
08 / Research Process
We conducted data analysis, competitive analysis, user testing, and evaluated usability heuristics and information architecture to better understand our users and website.
These insights guided the redesign of key pages like the homepage, destination page, and content article page.
For more details on the case study, please reach out to me here.