SHRISTI SUMAN

WORK

ABOUT

RESUME

SHRISTI SUMAN

WORK

ABOUT

RESUME

SHRISTI SUMAN

Simplifying SOTI Snap’s theming: creating a seamless customisation experience

B2B

B2B

B2B

Web application

Web application

Web application

SaaS

SaaS

SaaS

Read time: 8 mins

Role

I took lead in designing while thinking about how users would interact with it and creating prototypes to test ideas.

Team

1 product designer
1 product manager
5 software engineers

Timeline

1 month

Background

SOTI is growing day to day. It has

17,000

customers worldwide

17,000

customers worldwide

20+ million

devices

20+ million

devices

6

in house products

6

in house products

One of its flagship products, SOTI Snap, which is a drag and drop tool, it help companies to rapidly build mobile apps without coding . By data-capturing capabilities of mobile devices (e.g., camera, barcode scanning, video recording), It helps businesses replace paper-based processes, turn into digital data collection, and streamline approval workflows. This enables companies to save money and get the most out of their mobile device investments.

Despite being a robust product, there is always room for improvement to enhance the user experience.

One of its flagship products, SOTI Snap, which is a drag and drop tool, it help companies to rapidly build mobile apps without coding . By data-capturing capabilities of mobile devices (e.g., camera, barcode scanning, video recording), It helps businesses replace paper-based processes, turn into digital data collection, and streamline approval workflows. This enables companies to save money and get the most out of their mobile device investments.

Despite being a robust product, there is always room for improvement to enhance the user experience.

Let’s read this narrative

About

Mr. Paul, a logistics manager at Velocity Warehouses, uses SOTI Snap to build inventory tracking apps. While trying to match his company's branding, he encounters limitations.

Mr. Paul, a logistics manager at Velocity Warehouses, uses SOTI Snap to build inventory tracking apps. While trying to match his company's branding, he encounters limitations.

Limitations

The app only allows basic color changes per page, lacking options for global theme updates, custom icons, fonts, or brand patterns. This results in inconsistent branding.

The app only allows basic color changes per page, lacking options for global theme updates, custom icons, fonts, or brand patterns. This results in inconsistent branding.

Problem

As a non-technical user, Paul struggles with complex settings and feels frustrated and disappointed with the unprofessional appearance.

As a non-technical user, Paul struggles with complex settings and feels frustrated and disappointed with the unprofessional appearance.

After discovering an alternative tool with better branding features he started creating company apps on it to improve staff engagement and company image.

After discovering an alternative tool with better branding features he started creating company apps on it to improve staff engagement and company image.

In our one-on-one conversations with customers like

In our one-on-one conversations with customers like

In our one-on-one conversations with customers like

McDonald's,

McDonald's,

T&M Bowser Solutions,

T&M Bowser Solutions,

Essmann's Backstube,

Askari,

Askari,

Essmann's Backstube,

Essmann's Backstube,

and many others, we learned they share these same sentiments.
They feel disappointed that the app doesn't reflect the professional image they want to showcase.

and many others, we learned they share these same sentiments.
They feel disappointed that the app doesn't reflect the professional image they want to showcase.

Framing problem

Our large enterprise customers prefer third-party apps over SOTI Snap.

Our large enterprise customers prefer third-party apps over SOTI Snap.

Our large enterprise customers prefer third-party apps over SOTI Snap.

WHY?

The core problem is in SOTI Snap's global theming capabilities, which are causing user frustration and dissatisfaction. Let's examine those key issues:

The core problem is in SOTI Snap's global theming capabilities, which are causing user frustration and dissatisfaction. Let's examine those key issues:

Limited product capabilities

  • Users have to manually change components colours on each and every screen.

  • The old settings were optimised to build low key apps with one screen.

  • The system doesn’t enable users to get started quickly

  • Users have to manually change components colours on each and every screen.

  • The old settings were optimised to build low key apps with one screen.

  • The system doesn’t enable users to get started quickly

Mental modal mismatch

Non-tech-savvy users expect a simple interface that allows them to easily customise the appearance of their app. However, the current system's limited and rigid functionality creates confusion.

Fragmented user journey

Users are forced to seek external solutions with SOTI MobiControl to complete their entire lifecycle; from deployment to retirement. This negatively impacts and reduces the effectiveness of SOTI as a one-stop solution.

Users are forced to seek external solutions with SOTI MobiControl to complete their entire lifecycle; from deployment to retirement. This negatively impacts and reduces the effectiveness of SOTI as a one-stop solution.

Identifying the opportunity

