Redesigning Okkular: Turning a Cluttered AI Tool into a Seamless Workflow

Before

After

Before

After

Live B2B Product

My Role

Solo Product Designer & Front-end Dev

Responsible for Research, UI/UX, Prototyping, and Implementation.

Timeline

3 Weeks (Design to High-Fidelity Hand-off)

Tools

Figma

AI (for critique/analysis)

Angular (for dev)

Team & Context

Startup Environment

Working directly with the CTO and backend team.

I utilized AI as a critique partner to simulate a larger design team.

Meet Arjun. He has 600 products to upload by 5 PM

Arjun's life without Okkular

He decides to test the waters. Arjun searches the app store, finds Okkular, and tries it with just a single image.

Arjun's life without Okkular

But he needs scale, not just speed. Realizing he can't do this 600 times, he discovers the 'Integrations' feature...

Arjun's life without Okkular

But he needs scale, not just speed. Realizing he can't do this 600 times, he discovers the 'Integrations' feature...

Arjun tries Okkular (New Design)

Arjun syncs his whole store in one click. Job done.

But wait... it wasn't always this easy.

The videos above show the New User Experience I built. It’s fast, automated, and seamless.

But that is NOT how it started.

When I joined the team, the app was built around a single idea: generating product tags from images. It was simple and effective. But as the product grew, the design didn't keep up.

The Result? In the Old Version, this same journey was broken and frustrating. Arjun couldn't find the integrations, auditing tags required too many clicks, and he had zero confidence that the system was actually working.

To show you what I mean, let's see what really would have happened to Arjun if he'd used the old app.

The old navigation was a mess. Key features like "Integrations" were split into two different, random places, making the app's core value impossible to find.

The old navigation was a mess. Key features like "Integrations" were split into two different, random places, making the app's core value impossible to find.

The old navigation was a mess. Key features like "Integrations" were split into two different, random places, making the app's core value impossible to find.

The old navigation was a mess. Key features like "Integrations" were split into two different, random places, making the app's core value impossible to find.

Why it's the worst: If Arjun cannot find the "Integrations" page, he never gets his big "Aha!" moment (Scene 10-11). He can't automate his 600 products. He will assume the app is just a single-upload tool (like in Scene 5) and abandon it because it doesn't solve his core problem. This is a total conversion-killer.

A simple, repetitive task like auditing a single tag was buried under multiple clicks, modals, and page loads, creating enormous friction.

A simple, repetitive task like auditing a single tag was buried under multiple clicks, modals, and page loads, creating enormous friction.

A simple, repetitive task like auditing a single tag was buried under multiple clicks, modals, and page loads, creating enormous friction.

A simple, repetitive task like auditing a single tag was buried under multiple clicks, modals, and page loads, creating enormous friction.

This is the exact opposite of the app's "automation" promise. It shows a total disregard for the user's time and makes the app fundamentally unusable for anyone with a real-world (i.e., large) product catalog.

The app frequently failed to communicate its state. Blank pages, missing empty states, and no error messages left users completely in the dark.

The app frequently failed to communicate its state. Blank pages, missing empty states, and no error messages left users completely in the dark.

The app frequently failed to communicate its state. Blank pages, missing empty states, and no error messages left users completely in the dark.

The app frequently failed to communicate its state. Blank pages, missing empty states, and no error messages left users completely in the dark.

This is a total trust-killer. A blank page feels like a critical bug. It makes the app feel unreliable and unprofessional, immediately causing the user to lose confidence and contact support.

This is a total trust-killer. A blank page feels like a critical bug. It makes the app feel unreliable and unprofessional, immediately causing the user to lose confidence and contact support.

This is a total trust-killer. A blank page feels like a critical bug. It makes the app feel unreliable and unprofessional, immediately causing the user to lose confidence and contact support.

This is a total trust-killer. A blank page feels like a critical bug. It makes the app feel unreliable and unprofessional, immediately causing the user to lose confidence and contact support.

The design was completely uneven. Buttons, fonts, and spacing were random, which eroded user trust and made the app feel "stitched together"

The design was completely uneven. Buttons, fonts, and spacing were random, which eroded user trust and made the app feel "stitched together"

The design was completely uneven. Buttons, fonts, and spacing were random, which eroded user trust and made the app feel "stitched together"

The design was completely uneven. Buttons, fonts, and spacing were random, which eroded user trust and made the app feel "stitched together"

Inconsistency erodes user trust and makes the app feel unprofessional. Text overflows are literal bugs that make features unusable and suggest the product is abandoned

