Wixel Mobile App - AI Design Made Simple

The Challenge

Wixel’s goal is to make AI-powered design tools simple and accessible for anyone, no matter their skill level. My challenge was to translate that goal into a mobile experience that felt light, intuitive, and just as capable as desktop - without overcomplicating the interface or adding unnecessary friction.

To save development time and maintain visual consistency, we built the product on Ionic, which allowed us to deliver a native-like experience through mobile web. This required close collaboration with developers to find the right balance between design flexibility, performance, and usability.

Key challenges included:

• Designing intuitive editing flows that worked smoothly on smaller screens.

• Creating scalable navigation and component patterns for both web and native wrappers.

• Building a custom mobile design system that supported all AI tools and their different states.

• PM and management emphasized feature parity with the web - mobile users shouldn’t miss any functionality.]

Research & Insights

Designing a powerful editing experience on mobile meant rethinking how users interact with a workspace that’s much more flexible on desktop. My focus was on finding familiar patterns in other mobile editing apps, so users wouldn’t have to learn a whole new platform.

On desktop, users can see and manipulate layers, frames, and tools all at once; a setup that doesn’t translate to small screens.
To understand what works on mobile, I explored a variety of image and media editing apps, analyzing how they handle:

• Toolbars and menus

• Layer and frame management

• Editing interactions and quick actions

Key insights:

• Layers need their own screen to avoid workspace overload.

• Consistent layout matters: top bar for context, bottom toolbar for primary tools, floating quick actions for key features.

• Tool switching is necessary: the toolbar adapts depending on the active tool,  users can’t have everything on the screen at once.

Wireframes

With research insights in hand, I moved on to wireframing, focusing mostly on the editor - the most complex part for both UX and development. This stage helped define both the design system and the product solution.

One example that caused some discussion was the “quick actions” menu - simple tasks like duplicate, lock, and delete. Normally, I avoid showing icons without labels, but given the constraints and the fact that these are familiar actions, I tested a minimal icon-only menu. A small user test with friends and colleagues showed it worked well, saving space without confusing users.

At this stage, we presented a happy-flow prototype to management and the CEO to align on the direction and get approval for the solution.

Components

Once the wireframes were ready, I kicked off with developers so they could start building the editor - the part that needed the most time and attention.
I defined color tokens, spacing tokens, and basic components that I already knew we’d need.
For example, the Toolbar component: each element had its own toolbar, changing depending on what the user was editing. Some elements needed more actions, so it had to be a scrollable horizontal menu to fit everything without cluttering the workspace.

Main Flows

Image Editing 

Basic actions like Crop, Rotate, Shadow, Border, and Border Radius were a natural starting point. These common features let us test the UI design early, ensuring interactions felt smooth, intuitive, and familiar.

AI Tools

The AI tools were the main focus of Wixel and what made it stand out. Users could remove or replace backgrounds, generate images or avatars, and expand an image using AI. My goal was to make these advanced tools feel simple and fun to use, so anyone could get creative results without feeling overwhelmed.

More Examples

Post Release

The app was released to the App Store and Play store and open to all users (currently only in English). We’re awaiting more data and user voices from our users.