The current theming in SOTI Snap presented us with the unique opportunity. While other tools offer advanced customisation, they’re too complex for form-based apps. This is a great opportunity to create new theme experiences which is familiar and easy to use for our end user.

The current theming in SOTI Snap presented us with the unique opportunity. While other tools offer advanced customisation, they’re too complex for form-based apps. This is a great opportunity to create new theme experiences which is familiar and easy to use for our end user.

Our goal

''Let's create a simple, flexible, and intuitive theming experience that empowers non-technical users to build their apps.''

''Let's create a simple, flexible, and intuitive theming experience that empowers non-technical users to build their apps.''

How to reach our goal?

  • Make improvements step by step, listening to user feedback along the way.

  • Add a real-time preview and a library of ready-to-use templates to help users get started quickly.

  • Make sure any theming changes instantly update across the app, keeping everything consistent and hassle-free.

  • Make improvements step by step, listening to user feedback along the way.

  • Add a real-time preview and a library of ready-to-use templates to help users get started quickly.

  • Make sure any theming changes instantly update across the app, keeping everything consistent and hassle-free.

How to measure feature success?

  • Keep an eye on how often users are using the new theming features to make sure they’re finding value in them.

  • Gather feedback through user insights to understand how happy users are with the new theming experience.

  • Track whether users are moving away from third-party tools, showing that the built-in theming meets their needs.

  • Keep an eye on how often users are using the new theming features to make sure they’re finding value in them.

  • Gather feedback through user insights to understand how happy users are with the new theming experience.

  • Track whether users are moving away from third-party tools, showing that the built-in theming meets their needs.

Planning the approach

a. Define the anatomy

I started laying the foundation for the Setup popup (App settings). Aim is to give user what they need. First of all I started to gather answers for understanding theming process.

I started laying the foundation for the Setup popup (App settings). Aim is to give user what they need. First of all I started to gather answers for understanding theming process.

What is theming process? It is customizing the visual appearance of an app to align with a brand's identity. This includes modifying elements such as colors, fonts, spacing, and components to create a consistent and professional look that enhances user experience.

What is theming process? It is customizing the visual appearance of an app to align with a brand's identity. This includes modifying elements such as colors, fonts, spacing, and components to create a consistent and professional look that enhances user experience.

Who will use this feature? Non-technical users- Such as business administrators, marketing teams, and operations managers who need to create branded apps without technical expertise. IT teams (May use)- Ensure compliance with brand guidelines and consistency across company-wide applications.

Who will use this feature? Non-technical users- Such as business administrators, marketing teams, and operations managers who need to create branded apps without technical expertise. IT teams (May use)- Ensure compliance with brand guidelines and consistency across company-wide applications.

When will they use this feature? Initial app setup: When creating an app for the first time, to establish a brand-compliant look. Brand refreshes: When updating the app’s appearance to match new branding guidelines. Seasonal campaigns: When temporary updates are needed for specific events or promotions.

When will they use this feature? Initial app setup: When creating an app for the first time, to establish a brand-compliant look. Brand refreshes: When updating the app’s appearance to match new branding guidelines. Seasonal campaigns: When temporary updates are needed for specific events or promotions.

Which apps use this specific feature? Customer-facing apps: Such as ordering apps, loyalty program apps, and event registration apps. Internal business apps: Such as employee portals, inventory management apps, and HR-related applications. Operational apps: Such as inspection checklists, compliance forms, and service request apps.

Which apps use this specific feature? Customer-facing apps: Such as ordering apps, loyalty program apps, and event registration apps. Internal business apps: Such as employee portals, inventory management apps, and HR-related applications. Operational apps: Such as inspection checklists, compliance forms, and service request apps.

Now the next step was to arrange these inputs into a layout which is easy to navigate and interact with. We took help form other booming platforms for app building to gather baselines. The goal was to keep it similar enough but also do some things better than what was seen on other platforms.

Now the next step was to arrange these inputs into a layout which is easy to navigate and interact with. We took help form other booming platforms for app building to gather baselines. The goal was to keep it similar enough but also do some things better than what was seen on other platforms.

b. Competitive benchmarking

It was important to audit existing UX patterns within the product and other app builder to build our experience. This would allow reducing any learning curve from a redesign. I try to analyse various products for different areas of flow

It was important to audit existing UX patterns within the product and other app builder to build our experience. This would allow reducing any learning curve from a redesign. I try to analyse various products for different areas of flow

Templates preview from FigJam:

Firstly I started taking reference from FigJam for template type selection and its preview, and for popup design & dimension I try to use what we have present in the product, this will help induce the user behaviour observed across other apps by leveraging familiarity and easing the resistance to entry further.