Inconsistency erodes user trust and makes the app feel unprofessional. Text overflows are literal bugs that make features unusable and suggest the product is abandoned

Inconsistency erodes user trust and makes the app feel unprofessional. Text overflows are literal bugs that make features unusable and suggest the product is abandoned

Inconsistency erodes user trust and makes the app feel unprofessional. Text overflows are literal bugs that make features unusable and suggest the product is abandoned

The old product view had lots of unnecessary wasted space. This forced users to scroll up and down repeatedly to compare the product image with its tags and description.

The old product view had lots of unnecessary wasted space. This forced users to scroll up and down repeatedly to compare the product image with its tags and description.

The old product view had lots of unnecessary wasted space. This forced users to scroll up and down repeatedly to compare the product image with its tags and description.

The old product view had lots of unnecessary wasted space. This forced users to scroll up and down repeatedly to compare the product image with its tags and description.

This is a core workflow failure. It creates massive cognitive load and makes a simple audit task 10x slower. It punishes users for trying to do their core job and makes the app feel unusable at scale.

I had 3 weeks to turn this around. Here was my plan.

As you saw, the old app was a mess.

My goal was to fix those problems and build the smooth, 10-minute workflow you saw in the first video.

My Strategy, I was the solo product designer (and front-end dev) on this project, and I had about 3 weeks to design everything. I didn't have 6 months to build a perfect system. I had to find the quickest, smartest ways to solve these problems.

But before I could fix anything, I had to understand why it was broken.

I knew I couldn't just rely on live calls. Since Okkular is a B2B tool, our users are busy professionals running retail businesses. Getting them on a call during work hours is difficult. Plus, many users just use the app quietly without complaining, so I risked missing their feedback .

So, I used a few different methods to get the full picture:

Usability Testing

I sat with a few people (internally and externally) and watched them try to do simple tasks. It was clear right away that even basic things were slow and confusing .

Usability Testing

I sat with a few people (internally and externally) and watched them try to do simple tasks. It was clear right away that even basic things were slow and confusing .

1

Usability Testing

I sat with a few people (internally and externally) and watched them try to do simple tasks. It was clear right away that even basic things were slow and confusing .

Usability Testing

I sat with a few people (internally and externally) and watched them try to do simple tasks. It was clear right away that even basic things were slow and confusing .

1

Feedback Forms

For teams I couldn't meet, I sent short, open-ended surveys. This was great for capturing their frustrations in their own words.

Feedback Forms

For teams I couldn't meet, I sent short, open-ended surveys. This was great for capturing their frustrations in their own words.

2

Feedback Forms

For teams I couldn't meet, I sent short, open-ended surveys. This was great for capturing their frustrations in their own words.

Feedback Forms

For teams I couldn't meet, I sent short, open-ended surveys. This was great for capturing their frustrations in their own words.

2

Heuristic Review

I went through the app myself, looking for obvious design flaws : inconsistency, confusing labels buttons or missing feedback, etc.

Heuristic Review

I went through the app myself, looking for obvious design flaws : inconsistency, confusing labels buttons or missing feedback, etc.

3

Heuristic Review

I went through the app myself, looking for obvious design flaws : inconsistency, confusing labels buttons or missing feedback, etc.

Heuristic Review

I went through the app myself, looking for obvious design flaws : inconsistency, confusing labels buttons or missing feedback, etc.

3

Making sense of the data I gathered a lot of raw feedback from these steps. Instead of spending days sorting through it manually, I used AI to help me analyze it. It quickly clustered the feedback into common themes, helping me validate the biggest problems in hours, not days.

From all this work, I created a rough "issue map" that showed all the breakdowns across the app. This map became my guide for every decision that came next.

You can read more about my general approach to Understanding User Problems and User Testing here

I couldn't fix everything at once. I had to prioritize.

The issue map showed me a huge list of problems. I couldn't fix everything at once, so I had to be selective.

To stay focused, I sorted the problems based on three simple things:

Frequency

How often did users complain about this?

1

Severity

How much did it slow down their work?

2

Effort

How hard would it be to fix?

3

This told me exactly what to tackle first: the big problems that blocked the user's flow.

Prioritization Matrix: Sorting user feedback by impact and effort to define a clear roadmap.

I didn’t want to reinvent the wheel. I wanted to learn from the best.

Once I knew what to fix, I needed to figure out how. I didn't want to reinvent the wheel, so I looked at other successful SaaS web applications to see how they handled complex data.

