Sapaad UX Case Study

Context

Overview

Sapaad is a Singapore based leading provider of Cloud-based Restaurant Point of Sale (POS) and Delivery Management Systems, empowering restaurants to streamline their operations and enhance customer experiences.

Sapaad approached us with a critical need to revamp their website’s user experience (UX), particularly focusing on the landing page and inner pages. The goal was to create an intuitive, visually appealing, and conversion-oriented platform that effectively communicates Sapaad’s value proposition to its target audience.

Visit site

My Role

  • UX Research
  • Wireframing
  • Visual Design

Platform

  • Web App

Year

  • 2021

Challenges

  • Complex Navigation Structure – The existing website had a convoluted navigation system, making it difficult for users to find relevant information efficiently.
  • Lack of Visual Hierarchy – Important features and benefits were not adequately highlighted, leading to a lack of engagement and conversion.
  • Mobile Responsiveness – With an increasing number of users accessing the website via mobile devices, ensuring seamless responsiveness was crucial.

Solutions

  • Comprehensive UX Audit – We conducted a thorough analysis of the existing website to identify pain points and areas for improvement.
  • User-Centric Design – Leveraging user personas and journey mapping, we restructured the navigation to align with user expectations and streamline the browsing experience.
  • Visual Overhaul – Implementing modern design principles, we introduced a clean and visually appealing layout with clear calls-to-action (CTAs) to guide users through the conversion funnel.
  • Mobile-First Strategy – Prioritizing mobile responsiveness, we ensured that the website delivers a seamless experience across all devices, enhancing accessibility and engagement.
1. Visually Stunning Landing Page

The redesigned landing page for Sapaad serves as a captivating entry point for potential customers, effectively conveying the platform’s value proposition and driving meaningful interactions. By focusing on both aesthetics and functionality, we’ve empowered Sapaad to achieve unparalleled success in its digital marketing efforts.

Lower bounce rate demonstrated enhanced interest and relevance of the landing page content.
Optimized CTAs and landing page layout contributed to higher conversion efficiency.
2. Driving Lead Generation

Emerged as a cornerstone of Sapaad’s lead generation strategy, empowering the brand to forge meaningful connections with potential clients and drive business growth. Through compelling testimonials and a testament to our credibility, we reaffirm our commitment to delivering unparalleled value and driving success for restaurant owners worldwide.

Streamlined form submission process and compelling call-to-action encouraged visitors to take action and express interest in Sapaad’s solutions.

Decrease in user abandonment rates during the request a demo process.
Generated a significant influx of leads, exceeding initial projections
3. Navigating with Ease

In response to the growing demand for enhanced usability and navigation on long-scrolling pages, we introduced the Table of Contents feature to empower users to effortlessly explore content and find relevant information. By providing a clear roadmap of the page’s sections, we aimed to improve user experience and engagement.

Reduction in bounce rate, indicating improved accessibility and relevance of content.
Enhanced navigational capabilities encouraged users to explore deeper into the page, leading to higher retention and satisfaction rates.

The Process

1. Competitor Analytics

2. Wireframe

3. Visual Design

1. Competitor Analytics

Before embarking on the UX design journey for Sapaad, we conducted comprehensive research, leveraging competitor analytics to gain valuable insights and inform our design decisions. By analyzing the strengths and weaknesses of competitors’ digital experiences, we identified opportunities for differentiation and innovation, ultimately laying the foundation for a user-centric design approach.

Competitor analytics played a pivotal role in shaping the UX research phase of Sapaad’s digital transformation journey, providing valuable insights and guiding our design strategy. By learning from the successes and shortcomings of competitors, we set the stage for a truly differentiated and customer-centric digital experience, poised for long-term success in the competitive restaurant management landscape.

Hikeup
Hikeup stands out as a major competitor, captivating visitors with its captivating hero image, intricate feature illustrations, and an overall minimalist aesthetic.

Lightspeed POS for Restaurants
Lightspeed’s approach to showcasing main features sets a high standard. Emulating their style could provide a polished presentation of key functionalities.

Chatfood
Chatfood impresses with a visually striking hero image, crisp design, and delightful illustrations complementing each feature. The layout’s simplicity and the appealing 3-step process contribute to its allure.

Helcim
Helcim’s hero image stands out as particularly intriguing. Considering its impact, incorporating a similar approach alongside the proposed design could provide an enticing option for our platform.

2. Wireframe

Wireframes serve as the blueprint of digital experiences, providing a structural framework that outlines the layout, functionality, and flow of a website or application. In this phase of the design process, we focus on distilling complex concepts into simplified visual representations, ensuring alignment with user needs and business objectives. By prioritizing functionality over aesthetics, wireframes allow us to iterate quickly, gather feedback, and refine our design approach before moving into the visual design phase.

Outcome & Impact:
By visualizing key interactions and user pathways early on, we mitigate the risk of costly design revisions later in the development cycle. Additionally, wireframes enable us to conduct usability testing, identify potential pain points, and iterate on solutions, ultimately leading to a more user-friendly and intuitive final product. Through this iterative approach, we ensure that the end result not only meets but exceeds user expectations, driving satisfaction and engagement.

Brief & Requirements:

It’s important to have a picture in the center (not illustration) with a happy restaurant owner who is using our Software and we need to mention his name and his restaurant name in a bubble + we need to show at least six icons with names as the same six ones mentioned in. The client really like the slack way of showing avatar (not organized and not in the same size).
The client like to have one color for all logos. But it’s free to decide the direction of using each restaurant logo color.
Prefer to use illustrations for each product.
This example explains exactly what the client want (title, description, ticks with a click). The nice thing is the bold text used in those sentences.
For the picture, the client would appreciate using a picture for a POS or an illustration like the one in the example.
The client need a simple design for this which keep the focus on the question and the answers. Keep in mind that in some questions we might need to have 6 options as an answer.
Needs to show customers reviews that been taken from 3rd party reviewing systems.
If possible to show one big video and maybe beside it another 3 small thumbnails for other videos. But this is not necessary.
Simple 3 articles to show here.
The client want to mention the 14 days trial and to have two buttons.
Focus only on restaurants, dine in, and cafe.
Maybe having a quick fact with a very nice design would be a good way to gain more excitement.
The example looks nice. But, the client welcome for any suggestions.
Just have a think of 3 steps for each section (new restaurant owner & multi store owner).
Good to have a different CTA button than the one mentioned above.
Showing features is of the most important parts but the client not sure what would be the best way. They like the hike picture in the example and like the right unorganized boxes. it’s important to have “View all link”.
The client don’t like the design shown in the example. They expect a better and nicer ideas for this section.
It’s good to have some good statistics.
Let’s have 5 FAQs in this section.
Footer is important. So, please give it a good attention.

Landingpage Responsive Wireframe to Low Fidelity Design:

3. Visual Design

In the visual design stage, we transform wireframes and conceptual ideas into polished, visually stunning interfaces that resonate with users. This phase is where creativity takes center stage as we apply color theory, typography, imagery, and visual hierarchy to bring the design to life. Every element is meticulously crafted to evoke the desired emotional response and align with the brand identity. Through a combination of creativity and strategic thinking, we ensure that the final design not only meets but exceeds user expectations, leaving a lasting impression and driving engagement. By focusing on aesthetics, usability, and brand consistency, we deliver digital experiences that captivate, inspire, and ultimately, elevate our clients’ brand presence in the digital landscape.

Summary

Through collaborative efforts and a strategic focus on user experience, we successfully transformed Sapaad’s website into a highly engaging and conversion-driven platform. The improved UX not only enhanced user satisfaction but also contributed to Sapaad’s business growth and market positioning.