Firstly I started taking reference from FigJam for template type selection and its preview, and for popup design & dimension I try to use what we have present in the product, this will help induce the user behaviour observed across other apps by leveraging familiarity and easing the resistance to entry further.

Full screen view from Mobbin:

In app builder while adding pages user can see variety of pre designed pages which they can directly import for their app and customise them. For this visual I have taken reference from Mobbin.

In app builder while adding pages user can see variety of pre designed pages which they can directly import for their app and customise them. For this visual I have taken reference from Mobbin.

Theme builder from Flutterflow:

For colors, Typography and other styling I refered it from Flutterflow.

For colors, Typography and other styling I refered it from Flutterflow.

c. UX baseline establish

Initial wireframe where I decided to keep setting theme into steppers. Step 1 is general settings, Step 2 is for selecting template, then, Template screen preview with breadcrumb.

Initial wireframe where I decided to keep setting theme into steppers. Step 1 is general settings, Step 2 is for selecting template, then, Template screen preview with breadcrumb.

Refining the Vision

After some auditing and analysis, I concluded that the new app overlay can be broadly divided into two steps, based on progressive disclosure. This will help prevent overwhelming users and have granular control.

After some auditing and analysis, I concluded that the new app overlay can be broadly divided into two steps, based on progressive disclosure. This will help prevent overwhelming users and have granular control.

Step 1 (Basic details)

This step cover information like App name, its logo and description.

Step 2 (Choose a theme)

Initially, we planned to combine template and theme selection into a single step. In this flow, the user first selects a theme from the left panel and then chooses the corresponding template.

Template preview

A template preview where users can browse all mobile screens within a template and select the ones they want to include in their design.

Step 3 (Canvas)

After setting basic details and selecting a template and screens, users will land on the App Builder, where they can further customize their UI. A new Theme tab has been added to the left navigation bar for global settings. The right property panel now updates dynamically based on the new theme settings.

Choose a color

For example, when users want to change a color, they can select it from the property panel or adjust it in the global theme settings. There will be a clear distinction between theme colors and custom colors they add.

Add typography style

Same for typography setting there will be proper bifurcation between custom style and theme style.

Choose an icon

Users can choose from a set of default icons to maintain a consistent UI. If they have their own icon collection, they can upload it under Custom Icons in the Global Settings page.

Typography

The first tab is Typography, where users can manage font settings for responsive design. By default, a pre-set typography style is provided, including font family, size, spacing, weight, an italic switch, and an underline switch. Users have the flexibility to customize these settings and can reset them to default.

Colours

The second tab, Colors, allows users to manage color settings for both light and dark modes. A live screen preview helps them see how colors fit their theme in real time. Users can add new colors to customize their theme further and edit existing color codes.

Icons

In this Icons tab, users can customize the appearance of their icons. They can easily select a primary color to match their branding and upload custom SVG files to personalize icons further.

Spacing

In this Spacing tab, users can adjust the spacing between elements to fine-tune their layout. They can set different spacing values for margins and paddings and choose their preferred unit of measurement (e.g., px, em, rem).

After further discussion with the Product Manager, we’ve decided to prioritize typography, colors, icons, and spacing for the current phase. Features like elevation, transition, and corner radius will be introduced in future updates. This phased approach ensures we can deliver a user-friendly and customizable theming experience while continuing to improve over time.

After further discussion with the Product Manager, we’ve decided to prioritize typography, colors, icons, and spacing for the current phase. Features like elevation, transition, and corner radius will be introduced in future updates. This phased approach ensures we can deliver a user-friendly and customizable theming experience while continuing to improve over time.

Design Feedback

The next thing was to take feedback from stakeholders.

The next thing was to take feedback from stakeholders.

Users can struggle to clearly preview and distinguish light and dark mode colors when setting up Templates and Themes for new apps. Without a reliable baseline, customization feels overwhelming and error-prone from the start.

Users can struggle to clearly preview and distinguish light and dark mode colors when setting up Templates and Themes for new apps. Without a reliable baseline, customization feels overwhelming and error-prone from the start.

Users can struggle to clearly preview and distinguish light and dark mode colors when setting up Templates and Themes for new apps. Without a reliable baseline, customization feels overwhelming and error-prone from the start.

Users can face a cluttered onboarding flow when selecting pages for their project, as the select screen competes with other setup steps. This disrupts the process and makes it harder to build projects efficiently.

Users can face a cluttered onboarding flow when selecting pages for their project, as the select screen competes with other setup steps. This disrupts the process and makes it harder to build projects efficiently.

Users can face a cluttered onboarding flow when selecting pages for their project, as the select screen competes with other setup steps. This disrupts the process and makes it harder to build projects efficiently.