I took screenshots of clean, scalable patterns and organized them in Figma. These real-world examples became my "design toolkit" to help plan my own layouts .

Inspiration Moodboard: Analyzing industry patterns to build a design toolkit for complex data.

The biggest problem I had to fix was the "Where am I?"

The Problem

The app was a maze. Features were hidden in random places because they were added in a rush over the years. For example, "Integrations" was split into two different pages, and tag settings were buried where no one could find them. This was the main reason users kept asking support, "Where can I find this?".

The Solution

I didn't start by designing screens. I started by listing out every single page in the app. Then, I reorganized them based on how a user actually works, not how the code was written.

Information Architecture: Restructuring the app's navigation based on user workflows

The Result

This created a clear, logical structure. Now, critical features like "Integrations" were immediately visible. This one change was the key to unlocking the bulk automation workflow for users like Arjun.

I didn't have 6 months to build a Design System. So I took a smarter route.

After fixing the navigation, I had to tackle the visual mess. The old app looked inconsistent, buttons were different on every page, and text was literally overflowing its boxes. It made the product feel untrustworthy

The Strategy

In a perfect world, I’d build a custom design system. But with only 3 weeks, that wasn’t realistic. I needed a way to fix the inconsistency fast.

The Solution

I took an efficient route and created a "mini-system" by mixing two proven libraries:

Google's Material Design

Our frontend was built in Angular, so aligning with Google's Material Kit was a logical choice. It gave us a solid, ready-made set of components and rules. This choice directly reduced the gap between design and development, as our engineers already knew Material, which meant faster builds .

1

Atlassian's Design System

Material was great for components, but I felt it sometimes lacked a "human touch" for a complex B2B tool. Atlassian's system has really clear, user-friendly rules for typography, spacing, and feedback messages. I borrowed these patterns to solve our "Black Hole" problem and bring more clarity to the app

2

By mixing these two, I built a "sticker sheet" in Figma that brought all our new rules together.

This included our new components (a mix of Material + Atlassian), color tokens, typography scale, and feedback messages .

By mixing these two, I built a "sticker sheet" in Figma that brought all our new rules together.

This included our new components (a mix of Material + Atlassian), color tokens, typography scale, and feedback messages .

By mixing these two, I built a "sticker sheet" in Figma that brought all our new rules together.

This included our new components (a mix of Material + Atlassian), color tokens, typography scale, and feedback messages .

By mixing these two, I built a "sticker sheet" in Figma that brought all our new rules together.

This included our new components (a mix of Material + Atlassian), color tokens, typography scale, and feedback messages .

Sample of Component Sticker Sheet

Brand Color System: To maintain consistent and WCAG-compliant across every screen

Defining standard color variables in Figma to bridge the gap between design and code

Defining standard typography variables in Figma to bridge the gap between design and code

The goal wasn't to force a giant design system on the company. The goal was to stop making random design choices. The result was cleaner screens, a product that finally felt consistent, and a faster handoff to our developers.

You can read more about my full design system methodology here.

With the foundation set, I was ready to fix the core workflow.

With a solid structure and a design system in place, I could finally attack the biggest problem: the auditing workflow was painful and slow.

The Problem

The "Broken User Journey" showed this clearly:

The Marathon Scroll: Users couldn't see the image, tags, and description at the same time.

Death by 1,000 Clicks: Auditing a single tag took 4-5 clicks and multiple page loads.

The Approach

I sketched rough layouts to find the best way to fit the Image, Tags, and Description on one screen without clutter.

Once the layout was set, I used our new "mini-system" to build the final UI. This included designing a "workflow-in-a-box" layout and, just as importantly, redesigning the tag components themselves to be 1-click interactive elements, not links to a side-nav.

AI as a Critique: As a solo designer, I didn't want to wait for formal reviews to find flaws. I used AI as a design critic. I'd feed it my new screen designs and ask it to find usability gaps or suggest better-known industry patterns. This let me iterate faster and come to team reviews with stronger, more validated designs

The Solution: From "Side-Navs" to "In-Place" Editing

I designed a new 3-column layout that completely fixed the broken workflow. I also replaced the clunky side-navs with interactive components that let users edit tags directly on the screen.

Tab 1 of 2: After

Old UI: Audit one tag

Click the tag

Wait for a side-nav to open

Click "Provide Feedback"

Select "Wrong Tag"

Click "Submit"

This was 4+ clicks for ONE tag audit.

New UI: "2-Click" Audit

Click on the tag.

Select an option to mark as 'wrong' or Change Tag.

The new 3-column layout has:

A persistent product list
A large, clear image
Interactive tag, description, and shop the look components

The new 3-column layout has:

A persistent product list
A large, clear image
Interactive tag, description, and shop the look components

The new 3-column layout has:

A persistent product list
A large, clear image
Interactive tag, description, and shop the look components

The new 3-column layout has:

A persistent product list
A large, clear image
Interactive tag, description, and shop the look components

The Result

This design killed the "Marathon Scroll" and slashed the audit process from 5 clicks down to 1. This was the final piece that turned the "Broken Journey" into the seamless, automated workflow we saw in the beginning.

How the new design system rebuilt user trust?

The Problem

As we saw earlier, the old app was a "Black Hole." It gave zero feedback, leavingIt users staring at a blank screen, wondering, "Is it broken? Is it loading? Is there no content?". This was a trust-killer.

The Solution

Using the new components from our system, I implemented a complete feedback loop. I didn't just add generic messages; I designed context-aware states for every situation.

Contextual Empty States: Instead of one generic "empty" message, I designed different states based on the user's specific situation. For example, the "Product Insights" page shows one message if you have no products yet, and a completely different, guiding message if your data connection is lost.

Ex: Same page with No Products Yet

Before

After

When no products exist, the UI guides the user to the clear next step: importing their inventory.

Before

After

When the connection drops, the UI explains why data is missing and provides a direct action to fix it.

Ex: Same page when Data Connection Lost

Before

After

When the connection drops, the UI explains why data is missing and provides a direct action to fix it.

Ex: Same page when Data Connection Lost

Before

After

When the connection drops, the UI explains why data is missing and provides a direct action to fix it.

Flags (Snackbars): For quick, temporary confirmation of an action (like "Settings saved successfully"), I added snackbars that don't interrupt the user's flow.

Using distinct color tokens (Green for success, Orange for warning) to communicate the message type instantly.

Using distinct color tokens (Green for success, Orange for warning) to communicate the message type instantly.

Inline Flags: For errors or info inside a form (like "Shopify API key is required"), I used inline flags to show the user exactly where the problem is.

Using distinct error states to highlight form validation issues directly at the source.

Section Messages: For more permanent, page-level information (like "Shop The Look results can be viewed..."), I used section messages to give important context.

Using bold, distinct containers to elevate important page-level context above the content.

Using bold, distinct containers to elevate important page-level context above the content.

Lozenges (Status Indicators): I used color-coded tags to show status at a glance. For example, "Verified" is green, while "Unverified" is red. This lets users scan a list of 100 products and instantly see which ones need attention.

Using distinct color tokens (Green for Verified, Red for Unverified) to communicate status.

The Result

This feedback loop was the key to rebuilding trust. Instead of guessing, users now have clear visibility into the system's status. Whether it’s a success message or an error alert, the UI empowers them to make informed decisions based on clear, actionable information.

Finally, I tackled the visual inconsistency.

The Problem

The old UI felt "stitched together." Buttons, spacing, and fonts were random on every page, and text often overflowed its boxes. This made the app feel unprofessional.

Old UI Screens and Components

The Solution

This is where the "sticker sheet" paid off. By building every screen from the same set of components, I eliminated the inconsistencies instantly.

New UI

Applying defined color tokens to specific UI elements to maintain a consistent visual hierarchy and ensure accessibility.

Systematic Consistency

Every page now follows a strict grid and uses the same button and form components. This makes the app feel solid, modern, and trustworthy.

consistent grid structure across all pages to ensure elements align perfectly, reducing visual noise and cognitive load.

So, did the redesign work?

The main goal of this redesign wasn't just to make the app look better. It was to make it easier to understand, cut down on confusion, and stop the flood of support questions.

After launch, both the data and the feedback confirmed that the new design worked.

15% Drop in Support Tickets

Within the first month, support tickets dropped by 15%. Most of the reduction came from the exact issues we targeted:

Where can I find this feature?

Did my settings actually save?

Are all my products imported? How many were rejected?

By making the new IA clear and adding feedback, we stopped these problems from ever becoming support tickets.

40% Jump in User Satisfaction

An internal survey showed a 40% jump in user satisfaction with the new usability and navigation. Users specifically said:

They felt more confident about the system status ("I can see when something is still importing").

They understood the next step more clearly ("I know exactly what to do next").

~20% Faster Development

The new "mini-system" (our sticker sheet and shared rules) acted as a shared language between me and the developers. As a result, front-end build time for new features went down by around 20%, which the developers themselves confirmed.