The Responsive Switch in global typography settings triggers a disruptive tab switcher when enabled, causing UI breakage and layout shifts. This can frustrates users during responsive design adjustments.

The Responsive Switch in global typography settings triggers a disruptive tab switcher when enabled, causing UI breakage and layout shifts. This can frustrates users during responsive design adjustments.

The Responsive Switch in global typography settings triggers a disruptive tab switcher when enabled, causing UI breakage and layout shifts. This can frustrates users during responsive design adjustments.

Global color settings suffer from oversized color cards that consume excessive space and limit visibility of multiple colors at once.

Global color settings suffer from oversized color cards that consume excessive space and limit visibility of multiple colors at once.

Global color settings suffer from oversized color cards that consume excessive space and limit visibility of multiple colors at once.

Users struggle with disorganized custom and default typography/color settings that overwhelm the interface with expanded options. This leads to cluttered views, poor scannability, and navigation friction when managing multiple settings at once.

Users struggle with disorganized custom and default typography/color settings that overwhelm the interface with expanded options. This leads to cluttered views, poor scannability, and navigation friction when managing multiple settings at once.

Users struggle with disorganized custom and default typography/color settings that overwhelm the interface with expanded options. This leads to cluttered views, poor scannability, and navigation friction when managing multiple settings at once.

Back to artboard

Based on the feedback, it was time to go back to the art board and iterate some more explorations of the concept.

While finalising this feature, our new design system ELEVATE became available, so the final draft incorporated a full redesign aligned with the updated theme.​
This ensured consistency across the product while leveraging the system's reusable components and guidelines. The change streamlined implementation and elevated the overall visual coherence.

Based on the feedback, it was time to go back to the art board and iterate some more explorations of the concept.

While finalising this feature, our new design system ELEVATE became available, so the final draft incorporated a full redesign aligned with the updated theme.​
This ensured consistency across the product while leveraging the system's reusable components and guidelines. The change streamlined implementation and elevated the overall visual coherence.

Choose a template

Choose a template

Choose a theme

Choose a theme

Select page (Screen)

Select page (Screen)

Typography (Global settings)

Typography (Global settings)

Colors (Global settings)

Colors (Global settings)

Prototype

Click on "expand" icon to see full view prototype.

Expected impact

Although no metrics are available yet, the redesigned theming functionality is expected to increase user adoption and improve satisfaction.

Although no metrics are available yet, the redesigned theming functionality is expected to increase user adoption and improve satisfaction.

By making customisation more intuitive, users will likely engage more with the feature, leading to a smoother and more cohesive experience.

By making customisation more intuitive, users will likely engage more with the feature, leading to a smoother and more cohesive experience.

This redesign lays the groundwork for further improvements, helping SOTI Snap better align with user needs and expectations.

This redesign lays the groundwork for further improvements, helping SOTI Snap better align with user needs and expectations.

Next Steps to be taken…

  • With the project still in development, the next step will be testing the feature with real users and gathering feedback.

  • This iterative process will ensure the final product is user-centred and continuously evolves to meet user needs.

  • Looking ahead, I am excited to continue refining this feature and integrate more advanced customisation options. My goal is for this feature to become a core part of the SOTI Snap platform, empowering users to build personalised apps effortlessly.

  • With the project still in development, the next step will be testing the feature with real users and gathering feedback.

  • This iterative process will ensure the final product is user-centred and continuously evolves to meet user needs.

  • Looking ahead, I am excited to continue refining this feature and integrate more advanced customisation options. My goal is for this feature to become a core part of the SOTI Snap platform, empowering users to build personalised apps effortlessly.

Final takeaways

This project was a great opportunity for me to dive deeper into user-centric design, focusing on solving real problems for users while keeping business objectives in mind. It sharpened my ability to balance simplicity with flexibility, ensuring that complex features remain accessible to users without sacrificing functionality.

The feedback I’ve received during the design process has also helped me refine my skills in understanding user needs and translating those insights into actionable design solutions.

This project was a great opportunity for me to dive deeper into user-centric design, focusing on solving real problems for users while keeping business objectives in mind. It sharpened my ability to balance simplicity with flexibility, ensuring that complex features remain accessible to users without sacrificing functionality.

The feedback I’ve received during the design process has also helped me refine my skills in understanding user needs and translating those insights into actionable design solutions.

NEXT PROJECT

LET'S TALK

LET'S TALK

LET'S TALK

WORKS

WORKS

ABOUT ME

ABOUT ME

RESUME

RESUME

Updated on

November 2025

Made in

India

Copyright

©2025 shristi_suman

Location

Gurgaon,haryana